Axios インターセプター React JS

この記事では、React で Axios を使用して安全で効率的な API クライアントを作成する方法について説明します。インターセプターを使用した Axios のセットアップ、エラー処理構成、APIClient クラスを使用した 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 を設定します。 BaseURL を構成すると、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) を呼び出すと、リクエストヘッダーにトークンが自動的に追加されます。

4. CRUD メソッドの APIClient クラスの作成
APIClient クラスは、get、create、update、put、delete などの HTTP リクエストの標準メソッドを提供します。

メソッドの取得
このメソッドは柔軟で、オブジェクト形式または文字列形式のパラメータを処理します。

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 インターセプター React JSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。