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