[컴][웹] http request 취소 방법

 

abort / request cancel the request/

http request 취소

AbortController 를 사용하면 된다.

아래는 ref. 1 의 예제이다.

downloadBtn 을 누르면, fetch 가 시작되며, abortBtn 을 누르면, controller.abort() 가 호출되는 구조이다.

controller.abort() 가 호출되면, fetch() 는 AbortError 라는 DOMException 을 발생시킨다.

let controller;
const url = 'video.mp4';

const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', () => {
  if (controller) {
    controller.abort();
    console.log('Download aborted');
  }
});

function fetchVideo() {
  controller = new AbortController();
  const signal = controller.signal;
  fetch(url, { signal })
    .then((response) => {
      console.log('Download complete', response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}

Reference

1. And when that is invoked, the signal gets notified. controller.abort();
2. AbortController - Web APIs | MDN