Axios에서 요청 취소 설정하기

 

 

웹사이트에서 버튼 클릭이나 특정 동작 후 로딩 화면이 표시되고,

검색 중에는 '검색 취소' 버튼을 제공하는 경우가 많은 데,

그런 기능은 어떻게 구현할 수 있을까?를 고민하다 2가지 방법을 알게 되었습니다.

 

---

 

1. CancelToken 사용하기

 

1️⃣ axios.CancelToken.source()를 사용하여 취소 토큰을 생성한다.

2️⃣ API 요청을 보낼 때 cancelToken 옵션에 토큰을 삽입한다.

3️⃣ 해당 요청을 취소할 때 source.cancel()를 호출한다.

import axios from 'axios';

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

axios.get('/api/endpoint', {
  cancelToken: source.token
})
  .then(response => {
    console.log('응답 데이터:', response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('요청이 취소되었습니다:', error.message);
    } else {
      console.error('API 요청 오류:', error);
    }
  });

// 요청 취소
source.cancel('사용자가 요청을 취소했습니다.');

---

 

2. AbortController 사용하기

 

※ Axios 0.22.0 이상에서는 AbortController 사용을 권장합니다. (Fetch API와 함께 사용되며 Axios와 호환됩니다.)

 

1️⃣ AbortController 인스턴스를 생성하여 취소 토큰을 생성한다.

2️⃣ AbortController 인스턴스에서 생성된 signal을 객체를 API 요청 시 삽입한다.

3️⃣ 해당 요청을 취소할 때 controller.abort()를 호출한다.

import axios from 'axios';

// AbortController 생성
const controller = new AbortController();
const { signal } = controller;

axios.get('/api/endpoint', {
  signal
})
  .then(response => {
    console.log('응답 데이터:', response.data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('요청이 취소되었습니다.');
    } else {
      console.error('API 요청 오류:', error);
    }
  });

// 요청 취소
controller.abort();

---

이 두 가지 방법을 통해 네트워크 요청을 더 효율적으로 관리하고, 불필요한 요청이나 사용자가 요청을 취소하는 경우 시스템의 성능을 유지할 수 있습니다!