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.
メモ: この機能はウェブワーカー内で利用可能です。
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 に完全に動作する例があります。また、ライブでの実行も確認してください。
仕様書
Specification |
---|
DOM Standard # ref-for-dom-abortcontroller-signal② |
ブラウザーの互換性
BCD tables only load in the browser