Axios는 매우 유연하고 강력한 HTTP 클라이언트 라이브러리로, 서버에 HTTP 요청을 보내는 데 자주 사용됩니다. 이 라이브러리는 취소 가능한 요청을 보내는 기능을 지원하여, 요청이 취소되었을 때 네트워크 요청과 관련된 리소스를 해제할 수 있습니다.

이 게시물에서는 TypeScript를 사용하여 Axios를 이용해 취소 가능한 요청을 보내는 방법에 대해 알아보겠습니다.

Axios 설치

먼저, Axios를 프로젝트에 설치해야 합니다. npm을 이용해 Axios를 설치하는 방법은 아래와 같습니다.

npm install axios

yarn을 사용하는 경우에는 다음과 같이 설치할 수 있습니다.

yarn add axios

취소 가능한 요청 만들기

취소 가능한 요청을 만들기 위해, CancelToken 클래스를 사용해야 합니다. CancelToken 클래스는 취소 토큰을 생성하는데 사용됩니다.

아래는 취소 가능한 요청을 보내는 예제 코드입니다.

import axios, { CancelToken } from 'axios';

const source = CancelToken.source();

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

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

위의 예제에서는 axios.get 메서드의 두 번째 매개변수로 cancelToken을 전달하여 취소 가능한 요청을 만들었습니다. 그 다음, source.cancel을 호출하여 요청을 취소할 수 있습니다.

결론

Axios를 사용하여 취소 가능한 요청을 보내는 방법을 살펴봤습니다. 이를 통해 네트워크 요청을 취소하고 리소스를 관리하는 데 도움이 될 것입니다.

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