Axios-Interceptor React JS

In diesem Artikel besprechen wir, wie man mit Axios in React einen sicheren und effizienten API-Client erstellt. Wir behandeln das Axios-Setup mit Interceptoren, die Fehlerbehandlungskonfiguration und CRUD-Methoden mithilfe der APIClient-Klasse. Lassen Sie uns die Funktionsweise dieses Skripts und die von ihm bereitgestellten Funktionen aufschlüsseln.

1. Grundlegende Axios-Konfiguration

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

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

Dieses anfängliche Axios-Setup definiert die Basis-URL und legt den Inhaltstyp für alle POST-Anfragen fest. Durch die Konfiguration einer Basis-URL hängt Axios diese Basis-URL automatisch an jede Anfrage an und erleichtert so die Arbeit mit Endpunkten in API-Aufrufen.

2. Verwendung von Interceptoren für Reaktion und Fehlerbehandlung

Interceptoren sind leistungsstarke Tools, die es uns ermöglichen, Antworten und Fehler global zu verarbeiten.

Umgang mit Antworten

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

## Handling Errors

);

Dieser Antwort-Interceptor prüft, ob die Antwort Daten enthält. Wenn es existiert, werden einfach die Daten zurückgegeben. Auf diese Weise erhalten wir nur die relevanten Daten, die wir in unseren Komponenten benötigen, ohne wiederholt auf „response.data“ zuzugreifen.

Umgang mit Fehlern

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

Wenn in diesem Abschnitt der Antwortstatus 401 lautet und das Token ungültig ist, löscht die App das Token aus dem sicheren lokalen Speicher und leitet den Benutzer zur Anmeldeseite weiter. Dadurch wird sichergestellt, dass Benutzer automatisch abgemeldet werden, wenn ihre Authentifizierungssitzung abläuft. Bei anderen Statuscodes wird der Fehler erfasst und basierend auf dem Fehlertyp eine entsprechende Meldung zurückgegeben.

3. setAuthorization-Funktion

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

Mit dieser Funktion kann die App jeder Anfrage dynamisch ein Authentifizierungstoken hinzufügen. Durch den Aufruf von setAuthorization(token) nach der Anmeldung wird das Token automatisch zu den Anforderungsheadern hinzugefügt.

4. Erstellen einer APIClient-Klasse für CRUD-Methoden
Die APIClient-Klasse stellt Standardmethoden für HTTP-Anfragen bereit, einschließlich get, create, update, put und delete.

Methode abrufen
Diese Methode ist flexibel und verarbeitet Parameter entweder im Objekt- oder 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;
};

Diese Methode formatiert Abfragezeichenfolgen automatisch und erleichtert so das Erstellen von GET-Anfragen mit komplexen Parametern wie Paginierung, Filter oder Sortierung.

Methoden erstellen, aktualisieren, einfügen und löschen
Diese Methoden nutzen die integrierten Post-, Patch-, Put- und Delete-Funktionen von Axios, um mit der API zu interagieren.

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

Diese Klasse abstrahiert API-Aufrufe, wodurch der Code in Komponenten sauberer und strukturierter wird und Redundanzen reduziert werden.

Beispiel für die Verwendung des API-Clients

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

Das vollständige Skript finden Sie im folgenden Kerninhalt
Axios Interceptor

Das obige ist der detaillierte Inhalt vonAxios-Interceptor React JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!