Axios는 자바스크립트에서 HTTP 요청을 보내는 데 매우 유용한 라이브러리입니다. 그러나 때로는 여러 개의 요청을 보낼 때 이전 요청을 취소해야 할 수도 있습니다. 이때 Axios의 캔슬 토큰을 사용할 수 있습니다.

캔슬 토큰이란?

캔슬 토큰은 Axios의 취소 메커니즘을 구현하는 데 사용되는 개체입니다. 이 개체를 사용하여 요청을 취소할 수 있으며, 이는 요청이 아직 완료되지 않은 경우에만 적용됩니다.

취소 토큰 생성하기

Axios에서 취소 토큰을 생성하려면 axios.CancelToken.source() 메서드를 사용합니다.

const cancelToken = axios.CancelToken.source();

위의 코드는 cancelToken 변수에 새로운 취소 토큰을 생성합니다.

요청에 취소 토큰 적용하기

이제 생성한 취소 토큰을 Axios 요청에 적용하는 방법을 살펴보겠습니다. Axios는 cancelToken 옵션을 통해 취소 토큰을 전달받을 수 있습니다.

axios.get('/api/data', {
  cancelToken: cancelToken.token
})
  .then(response => {
    // 성공적으로 처리된 경우
  })
  .catch(error => {
    // 요청이 취소된 경우 또는 오류가 발생한 경우
  });

위의 예시에서는 axios.get() 메서드를 사용하여 /api/data 엔드포인트로 GET 요청을 전송하고 있습니다. cancelToken 옵션에 생성한 취소 토큰의 token 속성을 전달하여 해당 요청을 취소할 수 있습니다.

요청 취소하기

이제 생성한 취소 토큰을 사용하여 요청을 취소해보겠습니다. 취소 토큰의 cancel() 메서드를 호출하여 요청을 취소할 수 있습니다.

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

위의 코드는 cancel() 메서드를 호출하여 요청을 취소하고, 선택적으로 취소 사유를 전달하는 예시입니다. 이렇게 하면 Axios가 해당 요청을 취소하고, 취소 관련 오류 핸들러를 호출합니다.

결론

Axios 캔슬 토큰은 여러 개의 요청을 보낼 때 필요한 취소 메커니즘을 제공합니다. 이를 통해 이전 요청을 취소하고 새로운 요청을 보낼 수 있습니다. 취소 토큰은 요청의 취소 상태를 관리하고 취소 관련 오류를 처리하는 데 사용됩니다.