Axios interceptor React JS-JS Tutorial-php.cn

Axios interceptor React JS

Patricia Arquette

Release： 2024-11-10 08:56:03

Original

420 people have browsed it

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";

Copy after login

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

);

Copy after login

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);
    }
}

Copy after login

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;
};

Copy after login

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;
};

Copy after login

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 });
};

Copy after login

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);

Copy after login

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!