간단한 라이브러리로 Axios 요청 중단

TL; DR

v0.22.0부터 Axios는 요청을 취소하기 위해 AbortController를 지원합니다. 그러나 모든 Axios 요청에서 AbortController를 처리하려면 많은 단계가 필요합니다.

그래서 코드 변경 없이 구현하기 위해 간단한 라이브러리 axios-abort 를 작성합니다.

설치

npm install axios-abort --save
알림: Axios v0.22.0 이상을 사용하고 있는지 확인하십시오.

용법

작은 구성

axios 구성 파일에서:

전역 구성의 경우:

import axios from "axios";
import withAbort from "axios-abort";

withAbort(axios);

인스턴스 구성의 경우:

import axios from "axios";
import withAbort from "axios-abort";

const axiosAbort = axios.create()
withAbort(axiosAbort);

이제 모든 axios 요청 약속에는 abort() 기능이 포함됩니다. 이를 사용하여 요청을 중단할 수 있습니다.

Node.js

let promise = axios.get("https://google.com")

promise.then().catch(error => {
        console.error(error) // => error due to abort
    })

promise.abort()

반응 후크

useEffect(() => {
    let promise = axios.get("https://google.com")

    promise.then().catch(error => {
        console.error(error) // => error due to abort
    })

    return () => {
        promise.abort()
    };
}, []);

지원되는 방법

axios-abort는 아래 방법을 지원합니다.

axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

options 매개변수를 통해 지원되는 방법 목록을 사용자 정의할 수도 있습니다.

withAbort(axios, {
    methods: ['get']    // only add abort controller into GET method
})

읽어주셔서 감사하고 마음에 드셨으면 합니다 🙆