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 で拒否されます。

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");
  }
});

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 例外が発生して拒否されます。

js
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

関連情報