Axios Interceptors: Understanding and Using Them in Your Applications

Axios is a popular JavaScript library used for making HTTP requests. One of its unique features is the use of interceptors, which allow developers to perform specific actions before or after sending a request. In this blog, we will explore what Axios interceptors are, how they work, and how you can use them in your applications.

What is Axios Interceptors?

Interceptors are functions that are executed on either the request or response of an Axios call. They allow you to perform specific actions before or after a request is sent, such as adding headers, modifying the request payload, or transforming the response data. This can be especially useful for cases where you need to add a common header to all your requests, such as an authorization token, or when you need to handle errors in a uniform manner.

How do Axios Interceptors work?

Axios interceptors are registered using the axios.interceptors.request.use() and axios.interceptors.response.use() methods. The first method is to register a request interceptor, and the second is to register a response interceptor. When you make an Axios call, the interceptors are executed in the order they were registered.

For example, let’s say you have a request interceptor that adds an authorization header to all your requests. When you make an Axios call, the interceptor will run first, add the header to the request, and then the request will be sent.

import axios from 'axios';

const instance = axios.create();

instance.interceptors.request.use(config => {
  // Do something before request is sent
});

instance.interceptors.response.use(config => {
  // Do something with response data
});

Using Axios Interceptors in Your Applications

Axios interceptors are easy to implement and can be used in a variety of ways. Here are some examples of common use cases for Axios interceptors:

1. Adding a common header: You can use an Axios interceptor to add a header, such as an authorization token, to all your requests. This way, you don’t have to add the header manually for each request.

instance.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer your-token-here';
  return config;
});

2. Error handling: You can use an Axios interceptor to handle errors in a uniform manner. For example, you can display an error message or redirect the user to a different page when an error occurs.

instance.interceptors.response.use(response => response, error => {
  console.error(error.response.data);
  return Promise.reject(error);
});

3. Modifying the request payload: You can use an Axios interceptor to modify the request payload, such as adding or removing data.

instance.interceptors.request.use(config => {
  config.data.userId = 123;
  return config;
});

4. Transforming the response data: You can use an Axios interceptor to transform the response data, such as converting it to a specific format or adding additional data.

instance.interceptors.response.use(response => {
  response.data = response.data.map(item => item.toUpperCase());
  return response;
});

Conclusion

Axios interceptors are a powerful tool that allows you to perform specific actions before or after making an Axios call. They can be used for a variety of purposes, such as adding headers, handling errors, modifying the request payload, and transforming the response data. By using Axios interceptors in your applications, you can write cleaner, more concise code and handle common tasks in a uniform manner.

I hope you found this blog post helpful for your project! If you have any suggestions for improving this post, I’d love to hear feedback in the comments.

Follow me on:

GitHub: https://github.com/tanmaythole

LinkedIn: https://www.linkedin.com/in/tanmay-thole-b82978175/

Thanks for reading, and happy coding! 👩🏽‍💻