DOM：AbortSignalインターフェイス

実験的：これは実験的な機能です。本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

プロパティ

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

メソッド

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

イベント

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

例

この後の短いコードで、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;
  })
}

注記： abort() が呼ばれると、fetch() promise は AbortError で失敗します。

現在のバージョンの Firefox は、DOMException で失敗します。

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

スクリプト：

スクリプト：

DOM

インターフェイス

AbortSignal インターフェイス

プロパティ

メソッド

イベント

例

テスト