AbortControllerを知らないなんて

Posted at 2025-01-16

多くの開発者がAbortControllerを理解していると思っているかもしれませんが、その機能は基本的な用途をはるかに超えています。たとえば、fetchリクエストのキャンセル、イベントリスナーの管理、Reactフックとの連携などです。

本当にAbortControllerの威力を知っていますか？それでは見てみましょう。

AbortControllerを使った`fetch`リクエストのキャンセル

AbortControllerをfetchと一緒に使うことは、最も一般的な用途です。

以下は、AbortControllerを使ってキャンセル可能なfetchリクエストを作成する例です：

fetchButton.onclick = async () => {
  const controller = new AbortController();
  // キャンセルボタンを追加
  abortButton.onclick = () => controller.abort();
  try {
    const response = await fetch('/json', { signal: controller.signal });
    const data = await response.json();
    // ビジネスロジックをここで処理
  } catch (error) {
    const isUserAbort = error.name === 'AbortError';
    // AbortControllerでリクエストをキャンセルするとAbortErrorがスローされる
  }
};

上記の例は、AbortControllerが導入される前には不可能だった、ネットワークリクエストのプログラムによるキャンセルを実現しています。キャンセルされると、ブラウザはfetchを停止し、ネットワーク帯域幅を節約します。重要なのは、このキャンセルが必ずしもユーザーによって開始される必要はないという点です。

controller.signalはAbortSignalオブジェクトを提供し、fetchのような非同期操作との通信を可能にし、それらをキャンセルできるようにします。

複数のシグナルを1つのシグナルに結合する場合は、AbortSignal.any()を使用できます。以下のように：

try {
  const controller = new AbortController();
  const timeoutSignal = AbortSignal.timeout(5000);
  const response = await fetch(url, {
    // いずれかのシグナルがトリガーされた場合にfetchを中止
    signal: AbortSignal.any([controller.signal, timeoutSignal]),
  });
  const data = await response.json();
} catch (error) {
  if (error.name === 'AbortError') {
    // ユーザーにキャンセルを通知
  } else if (error.name === 'TimeoutError') {
    // タイムアウトを通知
  } else {
    // その他のエラー（ネットワーク問題など）を処理
    console.error(`種類: ${error.name}, メッセージ: ${error.message}`);
  }
}

`AbortController`と`AbortSignal`の違い

AbortController: controller.abort()を通じて関連するシグナルを明示的にキャンセルするために使用します。
AbortSignal: シグナルオブジェクトを表します。それ自体では何もキャンセルできませんが、キャンセル状態を通信します。

AbortSignalでは以下が可能です：

signal.abortedでキャンセルされているかを確認
abortイベントをリッスン：

if (signal.aborted) {
}
signal.addEventListener('abort', () => {});

リクエストがAbortControllerでキャンセルされると、サーバーはそれを処理せず応答も送信しないため、帯域幅を節約し、クライアント側のパフォーマンスを向上させます。

AbortControllerの主なユースケース

WebSocket接続のキャンセル

従来のWebSocketのような古いAPIは、AbortSignalをネイティブにサポートしていません。その代わり、次のようにキャンセルを実装できます：

function abortableSocket(url, signal) {
  const socket = new WebSocket(url);
  if (signal.aborted) {
    socket.close();
    // すでにキャンセルされている場合は即時終了
  }
  signal.addEventListener('abort', () => socket.close());
  return socket;
}

注意：AbortSignalがすでにキャンセルされている場合、abortイベントはトリガーされません。そのため、このケースを事前に確認して処理する必要があります。

イベントリスナーの削除

従来の方法では、イベントリスナーを削除するには完全に同じ関数参照を渡す必要がありました：

window.addEventListener('resize', () => doSomething());
window.removeEventListener('resize', () => doSomething()); // これは機能しない

AbortControllerを使用すると、これが簡単になります：

const controller = new AbortController();
const { signal } = controller;
window.addEventListener('resize', () => doSomething(), { signal });
// abort()を呼び出すことでイベントリスナーを削除
controller.abort();

古いブラウザでは、AbortControllerをサポートするためにポリフィルを追加することを検討してください。

Reactフック内での非同期タスクの管理

Reactでは、コンポーネントが更新される前に以前の非同期タスクが完了しない場合、エフェクトが並行して実行されることがあります：

function FooComponent({ something }) {
  useEffect(async () => {
    const data = await fetch(url + something);
    // データを処理
  }, [something]);
  return <>...</>;
}

このような問題を避けるには、AbortControllerを使用して以前のタスクをキャンセルします：

function FooComponent({ something }) {
  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
    (async () => {
      const data = await fetch(url + something, { signal });
      // レスポンスを処理
    })();
    return () => controller.abort();
  }, [something]);
  return <>...</>;
}

Node.jsでのAbortControllerの使用

最新のNode.jsでは、AbortControllerに対応したsetTimeout実装が含まれています：

const { setTimeout: setTimeoutPromise } = require('node:timers/promises');
const controller = new AbortController();
const { signal } = controller;

setTimeoutPromise(1000, 'foobar', { signal })
  .then(console.log)
  .catch((error) => {
    if (error.name === 'AbortError') console.log('タイムアウトが中止されました');
  });

controller.abort();

ブラウザのsetTimeoutとは異なり、この実装はコールバックを受け入れません。その代わりに.then()やawaitを使用します。

高度なスケジューリングのためのTaskController

ブラウザはタスクの優先順位付けのためにscheduler.postTask()を採用し、TaskControllerがAbortControllerを拡張します。これを使ってタスクをキャンセルしたり、優先順位を動的に調整できます：

const taskController = new TaskController();
scheduler
  .postTask(() => console.log('タスクを実行'), { signal: taskController.signal })
  .then((result) => console.log(result))
  .catch((error) => console.error('エラー:', error));

taskController.abort();