AbortController

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

AbortController 인터페이스는 하나 이상의 웹 요청을 취소할 수 있게 해준다.

AbortController.AbortController() 생성자를 사용해 새로운 AbortController 를 생성한다. AbortSignal 객체를 사용해 DOM 요청과의 통신이 완료된다.

생성자

AbortController(): 새로운 AbortController 객체 인터페이스를 생성한다.

프로퍼티

AbortController.signal Read only: DOM 요청과 통신하거나 취소하는데 사용되는 AbortSignal 객체 인터페이스를 반환한다.

메소드

AbortController.abort(): DOM 요청이 완료되기 전에 취소한다. 이를 통해 fetch 요청 (en-US), 모든 응답 Body 소비, 스트림을 취소할 수 있다.

예제

다음 스니펫에서는 Fetch API를 사용해 비디오를 다운로드하는 것을 목표로 한다.

먼저 AbortController() 생성자를 사용해 컨트롤러를 AbortController.signal 프로퍼티를 사용해 AbortSignal 객체와 관계된 참조를 얻는다.

Fetch 요청 (en-US)을 시작할 때, 요청의 옵션 객체 내부에 AbortSignal 옵션을 전달한다(아래의 {signal} 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 AbortController.abort()를 호출하여 이를 취소할 수 있게한다.

var controller = new AbortController();
var signal = controller.signal;

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

downloadBtn.addEventListener('click', fetchVideo);

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

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

참고: 노트: abort()가 호출되면, fetch() promise는 AbortError으로 명명된 DOMException과 함께 reject된다.

동작하는 완전한 예제는 GitHub에서 확인 할 수 있다 — abort-api 참고(라이브 실행도 확인할 수 있다).

명세

Specification
DOM Standard # interface-abortcontroller

브라우저 호환성

BCD tables only load in the browser

함께 보기

Fetch API
Abortable Fetch by Jake Archibald