DEV Community

ramadhan.dev
ramadhan.dev

Posted on

2

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

Enter fullscreen mode Exit fullscreen mode

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

);
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay