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 つ目のイベントリスナーに見られるように中断が許可されます。

js

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

関連情報