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
# interface-abortcontroller

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
AbortController
AbortController() constructor
abort
reason parameter
signal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

関連情報