Axios Interceptors | axios.interceptors
By onjsdev
Feb 24th, 2024
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.