Search for a command to run...
I am a Full stack Software Engineer and also a hobbyist writer who writes about Software Development and its allied intricacies. I hold on to my methods loosely, embrace flexibility & modularity and believe we can always grow.
nice blog
A few months ago, my product manager dropped something in the team channel. "We are adding an AI agent to the platform next quarter. It will handle follow-ups automatically." Just like that. One messa
f you’re diving into React, you’ve likely come across the useRef hook. But what exactly is useRef(), and how can it make your life easier? In this post we’ll cover what useRef is, walk through five
A bug that only happens for some users, that you can never reproduce, that isn't in your code. Welcome to the React + browser-translation crash — what causes it, why it's so sneaky, and the battle-tested one-file fix.
Upgrading a core production database is usually the stuff of dev nightmares. It often involves maintenance windows, scheduled downtime, and the looming fear of a botched migration. But what if you cou
We are moving into products that adapt, predict and react with real context. Designing only interfaces is not enough anymore. We are designing experiences that understand the user. Designers and digital agencies are now challenged to move beyond trad...
Engineering at JoBins
167 posts
Welcome to Engineering at JoBins — where we share the stories, insights, and lessons from building a world-class hiring platform. From system design and scalability to developer tools and team culture, our engineers write about the real challenges we solve every day. Whether you're a curious developer or a fellow builder, we hope our experiences inspire and inform your own engineering journey.
Axios is the go-to JavaScript library for handling requests to websites.
In this guide, we'll start with the basics of something called 'Axios interceptors.' Think of them as clever tools built into Axios that let you tweak requests and responses without causing any trouble. We'll also explore practical examples so that you can use them in your projects.
Axios is a popular promise-based JavaScript library for making HTTP requests. Axios provides an easy-to-use API for making different types of requests such as GET, POST, PUT and DELETE. It also supports advanced features such as the cancellation of requests, interceptors, and automatic transformation of request and response data to JSON.
To install and use Axios in your project you can run the following command:
npm install --save axios
Axios interceptors are functions that are called before a request is sent and after a response is received. They provide a way to modify and control the requests and responses that are sent and received by the application. Interceptors can be used to add headers, modify requests, handle errors, and much more.
Adding Axios Interceptors
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response;
}, function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
return Promise.reject(error);
});
Interceptors can be used to seamlessly inject authentication headers into outgoing requests. This is particularly useful for APIs that require authorization tokens or API keys.
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
});
instance.interceptors.request.use(config => {
const token = localStorage.getItem('authToken');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
export default instance;
Interceptors can also help in managing errors uniformly across your application. You can create an error interceptor to catch and handle common error responses from the API.
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
});
instance.interceptors.response.use(
response => response,
error => {
if (error.response) {
if (error.response.status === 401) {
// Redirect to login page
} else if (error.response.status === 404) {
// Redirect to 404 page
}
}
return Promise.reject(error);
}
);
export default instance;
Interceptors can help enhance user experience by providing loading indicators during API requests. Additionally, you can implement request cancellation to prevent unnecessary network traffic when users navigate away from a page.
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
});
let activeRequests = 0;
instance.interceptors.request.use(config => {
activeRequests++;
// Show loading indicator
return config;
});
instance.interceptors.response.use(
response => {
activeRequests--;
if (activeRequests === 0) {
// Hide loading indicator
}
return response;
},
error => {
activeRequests--;
if (activeRequests === 0) {
// Hide loading indicator
}
return Promise.reject(error);
}
);
export default instance;
For applications using JWT tokens, interceptors can be used to detect token expiry and automatically refresh the token before making the actual request.
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
});
let isRefreshing = false;
instance.interceptors.response.use(
response => response,
async error => {
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
if (!isRefreshing) {
isRefreshing = true;
// Refresh token logic here
// Once the token is refreshed, replay the original request
originalRequest._retry = true;
return instance(originalRequest);
}
}
return Promise.reject(error);
}
);
export default instance;
If we need to remove the request interceptor later on, we will need to instantiate it store it as a constant and just call the eject() function.
const axiosInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(axiosInterceptor);
By exploring these examples of using Axios interceptors, you can see how versatile they can be in various aspects of your API interactions. From adding headers and handling errors to providing loading indicators and handling token expiry, interceptors empower you to create more efficient, resilient, and user-friendly applications.
The flexibility and power of Axios interceptors make them a valuable tool for any JavaScript developer working on web applications that communicate with APIs.