AbortSignal

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

AbortSignal 인터페이스는 DOM 요청(Fetch와 같은)과 통신하고 필요한 경우 AbortController 객체를 통해 취소할 수 있게 해주는 신호 객체를 나타낸다.

프로퍼티

AbortSignal 인터페이스는 또한 부모 인터페이스 EventTarget으로부터 프로퍼티를 상속받는다.

AbortSignal.aborted Read only
신호가 통신하는 요청이 취소되었는지(true) 그렇지 않은지(false)를 나타내는 Boolean.

이벤트

addEventListener()를 사용하거나 이 인터페이스의 oneventname 프로퍼티로 이벤트 리스너를 할당하여 이벤트를 리슨한다.

abort
신호가 통신하는 요청이 취소되었을 때 호출된다. onabort (en-US) 프로퍼티를 통해서도 사용이 가능하다.

메소드

AbortSignal 인터페이스는 부모인 EventTarget로부터 메소드를 상속받는다.

예제

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

현재 버전의 Firefox는 DOMException으로 promise를 reject한다.

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

명세

명세 상태 코멘트
DOM
The definition of 'AbortSignal' in that specification.
Living Standard 초기 정의

브라우저 호환성

BCD tables only load in the browser

함께 보기