Axios는 자주 사용되는 JavaScript HTTP 클라이언트 라이브러리입니다. 이 라이브러리는 웹 애플리케이션에서 서버와의 통신을 쉽게 처리할 수 있도록 도와줍니다. 이번 포스트에서는 Axios의 취소 기능을 활용하는 방법을 알아보겠습니다.

Axios의 취소 기능

Axios는 HTTP 요청에 대한 취소 기능을 제공합니다. 이를 통해 원하는 경우 요청을 취소하고 처리를 중단할 수 있습니다. 이는 사용자가 페이지를 떠나거나 다른 요청을 보내는 등의 상황에서 유용합니다.

취소 기능을 활용하기 위해선 CancelToken 객체를 생성해야 합니다. 이 객체를 요청의 cancelToken 속성에 할당하면 요청이 취소됩니다.

import axios from 'axios';

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

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

// 요청 취소
source.cancel('사용자가 요청을 취소함');

위 예제에서는 axios.CancelToken.source()를 호출하여 CancelToken 객체를 생성합니다. 이 객체를 HTTP 요청 객체의 cancelToken 속성에 할당함으로써 취소 기능을 활성화합니다. 나중에 요청을 취소하고 싶은 경우, CancelToken 객체의 cancel 메소드를 호출하여 요청을 중단할 수 있습니다.

또한, axios.isCancel을 사용하여 요청이 취소되었는지 확인할 수 있습니다. 취소됐을 경우에는 해당 메시지를 출력하고, 그 외에는 오류 메시지를 출력하도록 처리할 수 있습니다.

마무리

Axios의 취소 기능을 활용하면 웹 애플리케이션에서 HTTP 요청을 유연하게 처리할 수 있습니다. 취소 기능을 적절히 활용하여 사용자 경험을 향상시키는데 도움이 될 것입니다.

#axios{.underline} #취소기능{.underline}