서버 요청을 보내고 받는 상황에서 기존 요청을 취소하거나, 특정 요청을 중단해야할 때가 있습니다. 이러한 상황에서 자바스크립트를 사용하여 서버 요청을 취소하고 중단하는 방법에 대해 알아보겠습니다.

XMLHttpRequest를 사용한 서버 요청 취소

XMLHttpRequest는 비동기로 서버 요청을 보내고 응답을 받는 데 사용되는 기본 자바스크립트 객체입니다. 서버 요청을 취소하기 위해서는 해당 XMLHttpRequest 객체의 abort() 메서드를 사용할 수 있습니다.

// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();

// 서버 요청 보내기
xhr.open('GET', '/api/data', true);
xhr.send();

// 요청 취소하기
xhr.abort();

위의 예제에서 xhr.abort()는 현재 진행중인 서버 요청을 취소하는 역할을 합니다. abort() 메서드를 호출하면 서버로 보내진 요청은 취소되며, 응답을 받을 수 없게 됩니다.

axios 라이브러리를 사용한 서버 요청 취소와 중단

axios는 자바스크립트에서 가장 인기있는 HTTP 클라이언트 라이브러리 중 하나입니다. axios를 사용하여 서버 요청을 취소하고 중단하기 위해서는 CancelToken 객체를 사용해야 합니다.

// axios와 cancel 토큰 불러오기
var axios = require('axios');
var { CancelToken } = axios;

// 서버 요청 보내기
var source = CancelToken.source();
axios.get('/api/data', {
  cancelToken: source.token
})
  .then(function(response) {
    // 서버 응답 처리
  })
  .catch(function(thrown) {
    if (axios.isCancel(thrown)) {
      console.log('요청이 취소되었습니다.', thrown.message);
    } else {
      // 에러 처리
    }
  });

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

위의 예제에서 CancelToken 객체를 사용하여 취소할 요청을 설정하고, cancel() 메서드를 호출하여 요청을 취소합니다. 또한, isCancel() 메서드를 사용하여 요청이 취소되었는지 확인할 수 있습니다.

결론

자바스크립트에서 서버 요청을 취소하거나 중단하는 방법을 알아보았습니다. XMLHttpRequest와 axios를 사용하여 요청을 취소하는 방법에 대해 실제 예제를 통해 살펴보았습니다. 이러한 기능은 사용자가 필요한 경우 서버 요청을 적절하게 처리하기 위해 유용하게 사용될 수 있습니다.