Axios는 자바스크립트에서 가장 인기있는 HTTP 클라이언트 라이브러리 중 하나입니다. 이 라이브러리는 간단한 API를 제공하여 서버에 HTTP 요청을 보내고 응답을 받을 수 있습니다. 또한, Axios는 취소 토큰을 사용하여 HTTP 요청을 취소할 수 있는 기능도 제공합니다.

취소 토큰은 비동기 HTTP 요청을 취소할 때 사용됩니다. 예를 들어, 사용자가 입력 상자에 텍스트를 입력할 때마다 검색 요청을 보내는 경우, 이전 요청이 아직 완료되지 않았을 때 새로운 요청을 보낼 수 있다면 문제가 발생할 수 있습니다. 이런 경우, 이전 요청을 취소하여 중복 요청을 방지할 수 있습니다.

Axios에서 취소 토큰을 설정하려면 axios.CancelToken 객체를 생성하고, 요청 객체에 cancelToken 속성으로 설정해야 합니다. 아래는 취소 토큰을 설정하는 예제입니다.

import axios from 'axios';

// 취소 토큰 생성
const source = axios.CancelToken.source();

// HTTP 요청 설정
axios.get('https://api.example.com/data', {
  cancelToken: source.token
})
  .then(response => {
    // 응답 처리
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('요청이 취소되었습니다.', error.message);
    } else {
      console.log('요청 중 오류가 발생했습니다.', error.message);
    }
  });

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

위의 예제에서 axios.CancelToken.source()를 사용하여 취소 토큰 객체를 생성합니다. 이 토큰 객체는 token 속성을 가지고 있으며, 이 속성을 요청 객체의 cancelToken 속성으로 설정합니다. 이후 요청을 보내면 응답을 받을 때까지 기다리게 됩니다.

만약 요청이 아직 완료되지 않은 상태에서 취소를 하고 싶다면, source.cancel() 메서드를 호출하여 취소합니다. 이 메서드에는 취소 사유를 문자열로 전달할 수도 있습니다.

또한, 에러 핸들링 부분에서는 axios.isCancel() 메서드를 사용하여 취소된 요청인지 확인할 수 있습니다.

Axios와 함께 사용할 수 있는 취소 토큰을 설정하는 방법에 대해 알아보았습니다. 이를 통해 요청을 취소하고 중복 요청을 방지할 수 있으며, 사용자 경험을 개선할 수 있습니다.

더 자세한 정보는 Axios 공식 문서를 참고하십시오.