Axios는 많은 개발자들이 사용하는 인기 있는 JavaScript HTTP 클라이언트 라이브러리입니다. 요청을 보내고 응답을 받는 데 편리한 기능을 제공하지만, 때로는 요청을 취소해야 할 때가 있습니다. 이 글에서는 Axios를 사용하여 요청을 취소하는 방법에 대해 알아보겠습니다.

Axios의 요청 취소 기능

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, axios 함수를 사용하여 HTTP 요청을 보낼 수 있습니다. Axios는 요청을 취소하기 위해 CancelToken 객체를 제공합니다. CancelToken 객체는 요청을 취소하기 위한 토큰으로 사용됩니다.

Axios를 사용하여 요청을 보낼 때, cancelToken 옵션을 설정하여 요청이 취소될 수 있도록 할 수 있습니다.

import axios from 'axios';

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

// 요청 보내기
axios.get('/api/data', {
  cancelToken: cancelTokenSource.token
})
  .then(response => {
    // 요청이 성공한 경우 처리 로직
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('요청이 취소되었습니다.', error.message);
    } else {
      console.log('요청 처리 중 오류가 발생했습니다.', error.message);
    }
  });

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

위 예제 코드에서는 Axios에서 제공하는 CancelToken 객체를 생성하고, cancelToken 옵션을 통해 해당 토큰을 요청에 설정했습니다. 그리고 요청을 취소하기 위해 cancel() 메서드를 호출했습니다. 이때 인자로는 취소 사유를 전달할 수 있습니다.

요청이 취소되면 Promise의 catch() 블록이 실행되고, 에러 객체에는 axios.isCancel() 메서드를 통해 취소 여부를 확인할 수 있습니다.

요청 취소 예외 처리

Axios를 사용하여 요청을 보낼 때, 요청이 취소되지 않는 경우에도 대비할 필요가 있습니다. 이를 위해 cancelToken을 적절하게 처리해주는 것이 중요합니다.

const cancelTokenSource = axios.CancelToken.source();

axios.get('/api/data', {
  cancelToken: cancelTokenSource.token
})
  .then(response => {
    // 요청이 성공한 경우 처리 로직
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('요청이 취소되었습니다.', error.message);
    } else {
      console.log('요청 처리 중 오류가 발생했습니다.', error.message);
    }
  });

// "요청을 취소하는 로직" 에서 예외가 발생한 경우
try {
  cancelTokenSource.cancel('사용자에 의해 요청이 취소되었습니다.');
} catch (error) {
  console.log('요청 취소를 처리하는 중 오류가 발생했습니다.', error.message);
}

위 예제 코드에서는 cancel() 메서드를 try-catch 구문 안에서 호출하여 예외 처리를 해주었습니다. 이를 통해 cancel() 메서드 호출 시 발생하는 예외를 적절하게 처리할 수 있습니다.

요약

Axios를 사용하여 요청을 취소하는 방법에 대해 알아보았습니다. CancelToken 객체를 사용하여 요청을 취소하고, 예외 처리를 통해 적절하게 요청 취소를 처리할 수 있습니다. 요청을 취소하는 기능은 네트워크 요청을 더욱 유연하고 안정적으로 다루는 데 도움이 됩니다.

더 많은 정보를 원한다면 Axios 공식 문서를 참고해보세요.

이 글은 Axios 버전 0.21.1을 기준으로 작성되었습니다.