AbortSignal

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

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

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

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

• Fetch API
• Jake Archibald による Abortable Fetch