背景は次のとおりです。実際の開発では、ネットワークの問題や大量のクエリが発生し、前のリクエストが完了する前にユーザーが次のリクエストを開始する場合があります。 何が起こるでしょうか?ただし、同じリクエストを複数回サーバーに送信すると、サーバーに負担がかかることは間違いないため、サーバーのクエリ速度を最適化した上で、ユーザーのネットワーク状況が悪い場合は、フロントエンドでリクエストを制限する必要があります。 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL における「:=」と「=」の違いの簡単な分析
>>: Docker-compose を使用して ELK クラスターを構築する方法
バックエンド プログラマーとして、フロントエンドのものをいじらなければならないこともあります。そこで...
CSSを導入する3つの方法1. インラインスタイル利点: 書きやすく、重みがある 欠点: 構造とスタ...
1. flex-grow、flex-shrink、flex-basis プロパティflex-grow...
序文MySQL クエリは select コマンドを使用し、limit および offset パラメー...
タブバー: 異なるタブをクリックすると異なるコンテンツが表示され、クリックしたタブのスタイルが変更さ...
目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...
コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...
目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...
目次1. すべて選択2. 商品の数量を増やすか減らす3. 商品の小計を変更する4. 合計と合計額を計...
<br />前の記事:Webデザインチュートリアル(6):デザインへの情熱を持ち続けまし...
スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...
会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...
Docker を起動したら、利用できるオプションを見てみましょう。 公式のものがある場合は、もちろ...
最近、あるプロジェクトに取り組んでいたとき、ページに透かし効果を追加するように依頼されました。さっそ...
MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...