REST API Call using Axios Interceptor in React NextJs
In this article, I am going to demonstrate how to create a global HTTP request and response handler with Axios Interceptor and used the same in React NextJS application with TypeScript. React and TypeScrip both are very popular nowadays and many developers are using both wisely. Axios is a generic library and that can be used in any frontend javaScript library like React, Vue, Laraval, Node, etc.
Axios, a client HTTP API based on the XMLHttpRequest interface provided by browsers, and examine the key features that has contributed to its rise in popularity among frontend developers.
Why Axios?
Axios is promise-based. However, it provides a more powerful and flexible feature set. Advantages over the native Fetch API include:
- Request and response interception
- Streamlined error handling
- Protection against XSRF
- Support for upload progress
- Response timeout
- The ability to cancel requests
- Support for older browsers
- Automatic JSON data transformation
Installation
Axios can be installed in any of the following ways -
Request & Response with Axios Interceptor
// send a POST request
axios({
method: 'post',
url: '/login',
data: {
firstName: 'Lazy',
lastName: 'Panda'
}
});
This is very simple and it works great, but in the real-world scenario, we need to deal with many API Headers like Authentication (bearer token), API key (x-api-key) etc. Then we will definitely need the interceptor and helps us to inject headers to the HTTP request globally from a single piece of code. Also, it helps to handle the error scenarios as well.
I am using TypeScript to built the Axios Interceptor.
Step 1 - I am creating an Abstract class called HTTPBaseService and in constructor passing the base URL and if any token
import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from "axios";
export abstract class HTTPBaseService {
protected instance: AxiosInstance;
protected token: string;
protected readonly baseURL: string;
public constructor(baseURL: string, token?: string) {
this.baseURL = baseURL;
this.instance = axios.create({
baseURL
});
if (token) {
this.token = token;
}
}
}
Step 2: Now we are intercepting the HTTP Request And response
export abstract class HTTPBaseService {
protected instance: AxiosInstance;
protected token: string;
protected readonly baseURL: string;
public constructor(baseURL: string, token?: string) {
this.baseURL = baseURL;
this.instance = axios.create({
baseURL
});
if (token) {
this.token = token;
}
this.initializeRequestInterceptor();
this.initializeResponseInterceptor();
}
private initializeRequestInterceptor = () => {
this.instance.interceptors.request.use(this.handleRequest);
};
private initializeResponseInterceptor = () => {
this.instance.interceptors.response.use(response => {
if (response.headers && response.headers.authorization) {
const responseToken = response.headers.authorization as string;
this.token = responseToken;
localStorage.setItem('hashToken', this.token);
}
return response;
}, this.handleError);
}
private handleRequest = (config: AxiosRequestConfig) => {
config.headers['Authorization'] = `Bearer ${this.token}`;
return config;
};
}
Step 3: As you can see, now we can inject any HTTP header while the application making any request. Also, we can handle errors as well. let's see how I am handling the 401 (Authentication HTTP error) error and renewed the token.
Now Axios Interceptor has been created, let's invoke this from the application business logic file. For that we need to extend the above abstract class and define our service endpoint there.
import { HTTPBaseService } from "./HTTPBaseService";
export class UserProfileService extends HTTPBaseService {
private static classInstance?: UserProfileService;
constructor(token: string) {
super('https://BASE_URL', token);
}
public static getInstance(token: string) {
if (!this.classInstance) {
this.classInstance = new UserProfileService(token);
}
return this.classInstance;
}
public userBusinessTerritoryData = () => this.instance.get('/BusinessData/InTerritory').then(response => {
if (response) {
return response.data.entity[0];
}
});
}
So the base service and business-specific service have been created, we are going to call the method from your Vue, React, or any component.
userProfileService!: UserProfileService;
executeAPI() {
this.userProfileService = UserProfileService.getInstance(
this.apiToken
);
this.userProfileService.userBusinessTerritoryData()
.then((data) => {
this.territoryData = data.features;
})
.catch((error) => {
throw error;
});
}
This is just a concept of axios interceptor, can be improvise based on application needs.
Happy Coding!
- LP
Loading comments...