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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript で Promise を使用して同時リクエスト数を制御する方法
  • リクエスト数を制限するために Ajax 同時リクエストを実装するために js を使用するサンプル コード
  • gin 投稿リクエストのJSON本文を取得する
  • JSはリクエストディスパッチャーを実装する
  • PHPはChromeフォームのリクエストデータをインターフェースで使用されるJSONデータに変換する機能を実装します。
  • JavaScript 中断要求に対するいくつかの解決策の詳細な説明

<<:  MySQL における「:=」と「=」の違いの簡単な分析

>>:  Docker-compose を使用して ELK クラスターを構築する方法

推薦する

Docker パッケージング ノード プロジェクトのプロセスの説明

バックエンド プログラマーとして、フロントエンドのものをいじらなければならないこともあります。そこで...

CSS スタイルの導入方法とその長所と短所の紹介

CSSを導入する3つの方法1. インラインスタイル利点: 書きやすく、重みがある 欠点: 構造とスタ...

flex-grow、flex-shrink、flex-basis、9グリッドレイアウトを理解する

1. flex-grow、flex-shrink、flex-basis プロパティflex-grow...

MySQLクエリのパフォーマンスに影響を与える大きなオフセットの理由と最適化の詳細な説明

序文MySQL クエリは select コマンドを使用し、limit および offset パラメー...

タブバーの切り替え効果を実現するJavaScript

タブバー: 異なるタブをクリックすると異なるコンテンツが表示され、クリックしたタブのスタイルが変更さ...

JavaScript は詳細なコードで星座クエリ機能を実装します

目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...

JavaScript でサウンド効果付きの花火効果を実装する

コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...

Vueは単一ファイルコンポーネントの完全なプロセス記録を実装します

目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

jQueryはすべてのショッピングカート機能を実装します

目次1. すべて選択2. 商品の数量を増やすか減らす3. 商品の小計を変更する4. 合計と合計額を計...

Webデザインチュートリアル(7):Webデザインの効率化

<br />前の記事:Webデザインチュートリアル(6):デザインへの情熱を持ち続けまし...

W3C チュートリアル (7): W3C XSL アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...

CSS を使用して複数の方法で下揃えを実装するサンプル コード

会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...

Docker で Zookeeper をインストールする (スタンドアロンおよびクラスター)

Docker を起動したら、利用できるオプションを見てみましょう。 公式のものがある場合は、もちろ...

Vueはページに透かし効果を追加する機能を実装します

最近、あるプロジェクトに取り組んでいたとき、ページに透かし効果を追加するように依頼されました。さっそ...

少なくともn日間連続してログインしているユーザーに対するSQLクエリ

MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...