Zenn
😇

axiosのリトライはaxios-retryに任せよう！

に公開
JavaScript
axios
axiosretry
tech

みなさん、こんにちは！mikenekoです！

本日はaxiosのリトライ処理について詳しくお話ししたいと思います。
javascriptを使用している人であれば、axiosを使用している人も多いかと思います。
今回はそちらについて簡単に説明をした後、axios-retryを使用してaxiosのリトライ処理を実装する方法について解説します。

はじめに

axiosは、HTTPリクエストを行うためのJavaScriptライブラリです。axiosは、PromiseベースのAPIを提供し、非同期処理を簡単に扱うことができます。
axios-retryは、axiosのリクエストを自動的にリトライするためのライブラリです。axios-retryを使用することで、リクエストが失敗した場合に自動的にリトライを行うことができます。

axios-retryのオプションについて

axios-retryを効果的に活用するために、以下の主要なオプションを理解しておきましょう。

  • retries: リトライを試みる回数を指定します。
  • retryDelay: 各リトライの間隔をミリ秒単位で設定します。
  • retryCondition: リトライを実行する条件を定義します。

さらに、あまり頻繁には使用されないものの、特定の状況で役立つオプションも存在します。

  • shouldResetTimeout: タイムアウトをリセットするかどうかを決定します。
  • onRetry: 各リトライの前後にコールバック関数を実行します。
  • onMaxRetryTimesExceeded: 最大リトライ回数に達した場合にコールバック関数を実行します。
  • validateResponse: レスポンスを検証するためのコールバック関数を指定します。

必要に応じてこれらのオプションを使用して、リトライの動作をカスタマイズすることができます。
https://github.com/softonic/axios-retry?tab=readme-ov-file#options

axios-retryを使ったリトライ処理の実装例

npm install axios axios-retry

以下のように実装してみました。

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

axiosRetry(axios, {
  retries: 3,
  retryDelay: (retryCount) => {
    return retryCount * 2000;
  },
  retryCondition: (error) => {
    return error.response
      ? error.response.status >= 500
      : false;
  },
});

const request = axios.create({
  baseURL: "https://example.com",
})

request
  .get("/api/data")
  .then((response) => {
    // response.dataを処理する
  })
  .catch((error) => {
    console.error(error);
    throw error;
  })

上記のコードは、axiosとaxios-retryを使用してリトライ処理を実装した例です。以下に各部分の説明を行います。

  1. まず、axiosとaxios-retryをインポートしています。axios-retryは、HTTPリクエストが失敗した際に自動的にリトライを行うためのライブラリです。

  2. 次に、axiosRetry関数を使用してaxiosインスタンスにリトライの設定を適用しています。
    retries: リトライ回数を3回に設定
    retryDelay: リトライ間隔をリトライ回数に応じて2000ミリ秒ずつ増加させています。
    retryCondition: リトライ条件として、HTTPステータスコードが500以上の場合にリトライを行う。
    ように設定しています。

  3. その後、axios.createを使用して、ベースURLを指定したaxiosインスタンスを作成しています。このインスタンスを使用して、"/api/data"エンドポイントにGETリクエストを送信します。

  4. リクエストが成功した場合、response.dataを処理することができます。
    エラーが発生した場合は、axiosRetryのretriesの回数分リトライが実行されます。
    指定回数のリトライも失敗した場合、console.errorでエラーを出力し、エラーを再スローしています。これにより、エラーが発生した際に適切なエラーハンドリングを行うことができます。

このように、axios-retryを使用することで、リトライ処理をaxios-retryに任せることができます。
実務ではもう少し、複雑なretryDelayやretryConditionなどを設定していくと思います。
仕様に合わせて、適切な設定を行うことで、リトライ処理を効果的に活用することができます。

単体テストで使用する時のサンプル

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

describe("axios-retryのテスト", () => {
  beforeEach(() => {
    // テスト前にaxios-retryの設定をリセットする
    axiosRetry(axios, {
      retries: 3,
      retryDelay: 0, //  テスト中はリトライ間隔を0に設定する
      retryCondition: // 本実装のリトライ条件を設定する
    })
    // ↑ ここはプロダクトに合わせて適宜変えてください。
  })
})

このようにすることで、テストケースごとにリトライの設定をリセットすることができます。
また、retryDelayを0に設定することで、テスト中はリトライ間隔を0に設定することができます。

まとめ

本記事では、axios-retryを使用してaxiosのリトライ処理を実装する方法について解説しました。
axios-retryを活用することで、リクエストが失敗した場合に自動的にリトライを行うことができます。
axios-retryのオプションを適切に設定することで、リトライの回数や間隔、リトライ条件などを柔軟に調整することができます。
以上の内容を踏まえて、axios-retryを使用したリトライ処理の実装例を紹介しました。

axios-retryを活用することで、リクエストが失敗した場合に自動的にリトライを行うことができます。
最後までお読みいただき、ありがとうございました。次回もお楽しみに！

Discussion