[Axios] HTTP 요청 취소하기 - CancelToken을 활용하여

Axios를 사용하여 요청을 취소하는 방법은 CancelToken을 활용하는 것입니다. CancelToken은 Axios에서 제공하는 기능으로, 요청을 취소할 수 있는 토큰을 생성하고 이를 활용하여 요청을 취소할 수 있습니다.

다음은 Axios를 활용하여 요청을 취소하는 예시입니다:

import axios from 'axios';

// 요청 취소용 CancelToken 생성
const source = axios.CancelToken.source();

// Axios 요청 설정 객체에 cancelToken 속성 추가
axios.get('/api/data', { cancelToken: source.token })
  .then(response => {
    // 요청이 성공적으로 완료되었을 때 처리할 로직
    console.log(response.data);
  })
  .catch(error => {
    // 요청이 취소되었거나 실패했을 때 처리할 로직
    if (axios.isCancel(error)) {
      console.log('요청이 취소되었습니다:', error.message);
    } else {
      console.error('요청 실패:', error);
    }
  });

// 요청 취소
source.cancel('사용자에 의해 요청이 취소되었습니다.');

위의 예시에서는 axios.CancelToken.source()를 사용하여 CancelToken 객체와 그에 따른 취소 토큰을 생성합니다. 그리고 Axios 요청 설정 객체에 cancelToken 속성을 추가하여 취소 토큰을 전달합니다. 요청을 취소하기 위해서는 source.cancel() 메서드를 호출하고, 선택적으로 취소 메시지를 전달할 수 있습니다.

또한, 요청이 취소되었는지 여부를 확인하기 위해 axios.isCancel() 함수를 사용하여 에러 객체를 체크할 수 있습니다. 이를 통해 취소된 요청인지 아닌지를 구분하여 처리할 수 있습니다.

이와 같이 Axios의 CancelToken을 활용하면 요청을 취소할 수 있으며, 이는 비동기 작업을 중단하고 불필요한 응답을 처리하지 않도록 도와줍니다.