Axios interceptors are middleware functions that can be registered globally or locally with an Axios instance. These interceptors are executed for every HTTP request made with Axios, and they can be used to modify the request or response, handle errors, or perform other tasks. Axios interceptors allow developers to define custom logic that is executed before and after every HTTP request, making it easy to manage common issues and improve the reliability of the application.

One of the most common uses of Axios interceptors is for authentication. In many cases, web applications require users to authenticate themselves before they can access certain resources. With Axios interceptors, developers can easily add authentication headers to every request made with Axios. This can help prevent unauthorized access to resources and improve the security of the application.

Another common use of Axios interceptors is for error handling. When making HTTP requests, there is always the possibility of encountering errors like network timeouts, server errors, or invalid responses. Axios interceptors allow developers to define custom error handling logic that is executed whenever an error occurs. This can help improve the reliability of the application and provide users with more meaningful error messages.

‍

Types of Interceptors

• Request Interceptor
• Response Interceptor

The axios.interceptors.request property is used to register interceptors that are executed before the request is sent, and the axios.interceptors.response property is used to register interceptors that are executed after the response is received.

‍

Centralized way of handling API requests:

Assuming that you have a basic understanding of Axios, let’s create a scenario that can help us to understand the Axios Interceptor in a better way.

Let’s say we have an application that sends requests to our backend (which is hosted at https://api.example.com ). There are basically multiple endpoints where we can send request

E.g.: https://api.example.com/admin, https://api.example.com/doctor these are POST request with following requirements:

• Body
• Headers:
• Authorization header
• Content-type : application/json
• Baseurl: https://api.example.com

‍

Using regular Axios how will we send these requests:

In Fig 1.a we are sending a POST request to https://api.example.com/admin endpoint with some data as body and two common headers ‘Content-Type’ and ‘Authorization’. In Fig 1.b we are doing exactly the same thing but this time the endpoint has been changed to https://api.example.com/doctor.

‍

‍

If we are sending the same headers, our baseUrl (https://api.example.com) is also the same, then why write these things again, every time we make an API call? Can we just not write the common things in just one place?

Yes, we can use Axios Interceptors that will handle the API request in a centralized way. Here you can omit writing common things again and again, you just have to mention the common things in the interceptor function and the rest will be handled automatically. Let’s see how.

‍

‍

How to use Axios Interceptors:

Step 1: Creating an instance of Axios:

You have to create an instance of Axios, const instance = axios.create().

‍

Step 2: Add Interceptor to this instance and configure it to set the common stuffs like baseURL, headers etc.,

‍

Step 3: Export this ‘instance’ so that you can use it directly in other files by simply importing it.

So you can see here we don’t need to specify baseURL, we don’t need to write headers explicitly, the interceptor will add those things before making the actual call.

‍

Conclusion

Axios interceptors are a powerful feature of the Axios library that can help developers handle common issues like authentication, error handling, and request processing more effectively. By registering interceptors with an Axios instance, developers can define custom logic that is executed before and after every HTTP request, improving the reliability and security of web applications.

‍