axios API 요청 취소하기

이미 보내버린 API 요청을 취소해보자

제발 돌아와 API 야

 

미리보기

가출 청소년 API

귀가조치

 

코드

import axios, { CancelTokenSource } from "axios";

const TestComponent = () => {
  const [cancelTokens, setCancelTokens] = useState<CancelTokenSource[]>([]);

  ////////// 게시물 업로드
  const articleUpload = async () => {
    // 취소 토큰 발급
    const source = axios.CancelToken.source();
    // 취소 토큰 배열에 추가
    setCancelTokens((prev) => [...prev, source]);

    // API 요청
    const response = await axios.post(
      // API 앤드포인트
      "/autopress/articles",
      // 요청 데이터
      {
        data: "test-test-test",
      },
      // 취소 토큰
      {
        cancelToken: source.token,
      }
    );

    return response;
  };

  const cancelAllApi = () => {
    // 순회하며 업로드 취소
    cancelTokens.forEach((token) => {
      token.cancel("API 요청 취소");
    });
    // 취소 토큰 초기화
    setCancelTokens([]);
  };

  return (
    <>
      <Button variant="contained" color="primary" onClick={articleUpload}>
        업로드
      </Button>
      <Button variant="contained" color="primary" onClick={cancelAllApi}>
        모든 API 요청 취소
      </Button>
    </>
  );
};

export default TestComponent;