先生と生徒の会話形式で理解しよう

生徒

「先生、ReactでAPI通信をしているときに、途中でリクエストを止めたいときはどうすればいいんですか？」

先生

「それはリクエストキャンセルを使えばできますよ。Axiosには通信を途中で中止する仕組みが用意されています。」

生徒

「キャンセルって、ゲームのダウンロードを途中でやめるみたいな感じですか？」

先生

「そういうイメージです！不要になった通信を止めることで無駄な処理を避けたり、ユーザーにとって快適な動作を実現できます。では実際に書き方を見てみましょう。」

1. リクエストキャンセルとは？

リクエストキャンセルとは、進行中のAPI通信を途中で中断することを指します。例えば、検索ボックスに文字を入力するたびにサーバーに問い合わせるような場合、前のリクエストは不要になることがあります。そのときにキャンセルをしておけば、無駄な処理を避けられます。

これにより「最新の入力結果だけを表示する」ようにできるため、ユーザー体験が向上します。

2. Axiosでのリクエストキャンセルの基本

Axiosでは、AbortControllerという仕組みを使ってリクエストをキャンセルできます。これは「中止ボタン」のような役割を持つオブジェクトです。


import axios from "axios";

const controller = new AbortController();

axios.get("https://api.example.com/data", {
  signal: controller.signal
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log("リクエストがキャンセルされました");
  } else {
    console.error("エラー:", error.message);
  }
});

// キャンセル実行
controller.abort();

この場合、controller.abort()を呼び出すとリクエストは中止され、キャンセルエラーが返ります。

3. Reactコンポーネントでキャンセルを使う

Reactのコンポーネントでは、画面を切り替えたときに古いリクエストをキャンセルするのが一般的です。これにより「アンマウントされたコンポーネントでデータを更新しようとしてエラーになる」問題を防げます。


import React, { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [data, setData] = useState(null);
  const [error, setError] = useState("");

  useEffect(() => {
    const controller = new AbortController();

    axios.get("https://api.example.com/data", { signal: controller.signal })
      .then(res => setData(res.data))
      .catch(err => {
        if (err.name === "CanceledError") {
          console.log("キャンセルされました");
        } else {
          setError("データ取得に失敗しました");
        }
      });

    return () => {
      controller.abort(); // クリーンアップ時にキャンセル
    };
  }, []);

  if (error) return <p>{error}</p>;
  if (!data) return <p>読み込み中...</p>;

  return (
    <div>
      <h1>取得したデータ</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

コンポーネントが画面から消えるときにキャンセルされるので、無駄な通信を避けられます。

4. ユーザー操作でキャンセルする

ユーザーが「キャンセルボタン」を押したときにリクエストを止めることも可能です。長い処理や大量データのダウンロードでは便利です。


import React, { useState } from "react";
import axios from "axios";

function App() {
  const [controller, setController] = useState(null);

  const fetchData = () => {
    const newController = new AbortController();
    setController(newController);

    axios.get("https://api.example.com/slow", { signal: newController.signal })
      .then(res => console.log(res.data))
      .catch(err => {
        if (err.name === "CanceledError") {
          console.log("キャンセルされました");
        } else {
          console.error(err);
        }
      });
  };

  const cancelRequest = () => {
    if (controller) {
      controller.abort();
    }
  };

  return (
    <div>
      <button onClick={fetchData}>データ取得</button>
      <button onClick={cancelRequest}>キャンセル</button>
    </div>
  );
}

export default App;

データ取得中に「キャンセル」ボタンを押すと、通信が途中で止まりエラー処理に移ります。