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

生徒

「先生、API通信をしているときにサーバーが一時的にエラーになることがありますよね。その場合ってどうすればいいんですか？」

先生

「そうですね。そのような場合にはリトライ処理を使うと便利です。リトライとは、失敗したリクエストを自動的にもう一度試す仕組みのことです。」

生徒

「なるほど！インターネットが一瞬切れたときに、もう一度やり直すみたいな感じですか？」

先生

「その通りです。では、ReactとAxiosを使ったリトライ処理の方法を見ていきましょう。」

1. リトライ処理とは？

リトライ処理とは、通信に失敗したときに自動で再試行する仕組みのことです。例えば、サーバーが一時的に混雑している場合や、ネットワークが不安定な場合に有効です。

これにより、ユーザーは「エラー画面がすぐに表示される」ことを避けられ、裏で再試行されて成功すれば自然にデータを取得できます。

2. シンプルなリトライ処理の実装

まずは基本的な書き方です。Axiosで失敗したときに、一定回数だけ再試行する関数を自作できます。


import axios from "axios";

async function fetchWithRetry(url, retries = 3, delay = 1000) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await axios.get(url);
      return response.data;
    } catch (error) {
      if (i < retries - 1) {
        await new Promise(res => setTimeout(res, delay)); // 待機
      } else {
        throw error;
      }
    }
  }
}

この関数では最大3回までリトライし、失敗した場合に1秒待機してから再試行します。

3. Reactコンポーネントでの利用例

次に、Reactのコンポーネントでリトライ処理を使う例を見てみましょう。データ取得が一度失敗しても、自動で再試行されます。


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

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

  useEffect(() => {
    const loadData = async () => {
      try {
        const result = await fetchWithRetry("https://api.example.com/data", 3, 1000);
        setData(result);
      } catch (err) {
        setError("データの取得に失敗しました");
      }
    };

    loadData();
  }, []);

  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. リトライ処理に待機時間（バックオフ）を入れる

毎回すぐにリトライするとサーバーに負担がかかることがあります。そのため、バックオフ（待機時間を増やす方法）を導入するのが一般的です。


async function fetchWithExponentialBackoff(url, retries = 3, delay = 500) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await axios.get(url);
      return response.data;
    } catch (error) {
      if (i < retries - 1) {
        const backoff = delay * Math.pow(2, i); // 500ms, 1000ms, 2000ms...
        await new Promise(res => setTimeout(res, backoff));
      } else {
        throw error;
      }
    }
  }
}

1回目は0.5秒、2回目は1秒、3回目は2秒…と待機時間が増えていきます。

5. ライブラリを使ったリトライ（axios-retry）

自作せずにライブラリを使う方法もあります。axios-retryという拡張ライブラリを使うと、簡単にリトライ処理を追加できます。


import axios from "axios";
import axiosRetry from "axios-retry";

axiosRetry(axios, {
  retries: 3,
  retryDelay: (retryCount) => retryCount * 1000, // 1秒ごとに増加
  retryCondition: (error) => error.response?.status >= 500
});

axios.get("https://api.example.com/data")
  .then(res => console.log(res.data))
  .catch(err => console.error("リトライ失敗:", err));

この場合、サーバーエラー（500番台）のときだけ自動的にリトライされます。