Axios 인터셉터 React JS

이 글에서는 React에서 Axios를 사용하여 안전하고 효율적인 API 클라이언트를 만드는 방법에 대해 논의하겠습니다. APIClient 클래스를 사용하여 인터셉터, 오류 처리 구성 및 CRUD 메소드로 Axios 설정을 다룰 것입니다. 이 스크립트의 작동 방식과 제공되는 기능을 자세히 살펴보겠습니다.

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. set권한 부여 기능

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

이 기능을 사용하면 앱이 모든 요청에 ​​인증 토큰을 동적으로 추가할 수 있습니다. 로그인 후 setAuthorization(token)을 호출하면 자동으로 요청 헤더에 토큰이 추가됩니다.

4. CRUD 메소드용 APIClient 클래스 생성
APIClient 클래스는 가져오기, 만들기, 업데이트, 넣기, 삭제 등 HTTP 요청에 대한 표준 메서드를 제공합니다.

get 메소드
이 방법은 유연하며 객체 또는 문자열 형식으로 매개변수를 처리합니다.

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에 내장된 게시, 패치, 넣기 및 삭제 기능을 사용하여 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!