1. なぜこの記事を書くのですか?重複リクエストの処理に関する記事をたくさん読んだことがあるでしょう。そのほとんどは、応答が返される前に重複リクエストを返す方法と、スロットリング/アンチシェイクを使用して頻繁なユーザー操作を間接的に回避する方法の 2 つのバージョンに分かれています。最近使用してみると、この 2 つのバージョンには、いくつかのシナリオではまだ制限があることがわかりました。 2. 問題のシナリオ図に示すように、名刺コンポーネントは h5 ページの上部と下部に表示されます。これらの名刺の情報は、インターフェースを通じて取得されます。このコンポーネントが現在のページで初期化されると、2 つの繰り返しリクエストが発生します。 この時点で、いくつかの選択肢に直面することになります。 1. 重複したリクエストを処理しないでください。
2. 重複したリクエストを直接返します。これはいくつかの記事でも実践されていますが、このアプローチには、後続の繰り返しリクエストが無効なリクエストであると直接判断されるという制限があります。
3. コンポーネントからリクエストを抽出し、親ビジネス ページに配置して、それをコンポーネントに props として渡します。
3. 解決策コアアイデア
このソリューションは、axios、jq、fetch、またはアプレット リクエストのいずれを使用する場合でも、何にでも使用できます。実装の原理は次のとおりです。使用するときは、対応するリクエスト時間に対応するコードを配置するだけです。 コードサンプル let handleList = [] // リクエストリスト/** * リクエストをシミュレート * @author waldon * @日付 2020/6/9 */ 定数httpRequest = () => { 新しいPromise((resolve) => {を返す タイムアウトを設定する(() => { 解決(`リクエストは成功しました、タイムスタンプ: ${new Date().getTime()}`) }, 1000) }) } /** * リクエスト関連の処理 * @author waldon * @日付 2020/6/9 * @param {String} URL - * @param {Object} requestObj - リクエストパラメータ * @returns {Promise} - リクエストプロミス */ 関数 requestTest(url, requestObj = {}) { // 入力パラメータは一般的に複雑な型を含まないため、シリアル化比較には JSON.stringify で十分です。 // 制限の 1 つは、入力パラメータの順序が変わるため、判定に影響が出ることです。ただし、この特別な変更は、繰り返しのリクエストでは通常発生しません。 // このような要求がある場合は、他の再帰比較 API に切り替えてください。Lodash にも同様の API があります。 定数sameHandle = handleList.find( (item) => item.url === url && JSON.stringify(item.requestObj) === JSON.stringify(requestObj) ) if (同じハンドル) { // 同じリクエストに遭遇した場合、前のリクエストのプロミスが直接返されます console.log(`重複したリクエストがあります。直接返します`) sameHandle.handleを返す } const ハンドル = 新しい Promise((resolve, 拒否) => { httpリクエスト() .then((res) => { 解決する }) .catch((エラー) => { 拒否(エラー) }) .finally(() => { // リクエストの結果に関係なく、対応するリクエストを削除する必要があります handleList = handleList.filter( (アイテム) => item.url !== url && JSON.stringify(item.requestObj) !== JSON.stringify(requestObj) ) }) }) handleList.push({ url, requestObj, handle }) リターンハンドル } // ******************************** ゴージャスな分割線を使い始めています ******************************** 定数パラメータ = { 名前: 'ウォルドン' } リクエストテスト('/ajax/sameUrl', パラメータ).then((res) => { console.log(`最初のリクエスト結果`, res) console.log(`ハンドルリスト:`, ハンドルリスト) }) リクエストテスト('/ajax/sameUrl', パラメータ).then((res) => { console.log(`繰り返しリクエスト結果`, res) console.log(`handleList:`, handleList) // リクエストリストには常に 1 つのリクエストのみが含まれます setTimeout(() => { console.log(`リクエスト完了後のhandleList:`, handleList) // リクエストが完了すると、handleListに対応するリクエストがクリアされます}, 100) }) タイムアウトを設定する(() => { // インターフェースを 1 秒後に返すように設定したので、リクエストを 500 ミリ秒遅らせます。同じ結果が得られるはずです。requestTest('/ajax/sameUrl', params).then((res) => { console.log(`繰り返しリクエスト結果`, res) console.log(`ハンドルリスト:`, ハンドルリスト) }) }, 500) 出力
コードアドレス codepen https://codepen.io/waldonUB/pen/ZEeeONM 注意すべき点
JavaScript で promise を使用して複数の繰り返しリクエストを処理する方法については、これで終わりです。js promise の複数の繰り返しリクエストの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux でディスクをマウントし、起動時に自動的にマウントするように設定する方法
>>: Mysql テーブルで利用可能な最小 ID 値を照会する方法
Centos7 スイッチブートカーネル注: 必要に応じて、最初にyum update -yを実行して...
Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...
この記事では、MySQL インデックス カバレッジについて例を挙げて説明します。ご参考までに、詳細は...
JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の...
勉強の計画は簡単に中断され、継続するのが困難です。先日、社内で事業の方向性を調整するための会議があり...
Element UIは、複数のテーブルを同時に水平および垂直にスクロールすることを実装します。 コー...
目次複数の種類のフィルタリングをサポート複数の範囲のクエリを避ける並べ替えを最適化するインデックスの...
目次序文やることリストやるだけ地図を準備するインスタンスをバックアップ用に保存するタイマーカルーセル...
具体的な方法: 1. [ win+r ] を押して実行ウィンドウを開き、「regedit」と入力して...
MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...
JavaScript - 原則シリーズ日常の開発では、既存のプロジェクトを引き継ぐときは常に、まず他...
まずは緑色の無料インストール版のMySQLをダウンロードします。任意のフォルダに入れて構いません。今...
ハードディスクのファイル属性のバッチ表示など、特定の種類のファイルに対してバッチ操作を実行する場合、...
1. Docker 起動時の異常なパフォーマンス: 1. ステータスが繰り返し再起動している場合は、...
1. コマンドの紹介tac (cat の逆順) コマンドは、ファイルの内容を行単位で逆順に出力します...