AbortController.AbortController()

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

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

구문

var controller = new AbortController();

파라미터

없음.

예제

다음 스니펫에서는 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과 함께 reject된다.

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

명세

Specification
DOM Standard # ref-for-dom-abortcontroller-abortcontroller①

브라우저 호환성

BCD tables only load in the browser

함께 보기

Fetch API