Axios攔截器React JS

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

1。 Axios 基本配置

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

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

這個初始 Axios 設定定義了 baseURL 並為所有 POST 請求設定了 Content-Type。透過配置基本 URL，Axios 會自動將此基本 URL 附加到每個請求，從而更輕鬆地在 API 呼叫中使用端點。

2。使用攔截器進行回應和錯誤處理

攔截器是強大的工具，使我們能夠全域處理回應和錯誤。

處理回應

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

## Handling Errors

);

此回應攔截器檢查回應中是否有資料。如果存在，則僅傳回資料。這樣，我們只在元件中取得我們需要的相關數據，而無需重複存取response.data。

處理錯誤

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

在本節中，如果回應狀態為 401 且令牌無效，應用程式會從安全本地儲存中清除令牌並將使用者重新導向到登入頁面。這可確保使用者在身份驗證會話過期時自動登出。對於其他狀態代碼，它會捕獲錯誤並根據錯誤類型返回適當的訊息。

3。 setAuthorization函數

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

此函數允許應用程式動態地為每個請求新增身份驗證令牌。登入後呼叫setAuthorization(token)，token會自動加入到請求頭中。

4。為 CRUD 方法建立 APIClient 類別
APIClient 類別提供了 HTTP 請求的標準方法，包括 get、create、update、put 和 delete。

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

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

此方法會自動格式化查詢字串，從而更輕鬆地建立具有複雜參數（如分頁、篩選器或排序）的 GET 請求。

建立、更新、放置和刪除方法
這些方法使用Axios內建的post、patch、put和delete函數與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 });
};

該類別抽象化了API調用，使得元件中的程式碼更加乾淨、結構化，減少了冗餘。

API 用戶端使用範例

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

對於完整的腳本，您可以查看以下要點
Axios 攔截器

以上是Axios攔截器React JS的詳細內容。更多資訊請關注PHP中文網其他相關文章！