Axiosを使用したタイムアウトの処理

タイムアウトは、リクエストが指定された時間内に応答を受け取らない場合に発生します。これは、サーバーの遅延やネットワークの問題によって引き起こされることがあります。以下に、Axiosでタイムアウトを処理するためのいくつかのシンプルで簡単な方法を示します。

タイムアウトの設定: Axiosでは、timeoutオプションを使用してリクエストのタイムアウトを設定することができます。以下は例です:

axios.get('https://api.example.com/data', { timeout: 5000 })
  .then(response => {
    // リクエストが成功した場合の処理
  })
  .catch(error => {
    // タイムアウトエラーの処理
    if (error.code === 'ECONNABORTED') {
      // タイムアウトエラーの場合の処理
    } else {
      // その他のエラーの場合の処理
    }
  });

上記の例では、リクエストが5秒以内に応答しない場合にタイムアウトエラーが発生します。catchブロック内で、error.codeがECONNABORTEDである場合はタイムアウトエラーとして処理できます。

グローバルなタイムアウト設定: Axiosでは、デフォルトのタイムアウト値を設定することもできます。これにより、すべてのリクエストで同じタイムアウト値が使用されます。以下は例です:

axios.defaults.timeout = 5000;

上記の例では、デフォルトのタイムアウト値を5秒に設定しています。

タイムアウトエラーメッセージのカスタマイズ: Axiosでは、タイムアウトエラーのメッセージをカスタマイズすることもできます。以下は例です:

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.code === 'ECONNABORTED') {
      error.message = 'タイムアウトエラー: リクエストがタイムアウトしました';
    }
    return Promise.reject(error);
  }
);

上記の例では、レスポンスのインターセプターを使用して、タイムアウトエラーのメッセージをカスタマイズしています。

これらはAxiosを使用してタイムアウトエラーを処理するためのいくつかの基本的な方法です。応答時間が長いリクエストやネットワークの問題によるタイムアウトエラーに対処する際に役立ちます。詳細なコード例や他の高度なオプションについては、Axiosの公式ドキュメントを参照してください。