AbortSignal

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

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

プロパティ

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

AbortSignal.aborted (en-US) 読取専用
シグナルが通信しているリクエスト(複数回も)が中断しているかを示す Boolean で、(true) が中断している 、(false) は中断していないを表します。

イベント

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

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

メソッド

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

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

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

読み込みリクエスト が初期化すると、リクエストのオプションオブジェクト (下記 {signal} を参照) の内部のオプションとして AbortSignal を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、AbortController.abort() (en-US) を呼び出すことで下記の 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 の定義
現行の標準 初回定義

ブラウザの実装状況

BCD tables only load in the browser

関連情報