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 ⁨2019年3月⁩.

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

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

値

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

例

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

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

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

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 に完全に動作する例があります。また、ライブでの実行も確認してください。