AbortController: abort() メソッド

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.

メモ: この機能はウェブワーカー内で利用可能です。

abort()AbortController インターフェイスのメソッドで、非同期操作を完了前に中止します。 これはフェッチリクエスト、あらゆるレスポンス本体の消費、ストリームを中止することができます。

構文

js
abort()
abort(reason)

引数

reason 省略可

処理が中断された理由。JavaScript で任意の値を指定可能。 指定しなかった場合、理由は "AbortError" DOMException に設定されます。

返値

なし (undefined)。

次のコードでは、動画のダウンロードをフェッチ API を使用して行おうとします。

最初に AbortController() コンストラクターを使用してコントローラーを作成し、関連する AbortSignal オブジェクトへの参照を AbortController.signal プロパティを使用して取り込みます。

フェッチリクエストが開始されると、 AbortSignal をリクエストのオプションオブジェクト(下記の {signal})にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように AbortController.abort() を呼び出すことでフェッチを中断できるようになります。

js
const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  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
# ref-for-dom-abortcontroller-abortcontroller①

ブラウザーの互換性

BCD tables only load in the browser

関連情報