Axios interceptor React JS

Dalam artikel ini, kami akan membincangkan cara mencipta klien API yang selamat dan cekap menggunakan Axios dalam React. Kami akan merangkumi persediaan Axios dengan pemintas, konfigurasi pengendalian ralat dan kaedah CRUD menggunakan kelas APIClient. Mari kita pecahkan cara skrip ini berfungsi dan fungsi yang disediakannya.

1. Konfigurasi Asas Axios

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

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

Persediaan Axios awal ini mentakrifkan baseURL dan menetapkan Jenis Kandungan untuk semua permintaan POST. Dengan mengkonfigurasi baseURL, Axios menambahkan URL asas ini secara automatik pada setiap permintaan, menjadikannya lebih mudah untuk bekerja dengan titik akhir dalam panggilan API.

2. Menggunakan Pemintas untuk Respons dan Pengendalian Ralat

Pemintas ialah alat berkuasa yang membolehkan kami mengendalikan respons dan ralat secara global.

Mengendalikan Respons

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

## Handling Errors

);

Pemintas respons ini menyemak sama ada terdapat data dalam respons. Jika ia wujud, ia hanya mengembalikan data. Dengan cara ini, kami hanya mendapat data berkaitan yang kami perlukan dalam komponen kami tanpa mengakses response.data berulang kali.

Mengendalikan Ralat

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

Dalam bahagian ini, jika status respons ialah 401 dan token tidak sah, apl mengosongkan token daripada storan setempat selamat dan mengubah hala pengguna ke halaman log masuk. Ini memastikan pengguna dilog keluar secara automatik jika sesi pengesahan mereka tamat tempoh. Untuk kod status lain, ia menangkap ralat dan mengembalikan mesej yang sesuai berdasarkan jenis ralat.

3. setAuthorization Function

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

Fungsi ini membolehkan apl menambah token pengesahan secara dinamik pada setiap permintaan. Dengan memanggil setAuthorization(token) selepas log masuk, token akan ditambahkan secara automatik untuk meminta pengepala.

4. Mencipta Kelas APIClient untuk Kaedah CRUD
Kelas APIClient menyediakan kaedah standard untuk permintaan HTTP, termasuk dapatkan, cipta, kemas kini, letak dan padam.

dapatkan Kaedah
Kaedah ini fleksibel, mengendalikan parameter sama ada dalam format objek atau rentetan.

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

Kaedah ini secara automatik memformat rentetan pertanyaan, menjadikannya lebih mudah untuk membuat permintaan GET dengan parameter kompleks seperti penomboran, penapis atau isihan.

buat, kemas kini, letak dan padam Kaedah
Kaedah ini menggunakan fungsi siaran, tampalan, letak dan padam terbina dalam Axios untuk berinteraksi dengan 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 });
};

Kelas ini mengabstrakkan panggilan API, menjadikan kod dalam komponen lebih bersih dan lebih berstruktur, mengurangkan lebihan.

Contoh Penggunaan Klien 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);

Untuk skrip lengkap, anda boleh melihat intipati berikut
Axios Interceptor

Atas ialah kandungan terperinci Axios interceptor React JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!