zakklee.dev

예전 글에서 CancelToken을 사용하여 axios 요청 취소를 하였습니다. 이때 CancelToken이 deprecated 되어있어 올바른 방법이 무엇인지에 대한 고민을 남겨두었습니다. 이 고민에 대한 답은 예전에 찾았었는데 미루고 미루다가 이제야 글을 남깁니다.

axios 공식 문서의 한국어 페이지을 보면 CancelToken만 소개되어있습니다. 그러나 영어 페이지을 보면 deprecated 표시된 CancelToken과 함께 signal도 소개되어있습니다.

useEffect(() => {
  const controller = new AbortController();
  // mount 로직
  const fetch = async () => {
    await axios.post(`${COGNITO_DOMAIN}/oauth2/token`, {
        signal: controller.signal,
      });
  }
  fetch().catch((thrown) => {
    if (axios.isCancel(thrown) {
        // 의도된 cancel error
      } else {
        // 의도하지 않은 error
      }
  });
  return () => {
    // unmount 로직
      controller.abort();
  }
}, []);

위와 같이 signal에 AbortContoller를 전달하고, 원하는 곳에서 controller의 abort 메서드를 호출하면 요청을 취소할 수 있습니다.

한국어 페이지의 번역을 작년부터 생각하고 있었는데 다른 분이 먼저 해주셨습니다 (PR). 3월 8일에 올려주셨는데 아직 axios-docs 에서 review가 없는 상태입니다.

교훈

공식 문서 영어 페이지를 사용하자

AbortController를 사용한 axios 요청 취소

교훈