在本文中，我們將討論如何在 React 中使用 Axios 建立安全且有效率的 API 用戶端。我們將使用 APIClient 類別介紹 Axios 設(shè)定、攔截器、錯(cuò)誤處理配置和 CRUD 方法。讓我們分解一下這個(gè)腳本的工作原理以及它提供的功能。

1。 Axios 基本配置

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

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

這個(gè)初始 Axios 設(shè)定定義了 baseURL 並為所有 POST 請(qǐng)求設(shè)定了 Content-Type。透過(guò)配置基本 URL，Axios 會(huì)自動(dòng)將此基本 URL 附加到每個(gè)請(qǐng)求，從而更輕鬆地在 API 呼叫中使用端點(diǎn)。

2。使用攔截器進(jìn)行回應(yīng)和錯(cuò)誤處理

攔截器是強(qiáng)大的工具，使我們能夠全域處理回應(yīng)和錯(cuò)誤。

處理回應(yīng)

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

## Handling Errors

);

此回應(yīng)攔截器檢查回應(yīng)中是否有資料。如果存在，則僅傳回資料。這樣，我們只在元件中取得我們需要的相關(guān)數(shù)據(jù)，而無(wú)需重複存取response.data。

處理錯(cuò)誤

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

在本節(jié)中，如果回應(yīng)狀態(tài)為 401 且令牌無(wú)效，應(yīng)用程式會(huì)從安全本地儲(chǔ)存中清除令牌並將使用者重新導(dǎo)向到登入頁(yè)面。這可確保使用者在身份驗(yàn)證會(huì)話過(guò)期時(shí)自動(dòng)登出。對(duì)於其他狀態(tài)代碼，它會(huì)捕獲錯(cuò)誤並根據(jù)錯(cuò)誤類型返回適當(dāng)?shù)挠嵪ⅰ?

3。 setAuthorization函數(shù)

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

此函數(shù)允許應(yīng)用程式動(dòng)態(tài)地為每個(gè)請(qǐng)求新增身份驗(yàn)證令牌。登入後呼叫setAuthorization(token)，token會(huì)自動(dòng)加入到請(qǐng)求頭中。

4。為 CRUD 方法建立 APIClient 類別
APIClient 類別提供了 HTTP 請(qǐng)求的標(biāo)準(zhǔn)方法，包括 get、create、update、put 和 delete。

取得方法
此方法很靈活，可以處理物件或字串格式的參數(shù)。

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

此方法會(huì)自動(dòng)格式化查詢字串，從而更輕鬆地建立具有複雜參數(shù)（如分頁(yè)、篩選器或排序）的 GET 請(qǐng)求。

建立、更新、放置和刪除方法
這些方法使用Axios內(nèi)建的post、patch、put和delete函數(shù)與API互動(dòng)。

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

該類別抽象化了API調(diào)用，使得元件中的程式碼更加乾淨(jìng)、結(jié)構(gòu)化，減少了冗餘。

API 用戶端使用範(fàn)例

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

對(duì)於完整的腳本，您可以查看以下要點(diǎn)
Axios 攔截器

以上是Axios攔截器React JS的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！