Axiosの非同期/リトライを待つ

あなたがしばらくJavaScriptをコーディングしているならば、あなたはおそらくおよそ知っていたでしょうAxios . HTTPリクエストを作るための有名なJSライブラリです.あなたがバックエンドやフロントエンドの開発者かどうか、AxiosはそこにAPIサービスにアクセスするために不可欠です.
ああ、2020年代になっても信頼性は乏しい.事が起こり、HTTPリクエストは失速するかもしれません.それで、我々は何をしますか?場合によっては、我々が必要とするデータを得るまで、我々は再び試みるでしょう.その場合、リトライ能力を備えたアクシスを装備する必要がある.
このポストでは、サーバーが応答しないときに、私は再試行能力i . e Resend HTTPリクエストでAxiosを装備する方法を示します.まず、ネイティブウェイ.それから、いくつかのライブラリを使うつもりです.
私はAxiosのほとんどの例が書かれているので、このチュートリアルを書く必要性を感じます.then パターン.私は慣れているasync/await パターンは、より身近な感じ(特に他のOOP言語を学ぶ場合).性能上、both are internally equal .
とにかく、コードに飛び込みましょう.私はノードを作るつもりです.プロジェクト.お気軽にあなたのニーズに合わせてJavascriptのものを使用してください.また、あなたの依存関係が満たされることを確認してください.私は既にノードをインストールしました.このチュートリアルのためのJSとNPM.
まず、端末を使用して新しいプロジェクトを作成します.

$ mkdir request-retry
$ cd request-retry
$ npm init -y
$ touch index.js

次に、axiosパッケージをインストールします.

$ npm install axios

今、我々は編集するつもりですindex.js コードエディターの使用HTTPリクエストをするhttps://mock.codes そして、それが反応するかどうか見てください.

const axios = require('axios')

const myRequest = async () => {
  try {
    const myConfig = {
      headers: {
        Authorization: 'Basic lorem12345'
      }
    }

    const req = await axios.get('https://mock.codes/200', myConfig);
    console.log(req.data);
  } catch (error) {
    console.log(error.response.data);
  }
}

myRequest();

さて、実行index.js

$ node index.js

そして、この結果を得る

{ statusCode: 200, description: 'OK' }

物事は大丈夫ですか?今、私はこのHTTPリクエストを無理に低いタイムアウトを設定してリグするつもりです.これを行うにはtimeout リクエストの設定で.チェックしましょうindex.js 再び編集myConfig そうです.

    const myConfig = {
      headers: {
        Authorization: 'Basic lorem12345'
      },
      timeout: 10 // 10ms timeout so servers hate you
    }

私が走るならば$ node index.js 再び、私はおそらくこのような何かを取得します.

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'data' of undefined

何が起こったのですか.未完の要求によりreq サーバからデータを取得しません.したがって、その値はundefined . キーを得ることはできませんundefined , エラーです.
リトライ機能を備えたAxiosを実装する時です.しかし、さらに進む前に、私が言及するとき、明確にしたいですretry , 主に2つのことをコントロールしたい.

何回我々は再試行したい

どれくらい、我々は各々の裁判のために待ちたいですか

次の2つの方法があります.

実装

パッケージを使う

直接実施
このオプションは、すべてをゼロから行うことを意味します.しかしながら、それはあまり難しくありません.それは私たちのコードで要求のいくつかのタイプを必要とし、パッケージを追加するときにアプリケーションを負担する適切なオプションです.
つの簡単なアプローチは、ループですべての要求を包んでいます.さて、各リクエストに対して3回と50個のmilisecondsを再試行しても構いません.これはワーキングコードの例です.

const axios = require('axios');

const myRequest = async () => {
  try {
    const retries = 3 // amount of retries we're willing to do
    const myConfig = {
      headers: {
        Authorization: 'Basic lorem12345'
      },
      // we're willing to wait 50ms, servers still hate you
      timeout: 50 
    }
    for (var i=0; i<retries; i++) {
      try {
        const req = await axios.get('https://mock.codes/200', myConfig);
        if (req) {
          console.log(req.data);
          break;
        } else {
          console.log('cannot fetch data');
        }
      } catch (error) {
        console.log('cannot fetch data');
      }
    }
  } catch (e) {
    console.log(e);
  }

  myRequest();
}

それはかなり長いです、しかし、我々が1つのプロジェクトの向こうでしばしばそれをしていないならば、この解決はうまく合います.

パッケージを使う
私たちはさまざまな特性を持つ多くのエンドポイントに接続する必要があります.このような状況では、パッケージの使用を正当化する.
我々のニーズを満たす3つの有名なパッケージがあります:

retry , 汎用リトライ動作

axios-retry , Axiosのための最も人気のあるリトライアドオン

retry-axios , Axiosの2番目の最も人気のあるリトライアドオン

私は使用するretry-axios それは簡単に実装を提供するasync/await パターン.今、その上で読むことを忘れないでくださいdocumentation . また、端末を使用してインストールすることを忘れないでください.

$ npm install retry-axios

これはワーキングコードの例です.

const rax = require('retry-axios');
const axios = require('axios');

rax.attach();
const myRequest = async () => {
  try {
    const myConfig = {
      raxConfig: {
        retry: 5, // number of retry when facing 4xx or 5xx
        noResponseRetries: 5, // number of retry when facing connection error
        onRetryAttempt: err => {
          const cfg = rax.getConfig(err);
          console.log(`Retry attempt #${cfg.currentRetryAttempt}`); // track current trial
        }
      },
      timeout: 50 // don't forget this one
    }
    const req = await axios.get('https://mock.codes/200', myConfig);
    console.log(req.data);
  } catch (error) {
    console.log(error);
  }
}

myRequest();

ループを行う代わりに、基本的にretry-axios Axiosへのオブジェクト.私の部分はリクエストの処理の設定です.それははるかに簡単であり、直接の実装と同じ結果を提供します.
それだ!今、私たちはHTTPリクエストを送信する際にaxiosを信頼性にすることができます.
あなたは有益、有益、または洞察力を見つけるか?
あなたは私のチュートリアルの誤りを見つけますか?
何か質問はありますか.
コメントを自由に👇 そして、知らせてください.