AbortController: AbortController() コンストラクター
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.
メモ: この機能はウェブワーカー内で利用可能です。
AbortController()
は、新しい AbortController
オブジェクトインスタンスを生成します。
構文
new AbortController()
引数
なし。
例
次のコードでは、動画のダウンロードをフェッチ 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-abortcontroller① |
ブラウザーの互換性
BCD tables only load in the browser