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

生徒

「先生、ReactでAPIを呼び出すときに、サーバーから返事がなかなか来ないと画面が固まることがあるんですが、どうすればいいんですか？」

先生

「それは良い気付きですね。そういうときにはAxiosのタイムアウト設定を使うと便利ですよ。」

生徒

「タイムアウトって、ゲームの休憩時間みたいなイメージですか？」

先生

「その通り！一定時間待っても応答がない場合に、自動で通信を止めてエラーにする仕組みなんです。では、具体的にやり方を見てみましょう。」

1. タイムアウトとは？

タイムアウトとは、一定時間内にサーバーから応答がない場合に処理を中止する仕組みのことです。例えば、ネットで買い物をするときに「読み込み中」のまま止まってしまったら困りますよね。そのような状況を避けるために、タイムアウトを設定するのです。

プログラムでは「ミリ秒（1000分の1秒）」で時間を指定します。例えば5000と書けば5秒を意味します。

2. Axiosでタイムアウトを設定する基本方法

Axiosには、リクエスト時にtimeoutというオプションを付けることでタイムアウトを設定できます。


import axios from "axios";

axios.get("https://api.example.com/data", {
  timeout: 5000 // 5秒でタイムアウト
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error("エラー:", error.message);
});

この場合、5秒以内にサーバーから返事がなければエラーになります。

3. Axiosインスタンスでまとめて設定する

毎回タイムアウトを指定するのは面倒ですよね。その場合は、Axiosインスタンスを作成して一度だけ設定しておく方法が便利です。


import axios from "axios";

// Axiosインスタンスを作成
const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 7000 // 全てのリクエストで7秒のタイムアウト
});

// 使用例
api.get("/users")
  .then(res => console.log(res.data))
  .catch(err => console.error("タイムアウト発生:", err.message));

一度設定しておけば、すべてのリクエストに自動で反映されるので管理が楽になります。

4. タイムアウトエラーを検出して処理する

タイムアウトが起きたときには、catchでエラーを受け取り、そのメッセージをユーザーに伝えると親切です。例えば「通信に時間がかかりすぎています。しばらくしてから再度お試しください。」と表示することができます。


api.get("/slow-api")
  .then(res => console.log(res.data))
  .catch(err => {
    if (err.code === "ECONNABORTED") {
      alert("通信がタイムアウトしました。時間をおいて再度お試しください。");
    } else {
      console.error(err);
    }
  });

タイムアウト専用のエラーコードは「ECONNABORTED」です。

5. Reactコンポーネントでの実装例

Reactのコンポーネント内でタイムアウトを設定することで、ユーザーに「読み込み中」や「エラー」の状態を見せることができます。


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

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

  useEffect(() => {
    axios.get("https://api.example.com/data", { timeout: 3000 })
      .then(res => {
        setData(res.data);
        setLoading(false);
      })
      .catch(err => {
        if (err.code === "ECONNABORTED") {
          setError("通信がタイムアウトしました。");
        } else {
          setError("データの取得に失敗しました。");
        }
        setLoading(false);
      });
  }, []);

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

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

export default App;

読み込みが遅いときは「読み込み中...」と表示され、タイムアウトすると「通信がタイムアウトしました。」と表示されます。