AbortSignal

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

AbortSignal インターフェイスはまた、親のインターフェースである、 EventTarget からプロパティを継承しています。

AbortSignal.aborted 読取専用

シグナルが通信しているリクエスト(複数回も)が中断しているかを示す Boolean で、(true) が中断している 、(false) は中断していないを表します。

addEventListener() を使うかこのインターフェースの oneventname プロパティにイベントリスナーを割り当てることでこのイベントへのアクセスに待機します。

abort

シグナルが通信している DOM リクエスト (複数回も) の中断を呼び出す。
また onabort プロパティを介して利用可能です。

AbortSignal インターフェースは親インタフェースである、EventTarget からメソッドを継承します。

この後の短いコードで、Fetch API を使用してビデオをダウンロードします。

まず AbortController() コンストラクターを使ってコントローラーを生成し、AbortController.signal プロパティを使用して関連する AbortSignal オブジェクトへの参照を取得します。

読み込みリクエスト が初期化すると、リクエストのオプションオブジェクト (下記 {signal} を参照) の内部のオプションとして AbortSignal を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、AbortController.abort() を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。

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

GitHub で完全に動作する例を見ることができます — abort-api (または 実際に動作する様子 を参照) を参照してください。

• Fetch API
• Jake Archibald による Abortable Fetch