Configuring Axios Requests

When developing web applications, efficient handling of HTTP requests is crucial for seamless data interaction between the client and server. Axios, a popular JavaScript library, simplifies making HTTP requests with its promise-based interface. It also offers extensive configuration options to customize requests according to your needs.

In this comprehensive guide, we’ll explore how to configure Axios requests, focusing on setting base URLs, adding headers, using Axios instances, applying global configuration, and utilizing advanced options like interceptors. By the end of this article, you’ll have a thorough understanding of how to tailor Axios requests to fit your project’s requirements.

Table of Contents

Setting Up Axios in Your Project

To start using Axios, you need to set it up in your project. You can install Axios via npm/yarn or include it via a CDN.

Installing Axios via npm/yarn

If you’re using npm or yarn, you can install Axios with a simple command.

Using npm:

npm install axios

Using yarn:

yarn add axios

After installation, you can import Axios in your JavaScript files:

import axios from 'axios';

Setting Up Axios via CDN

If you prefer to include Axios via a Content Delivery Network (CDN), you can add the following script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

This approach is useful for quick setups or for use in environments where a package manager is not available. When included via CDN, Axios is available globally as axios.

Configuring Base URLs

Setting a base URL in Axios simplifies making HTTP requests to a particular server. By defining a base URL, you avoid repeating the common part of the URL in every request, making your code cleaner and easier to maintain.

Using npm/yarn:

import axios from 'axios';

// Setting the base URL
axios.defaults.baseURL = 'https://api.example.com';

// Function to fetch data
const fetchData = async () => {

  try {
  
    const response = await axios.get('/data');
    console.log('Response data:', response.data);
	
  } catch (error) {
    console.error('Error fetching data:', error);
  }
  
};

// Call the function to fetch data
fetchData();

Using CDN:

<script>

  // Setting the base URL
  axios.defaults.baseURL = 'https://api.example.com';

  // Function to fetch data
  const fetchData = async () => {
  
    try {
	
      const response = await axios.get('/data');
      console.log('Response data:', response.data);
	  
    } catch (error) {
      console.error('Error fetching data:', error);
    }
	
  };

  // Call the function to fetch data
  fetchData();
  
</script>

In this example, we set the base URL to https://api.example.com using axios.defaults.baseURL. This base URL is then automatically prepended to any relative URL in our requests, allowing us to simply specify the endpoint /data in the axios.get method. The fetchData function makes a GET request to https://api.example.com/data and logs the response data if successful, or logs any errors that occur.

Adding Headers to Requests

HTTP headers are used to pass additional information with a request or response. Common headers include Authorization, Content-Type, and Accept. Setting headers in Axios requests can be done globally or on a per-request basis.

Using npm/yarn:

import axios from 'axios';

// Function to fetch data with custom headers
const fetchData = async () => {

  try {
  
    const response = await axios.get('https://api.example.com/data', {
      headers: {
        'Authorization': 'Bearer your_token_here',
        'Accept': 'application/json'
      }
    });
	
    console.log('Response data:', response.data);
	
  } catch (error) {
    console.error('Error fetching data:', error);
  }
  
};

// Call the function to fetch data
fetchData();

Using CDN:

<script>

	// Function to fetch data with custom headers
	const fetchData = async () => {

		try {

			const response = await axios.get('https://api.example.com/data', {
				headers: {
					'Authorization': 'Bearer your_token_here',
					'Accept': 'application/json'
				}
			});

			console.log('Response data:', response.data);

		} catch (error) {
			console.error('Error fetching data:', error);
		}

	};

	// Call the function to fetch data
	fetchData();

</script>

In this example, the fetchData function makes a GET request to https://api.example.com/data with custom headers. The headers option in the request configuration sets the Authorization header with a bearer token and the Accept header to specify the expected response format. The response data is logged if the request is successful, and any errors are caught and logged.

Using Axios Instances

Creating an Axios instance allows you to create a customized version of Axios with pre-configured settings. This is useful when you need to make requests to different APIs or require different configurations for specific parts of your application.

Using npm/yarn:

import axios from 'axios';

// Create an Axios instance
const apiClient = axios.create({

  baseURL: 'https://api.example.com',
  headers: {
    'Authorization': 'Bearer your_token_here',
    'Content-Type': 'application/json'
  }
  
});

// Function to fetch data using the Axios instance
const fetchData = async () => {

  try {
  
    const response = await apiClient.get('/data');
    console.log('Response data:', response.data);
	
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

// Call the function to fetch data
fetchData();

Using CDN:

<script>

  // Create an Axios instance
  const apiClient = axios.create({
  
    baseURL: 'https://api.example.com',
    headers: {
      'Authorization': 'Bearer your_token_here',
      'Content-Type': 'application/json'
    }
	
  });

  // Function to fetch data using the Axios instance
  const fetchData = async () => {
  
    try {
	
      const response = await apiClient.get('/data');
      console.log('Response data:', response.data);
	  
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  // Call the function to fetch data
  fetchData();
  
</script>

In this example, we create an Axios instance called apiClient using the axios.create method. This instance is configured with a base URL and custom headers. The fetchData function then uses the apiClient instance to make a GET request to the /data endpoint. The response data is logged if the request is successful, and any errors are caught and logged. Using an Axios instance helps keep your code organized and maintainable, especially when dealing with multiple APIs or different request configurations.

Global Configuration

Global configuration in Axios allows you to set default settings that apply to all requests made using Axios. This is useful for setting up common configurations such as base URLs, headers, and timeouts across your application.

Using npm/yarn:

import axios from 'axios';

// Setting global configuration
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer your_token_here';
axios.defaults.headers.post['Content-Type'] = 'application/json';

// Function to fetch data
const fetchData = async () => {

  try {
  
    const response = await axios.get('/data');
    console.log('Response data:', response.data);
	
  } catch (error) {
    console.error('Error fetching data:', error);
  }
  
};

// Call the function to fetch data
fetchData();

Using CDN:

<script>

  // Setting global configuration
  axios.defaults.baseURL = 'https://api.example.com';
  axios.defaults.headers.common['Authorization'] = 'Bearer your_token_here';
  axios.defaults.headers.post['Content-Type'] = 'application/json';

  // Function to fetch data
  const fetchData = async () => {
  
    try {
      const response = await axios.get('/data');
      console.log('Response data:', response.data);
	  
    } catch(error) {
      console.error('Error fetching data:', error);
    }
	
  };

  // Call the function to fetch data
  fetchData();
  
</script>

In this example, we set global configuration settings for Axios. The axios.defaults.baseURL property sets the base URL for all requests. The axios.defaults.headers.common property sets the Authorization header for all requests, while axios.defaults.headers.post sets the Content-Type header for all POST requests. The fetchData function makes a GET request to the /data endpoint, and the response data is logged if the request is successful. Any errors are caught and logged. Global configuration helps reduce redundancy and ensures consistent settings across all requests.

Advanced Configuration

Advanced configuration options in Axios include the use of interceptors, which allow you to modify requests or responses before they are handled. Interceptors can be used for tasks such as adding authentication tokens, logging requests and responses, and handling errors globally.

Using npm/yarn:

import axios from 'axios';

// Add a request interceptor
axios.interceptors.request.use(

  config => {
    console.log('Request made with ', config);
    config.headers.Authorization = 'Bearer new_token_here';
    return config;
  },
  
  error => {
    return Promise.reject(error);
  }
  
);

// Add a response interceptor
axios.interceptors.response.use(

  response => {
    console.log('Response received', response);
    return response;
  },
  
  error => {
    console.error('Error response', error.response);
    return Promise.reject(error);
  }
  
);

// Function to fetch data
const fetchData = async () => {

  try {
  
    const response = await axios.get('https://api.example.com/data');
    console.log('Response data:', response.data);
	
  } catch (error) {
    console.error('Error fetching data:', error);
  }
  
};

// Call the function to fetch data
fetchData();

Using CDN:

<script>

  // Add a request interceptor
  axios.interceptors.request.use(
  
    config => {
      console.log('Request made with ', config);
      config.headers.Authorization = 'Bearer new_token_here';
      return config;
    },
	
    error => {
      return Promise.reject(error);
    }
	
  );

  // Add a response interceptor
  axios.interceptors.response.use(
  
    response => {
      console.log('Response received', response);
      return response;
    },
	
    error => {
      console.error('Error response', error.response);
      return Promise.reject(error);
    }
	
  );

  // Function to fetch data
  const fetchData = async () => {
  
    try {
	
      const response = await axios.get('https://api.example.com/data');
      console.log('Response data:', response.data);
	  
    } catch (error) {
      console.error('Error fetching data:', error);
    }
	
  };

  // Call the function to fetch data
  fetchData();
  
</script>

In this example, we add request and response interceptors using axios.interceptors.request.use and axios.interceptors.response.use methods. The request interceptor logs the request configuration and modifies the Authorization header. The response interceptor logs the response details and handles errors globally. The fetchData function then makes a GET request to the https://api.example.com/data endpoint. The response data is logged if the request is successful, and any errors are caught and logged. Interceptors provide powerful tools for managing request and response configurations, enabling centralized control over request handling.

Conclusion

In this article, we explored how to configure Axios requests by setting base URLs, adding headers, using Axios instances, applying global configuration, and utilizing advanced options like interceptors. These configurations help streamline and enhance the efficiency of HTTP requests in your web applications.

The examples and concepts discussed provide a solid foundation for working with Axios in your projects. However, there is much more to explore. I encourage you to experiment further with Axios, integrating it into your applications to handle API interactions efficiently and effectively.