AbortController: signal プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.

メモ: この機能はウェブワーカー内で利用可能です。

signalAbortController インターフェイスの読み取り専用プロパティで、求めに応じて非同期操作とやりとりしたり中止したりするために使用される AbortSignal オブジェクトインスタンスを返します。

AbortSignal オブジェクトインスタンスです。

次のコードでは、動画のダウンロードをフェッチ API を使用して行おうとします。

最初に AbortController() コンストラクターを使用してコントローラーを作成し、関連する AbortSignal オブジェクトへの参照を AbortController.signal プロパティを使用して取り込みます。

フェッチリクエストが開始されると、 AbortSignal をリクエストのオプションオブジェクト(下記の {signal})にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように AbortController.abort() を呼び出すことでフェッチを中断できるようになります。

js
const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}

メモ: abort() が呼び出されると、fetch() のプロミスは AbortError で拒否されます。

GitHub に完全に動作する例があります。また、ライブでの実行も確認してください。

仕様書

Specification
DOM
# ref-for-dom-abortcontroller-signal②

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
signal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

関連情報