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
インターフェイスは 1 つ以上のウェブリクエストをいつでも中断することを可能にするコントローラーオブジェクトを表します。
新しい AbortController
オブジェクトは、 AbortController()
コンストラクターを使って新しく生成することができます。非同期操作の通信は、AbortSignal
オブジェクトを使って行われます。
コンストラクター
AbortController()
-
新しい
AbortController
オブジェクトインスタンスを生成します。
インスタンスプロパティ
AbortController.signal
読取専用-
AbortSignal
オブジェクトのインスタンスを返します。 このオブジェクトは、非同期操作の通信や中断に使用します。
インスタンスメソッド
AbortController.abort()
-
非同期操作が完了する前に中断します。これは、フェッチリクエストや、あらゆるレスポンス本体やストリームを中断することができます。
例
メモ: 他の例が AbortSignal
のリファレンスにあります。
この後の短いコードで、フェッチ API を使用して動画をダウンロードします。
まず AbortController()
コンストラクターを使ってコントローラーを生成し、 AbortController.signal
プロパティを使用して関連する AbortSignal
オブジェクトへの参照を取得します。
フェッチリクエストが行われると、リクエストのオプションオブジェクト(下記 {signal}
を参照)の内部のオプションとして AbortSignal
を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、 AbortController.abort()
を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。
abort()
が呼び出されると、fetch()
のプロミスは AbortError
という名前の DOMException
で拒否されます。
let controller;
const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");
downloadBtn.addEventListener("click", fetchVideo);
abortBtn.addEventListener("click", () => {
if (controller) {
controller.abort();
console.log("Download aborted");
}
});
async function fetchVideo() {
controller = new AbortController();
const signal = controller.signal;
try {
const response = await fetch(url, { signal });
console.log("Download complete", response);
// process response further
} catch (err) {
console.error(`Download error: ${err.message}`);
}
}
fetch()
が履行された後で、レスポンス本体を読み込む前にリクエストが中止された場合、レスポンス本体を読み込もうとすると AbortError
例外が発生して拒否されます。
async function get() {
const controller = new AbortController();
const request = new Request("https://example.org/get", {
signal: controller.signal,
});
const response = await fetch(request);
controller.abort();
// 次の行で `AbortError` が発生する
const text = await response.text();
console.log(text);
}
GitHub に完全に動作する例があります。また、ライブでの実行も確認してください。
仕様書
Specification |
---|
DOM Standard # interface-abortcontroller |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- フェッチ API
- Abortable Fetch (Jake Archibald)(英語)