js は axios 制限リクエストキューを実装します

背景は次のとおりです。

実際の開発では、ネットワークの問題や大量のクエリが発生し、前のリクエストが完了する前にユーザーが次のリクエストを開始する場合があります。

何が起こるでしょうか?

ただし、同じリクエストを複数回サーバーに送信すると、サーバーに負担がかかることは間違いないため、サーバーのクエリ速度を最適化した上で、ユーザーのネットワーク状況が悪い場合は、フロントエンドでリクエストを制限する必要があります。

axios に付属する cancelToken は、この要件を満たすのに役立ち、リクエスト情報を戻り値とするコールバック関数である既製の API axios.CancelToken を提供します。キャンセルする必要があるときに、このコールバック関数を実行できます。具体的な実装は以下のとおりです。

const サービス = axios.create({});
const 保留マップ = 新しい Map();
const addPendding = (config) => {
 config.cancelToken = config.cancelToken || 新しい axios.CancelToken(cancel => {
  （！penddingMap.has(config.url)）の場合{
   保留中のマップを設定します(config.url,cancel);
  }
 })
}

const removePendding = (config) => {
 （保留中のマップがconfig.urlを持っている場合）{
  キャンセル = penddingMap.get(config.url);
    キャンセル(config.url);
    保留中のマップを削除します(config.url)
 }
}

各リクエスト情報を格納するために、マップがローカルで維持されます。addPendding では、まず cancelToken があるかどうかが判断されます。ある場合は、cancelToken を再作成する必要はありません。 removePenddingでは、リクエスト情報がMap内にあるかどうかを判定します。リクエストがMap内に存在する場合は、cancel関数が実行され、Map内のリクエストが削除されます。

インターセプターにおける具体的な用途:

service.interceptors.request.use(config => {
 removePending(config) // マップ内に存在する場合は、まずリクエストをキャンセルします。addPending(config) // リクエストをマップに追加します。return config
})

service.interceptors.response.use(レスポンス => {
 ``` // コード
  応答データを返す
}, エラー => {
 // キャンセル要求をキャプチャし、if(error instanceof Cancel){ をスローします。
    error.message = '前のリクエストはまだ終了していません。お待ちください~';
    メッセージ.エラー(エラー.メッセージ);
    Promise.reject(error.response) を返します。 
  // ここでの throw に注意してください。リクエスト時に try-catch を呼び出してそれをキャプチャします})
）

ここで傍受が成功すると、トラフィック量の多い複数のリクエストを制限できます。

これは単なる例です。ボタンのロジックを判断することで、ユーザーがリクエストを開始するかどうかを制御することもできます。

これで、js による axios 制限リクエストキューの実装に関するこの記事は終了です。js axios 制限リクエストキューの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: