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

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

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

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

仕様

仕様書 ステータス コメント
DOM
AbortSignal の定義
現行の標準 初回定義

ブラウザの実装状況

BCD tables only load in the browser

関連情報