Axios Interceptors | axios.interceptors

Interceptors are important concept in Axios, allowing us to modify the request just before it is sent or response just after it is received.

Let's see in depth what Axios interceptors are and explore how you can use effectively them in your projects.

What are Axios Interceptors?

Simply put, Axios interceptors are functions that you can define globally to perform operations before a request is sent or after a response is received. These functions are invoked in a specific order.

• Request interceptors before the request is sent,
• Response interceptors after the response is received.

Interceptors are very useful to handle common tasks, such as modifying headers, logging, or handling errors, in a centralized manner.

How To Create Interceptors

To create an interceptor, you need to use the axios.interceptors object, which has request and response properties for the two types of interceptors.

For example:

Request Interceptor

// Add a request interceptor
axios.interceptors.request.use(function (config) {
  // Do something before the request is sent
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

Response Interceptor

// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Do something with the response data
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

Useful Examples

You can utilize interceptors for many purposes. Here is a few useful example:

Modifying Requests and Responses

Interceptors allow you to modify the request or response configuration before they are sent or received. For instance, you can add headers, modify the data, or handle errors globally. Here's an example of adding an authorization header to every request:

axios.interceptors.request.use(function (config) {
  // Add authorization header
  config.headers.Authorization = 'Bearer ' + getToken();
  return config;
});

Error Handling

Interceptors also provide a centralized way to handle errors. You can add a response interceptor to catch and handle errors globally:

axios.interceptors.response.use(function (response) {
  // Do something with the response data
  return response;
}, function (error) {
  // Handle errors globally
  if (error.response.status === 401) {
    // Redirect to login page
    redirectToLogin();
  }
  return Promise.reject(error);
});

How To Eject Interceptors

Axios provides a way to eject interceptors using the eject method. This can be useful if you want to remove a specific interceptor. The use method returns an eject function that you can call later:

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
// Eject the interceptor
axios.interceptors.request.eject(myInterceptor);

Conclusion

Axios interceptors are a powerful tool for handling HTTP requests and responses. They provide a clean and centralized approach to address common tasks such as modifying headers, handling errors, or logging.

Thank you for reading.