ネットワーク遅延に強くなる！AbortControllerでFetch通信をスマートに中断する方法【JS中級】

7月 2, 2025 7月 2, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は「AbortController を使って Fetch の通信を中断するテクニック」をご紹介します。

フォーム送信や検索機能などで、ユーザーが操作を変えたのに、古い通信が戻ってきて画面がチラついた…そんな経験ありませんか？

そうした問題を防ぐのが AbortController。
最近のJavaScriptでは、非同期処理の安定性・UIの応答性を保つためにFetchの中断処理が非常に重要になっています。

この記事では、遅延のあるネットワーク通信に備えた実践的なFetch中断処理を、コード付きでわかりやすく解説します！

なぜFetchの中断が必要？

たとえば、リアルタイム検索フォームのようなインターフェースでは、ユーザーが入力を変えるたびにAPIリクエストが発生します。
そのとき、遅れたレスポンスが後から返ってくると、最新の状態が上書きされてしまうことがあります。

中断しない場合の問題

ユーザーが「ABC」→「AB」と入力し直しても、「ABC」の結果が後から上書きされる
ローディングUIがいつまでも消えない
タイムアウト制御が面倒になる

このような問題を解決するのが AbortController。

「いらなくなったリクエストを途中でキャンセル」できるようになります。

AbortControllerとは？

AbortController は JavaScriptの標準APIで、Fetch通信に「キャンセル機能」を追加できます。

基本構文

const controller = new AbortController();
  const signal = controller.signal;
  fetch(url, { signal })
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      if (error.name === "AbortError") {
        console.log("Fetch aborted");
      } else {
        console.error("Other error:", error);
      }
    }); // 必要なくなったら中断！ 
    controller.abort();

ポイントは fetch() の第2引数に { signal } を渡すこと。
そして controller.abort() を呼ぶと、通信が途中で中断されます。

実用例：検索フォームの入力に連動してAbort

リアルタイム検索などで、入力が変わるたびに古い通信をキャンセルしたい場面では、以下のように実装できます。

let controller;
  const input = document.getElementById("searchInput");
  input.addEventListener("input", () => {
    const query = input.value; // 前回の通信をキャンセル
    if (controller) {
      controller.abort();
    }
    controller = new AbortController();
    const signal = controller.signal;
    fetch(`https://api.example.com/search?q=${query}`, { signal })
      .then((res) => res.json())
      .then((data) => {
        console.log("結果:", data);
      })
      .catch((err) => {
        if (err.name === "AbortError") {
          console.log("キャンセルされました");
        } else {
          console.error(err);
        }
      });
  });

こうすることで、最新の入力以外のリクエストはすべてキャンセルされるため、UIの不整合が起こりません。

補足：setTimeoutで簡易タイムアウトにも応用可

AbortController を使えば、Fetchにタイムアウト処理を追加することも可能です。

const controller = new AbortController();
  const signal = controller.signal;
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, 5000); // 5秒でタイムアウト
  fetch("https://example.com/api", { signal })
    .then((res) => res.json())
    .then((data) => {
      clearTimeout(timeoutId);
      console.log(data);
    })
    .catch((err) => {
      if (err.name === "AbortError") {
        console.warn("通信がタイムアウトしました");
      } else {
        console.error(err);
      }
    });

このように、ライブラリなしでも実用的なタイムアウト制御ができるのも大きな魅力です。