AbortSignal

AbortSignal インターフェイスは DOM 要求 (Fetch など) と通信し、必要に応じて AbortController オブジェクトを介して中止することを可能にするシグナルオブジェクトを表します。

プロパティ

The AbortSignal interface also inherits properties from its parent interface, EventTarget.

AbortSignal.aborted 読取専用

A Boolean that indicates whether the request(s) the signal is communicating with is/are aborted (true) or not (false).

イベントハンドラ

AbortSignal.onabort

Invoked when an abort event fires, i.e. when the DOM request(s) the signal is communicating with is/are aborted.

メソッド

The AbortSignal interface inherits methods from its parent interface, EventTarget.

例

In the following snippet, we aim to download a video using the Fetch API.

We first create a controller using the AbortController() constructor, then grab a reference to its associated AbortSignal object using the AbortController.signal property.

When the fetch request is initiated, we pass in the AbortSignal as an option inside the request's options object (see {signal}, below). This associates the signal and controller with the fetch request and allows us to abort it by calling AbortController.abort(), as seen below in the second event listener.

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;
  })
}

You can find a full working example on GitHub — see abort-api (see it running live also).

仕様

ブラウザの実装状況

関連情報

• Fetch API
• Abortable Fetch by Jake Archibald