Axios interceptor React JS

In this article, we’ll discuss how to create a secure and efficient API client using Axios in React. We’ll cover Axios setup with interceptors, error handling configuration, and CRUD methods using the APIClient class. Let’s break down how this script works and the functionality it provides.

1. Basic Axios Configuration

import axios from "axios";
import secureLocalStorage from "react-secure-storage";

axios.defaults.baseURL = "";
axios.defaults.headers.post["Content-Type"] = "application/json";

This initial Axios setup defines the baseURL and sets the Content-Type for all POST requests. By configuring a baseURL, Axios automatically appends this base URL to every request, making it easier to work with endpoints in API calls.

2. Using Interceptors for Response and Error Handling

Interceptors are powerful tools that allow us to handle responses and errors globally.

Handling Responses

axios.interceptors.response.use(
    function (response) {
        return response.data ? response.data : response;
    },
    // ...

## Handling Errors

);

This response interceptor checks if there’s data within the response. If it exists, it simply returns the data. This way, we only get the relevant data we need in our components without repeatedly accessing response.data.

Handling Errors

function (error) {
    if (error?.response?.status === 401 && error?.response?.data?.data === 'Token is not valid'){
        secureLocalStorage.clear()
        window.location.href = '/'
    } else {
        let message;
        switch (error?.response?.status) {
            case 500:
                message = error?.response;
                break;
            case 401:
                message = error?.response;
                break;
            case 404:
            case 400:
            case 409:
                message = error?.response?.data;
                break;
            default:
                message = error.message || error;
        }
        return Promise.reject(message);
    }
}

In this section, if the response status is 401 and the token is invalid, the app clears the token from secure local storage and redirects the user to the login page. This ensures users are automatically logged out if their authentication session expires. For other status codes, it captures the error and returns an appropriate message based on the error type.

3. setAuthorization Function

const setAuthorization = (token) => {
    axios.defaults.headers.common["token"] = token;
};

This function allows the app to dynamically add an authentication token to every request. By calling setAuthorization(token) after logging in, the token will automatically be added to request headers.

4. Creating an APIClient Class for CRUD Methods
The APIClient class provides standard methods for HTTP requests, including get, create, update, put, and delete.

get Method
This method is flexible, handling parameters in either an object or string format.

get = (url, params) => {
    let response;
    let paramKeys = [];

    if (params && typeof (params) === 'object') {
        Object.keys(params).map(key => {
            if (key === 'pagination') {
                paramKeys.push("pageIndex=" + String(params[key]?.pageIndex || 1));
                paramKeys.push("pageSize=" + String(params[key]?.pageSize || 10));
            } else {
                paramKeys.push(key + '=' + params[key]);
            }
        });
        const queryString = paramKeys.length ? paramKeys.join('&') : "";
        response = axios.get(`${url}?${queryString}`, params);
    } else if (typeof (params) === 'string') {
        response = axios.get(`${url}/${params}`);
    } else {
        response = axios.get(url, params);
    }

    return response;
};

This method automatically formats query strings, making it easier to create GET requests with complex parameters like pagination, filter, or sort.

create, update, put, and delete Methods
These methods use Axios’s built-in post, patch, put, and delete functions to interact with the API.

create = (url, data) => {
    return axios.post(url, data);
};

update = (url, data) => {
    return axios.patch(url, data);
};

put = (url, data) => {
    return axios.put(url, data);
};

delete = (url, config) => {
    return axios.delete(url, { ...config });
};

This class abstracts API calls, making the code in components cleaner and more structured, reducing redundancy.

Example of Using the API Client

import { API_URL, API_VERSION } from "#/Common/constants/env";
import { APIClient } from "#/helpers/api_helper";

export const POST_LOGIN = API_URL + API_VERSION +  "/auth/login";

const api = new APIClient();
export const Login = (data: any) => api.create(POST_LOGIN, data);

For the complete script, you can see the following gist
Axios Interceptor

The above is the detailed content of Axios interceptor React JS. For more information, please follow other related articles on the PHP Chinese website!