JavaScript/AbortController

AbortControllerオブジェクト

AbortController は、JavaScriptにおける非同期操作（例：Fetch API）を中止するためのインターフェースです。ES2018 で導入され、非同期処理のキャンセルを実現するために使用されます。

概要

AbortControllerは非同期処理の中断を制御するオブジェクトです。主にPromiseベースのAPIで利用され、AbortSignalと連携して処理の中止を指示します。

構文

AbortControllerオブジェクトの基本的な構文は以下の通りです。

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

controller.abort();

プロパティ

signal - AbortSignal オブジェクトを返します。これを使用して処理を中止します。

メソッド

abort() - 関連付けられたAbortSignalを使って、処理の中断を通知します。

使用例

Fetch APIとの連携

AbortControllerを使用してHTTPリクエストを中断する例です。

// AbortControllerの作成
const controller = new AbortController();
const signal = controller.signal;

// Fetch APIのリクエスト
fetch('https://example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetchリクエストが中断されました');
    } else {
      console.error('エラー:', err);
    }
  });

// 3秒後にリクエストを中断
setTimeout(() => controller.abort(), 3000);

イベントリスナーの中断

AbortControllerを使用してイベントリスナーを中断する例です。

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

signal.addEventListener('abort', () => {
  console.log('処理が中断されました');
});

// 中断処理
controller.abort();

注意点

abort() メソッドを呼び出すと、関連付けられたAbortSignalは中断され、signal.abortedはtrueになります。
Fetch APIでリクエストが中断された場合、エラーのnameプロパティは'AbortError'になります。

対応ブラウザ

以下は、AbortControllerオブジェクトのブラウザ対応状況です。

ブラウザ	対応バージョン
Google Chrome	66以上
Firefox	57以上
Safari	11.1以上
Edge	16以上
Opera	53以上

外部リンク