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
オブジェクトインスタンスを生成します。
構文
js
new AbortController()
引数
なし。
例
次のコードでは、動画のダウンロードをフェッチ 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 Standard # ref-for-dom-abortcontroller-abortcontroller① |
ブラウザーの互換性
BCD tables only load in the browser