Axios는 타입스크립트에서 HTTP 요청을 보내기 위한 인기 있는 라이브러리입니다. 때때로, 요청을 취소하거나 중단해야 하는 상황이 발생합니다. 이 블로그 포스트에서는 Axios를 사용하여 요청을 취소하고 중단하는 방법에 대해 알아보겠습니다.

Axios의 취소 기능

Axios에서 요청을 취소하기 위해서는 취소 토큰(cancel token)을 생성하고 요청에 적용해야 합니다. 이를 통해 우리는 요청이 보내진 후에도 해당 요청을 취소하거나 중단시킬 수 있습니다.

먼저, Axios의 CancelToken 클래스를 생성하고, 취소 토큰을 생성하는 방법을 살펴보겠습니다.

import axios, { CancelToken } from 'axios';

// CancelToken 생성
const source = axios.CancelToken.source();

이제 생성된 취소 토큰을 이용하여 요청을 보내는 동안 취소 토큰을 요청에 적용합니다.

axios.get('/api/data', {
  cancelToken: source.token
});

요청을 취소하려면 source의 cancel 메서드를 호출하면 됩니다.

source.cancel('요청이 취소되었습니다.');

요청 중단 처리

요청을 중단하는 것은 Axios의 내부 기능을 사용하여 해당 요청을 중지시키는 것을 의미합니다. Axios는 Canceler라는 콜백 함수를 통해 이 기능을 제공합니다.

아래의 예제에서는 1초 후에 요청을 취소하는 방법을 보여줍니다.

const { data } = await axios.get('/api/data', {
  cancelToken: new axios.CancelToken((c) => {
    setTimeout(() => c('요청이 취소되었습니다.'), 1000);
  })
});

정리

이상으로 Axios를 사용하여 타입스크립트에서 요청에 대한 취소 및 중단 처리하는 방법에 대해 알아보았습니다. 취소 토큰과 중단 처리 기법을 조합하여 효과적으로 요청을 관리할 수 있습니다.

더 많은 정보를 얻기 위해서는 Axios 공식 문서를 참고하시기 바랍니다.