JavaScriptはPromiseを使用して複数の繰り返しリクエストを処理します

JavaScriptはPromiseを使用して複数の繰り返しリクエストを処理します

1. なぜこの記事を書くのですか?

重複リクエストの処理に関する記事をたくさん読んだことがあるでしょう。そのほとんどは、応答が返される前に重複リクエストを返す方法と、スロットリング/アンチシェイクを使用して頻繁なユーザー操作を間接的に回避する方法の 2 つのバージョンに分かれています。最近使用してみると、この 2 つのバージョンには、いくつかのシナリオではまだ制限があることがわかりました。

2. 問題のシナリオ

図に示すように、名刺コンポーネントは h5 ページの上部と下部に表示されます。これらの名刺の情報は、インターフェースを通じて取得されます。このコンポーネントが現在のページで初期化されると、2 つの繰り返しリクエストが発生します。

この時点で、いくつかの選択肢に直面することになります。

1. 重複したリクエストを処理しないでください。

  • デメリット1: 不必要なリソースの浪費を引き起こし、サーバーの負荷が増大する
  • デメリット 2: ブラウザの同時 HTTP リクエスト数には制限があります。ページの最初の画面に対するリクエストが多く、階層的な読み込みが行われていない場合、リクエストのブロックが発生しやすく、ユーザーがそもそもメインコンテンツを見る能力に影響を与えます。

2. 重複したリクエストを直接返します。これはいくつかの記事でも実践されていますが、このアプローチには、後続の繰り返しリクエストが無効なリクエストであると直接判断されるという制限があります。

  • 無効なリクエストのシナリオ: ユーザーがクエリまたは保存のボタンをクリックします。リクエスト結果が返される前は、基本的に後続のクリックは無効なリクエストと見なされ、ブロックされる必要があります。もちろん、この問題はボタンにスロットル/手ぶれ防止機能を追加することで回避できます。
  • 現在のシナリオには適用できない理由: 両方の名刺コンポーネントは、レンダリングするためにデータを必要とします。2 回目の繰り返しリクエストが返された場合、いずれかのコンポーネントの名刺にはデータが含まれません。

3. コンポーネントからリクエストを抽出し、親ビジネス ページに配置して、それをコンポーネントに props として渡します。

  • 利点: 2 つのコンポーネントが 1 つのリクエストでデータのコピーを共有できます。
  • 制限事項: 単一のビジネス ページにのみ適用されます。実際、このコンポーネントは多くのビジネス ページで使用されています。要求された関数がパブリック API に抽出された場合でも、各ビジネス ページが初期化されるときに 1 回呼び出され、その後コンポーネントに props として渡される必要があります。

3. 解決策

コアアイデア

  • handleListの配列を初期化する
  • リクエストを送信する前に、入力パラメータが同じかどうかに基づいて、重複リクエストかどうかを判断します。
    • 繰り返しのないリクエスト: リクエストパラメータとリクエストによって返されたPromiseを配列に追加します。
    • リクエストを繰り返す: findを使用して対応するPromiseを直接返す
  • リクエストが完了したら、handleList に以前追加されたリクエスト情報を削除します。

このソリューションは、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)

出力

重複したリクエストがある場合は直接戻ります 重複したリクエストがある場合は直接戻ります 最初のリクエストの結果は成功で、タイムスタンプは次のようになります: 1621650375540
ハンドルリスト:[
{
URL: '/ajax/sameUrl',
リクエストオブジェクト: { 名前: 'waldon' },
ハンドル: Promise { 'リクエストは成功しました、タイムスタンプ: 1621650375540' }
}
]
リクエストを繰り返すと、リクエストは成功します。タイムスタンプは 1621650375540 です。
ハンドルリスト:[
{
URL: '/ajax/sameUrl',
リクエストオブジェクト: { 名前: 'waldon' },
ハンドル: Promise { 'リクエストは成功しました、タイムスタンプ: 1621650375540' }
}
]
リクエストを繰り返すと、リクエストは成功します。タイムスタンプは 1621650375540 です。
ハンドルリスト:[
{
URL: '/ajax/sameUrl',
リクエストオブジェクト: { 名前: 'waldon' },
ハンドル: Promise { 'リクエストは成功しました、タイムスタンプ: 1621650375540' }
}
]
リクエストが完了した後のhandleList: []

コードアドレス codepen

https://codepen.io/waldonUB/pen/ZEeeONM

注意すべき点

  • 応答にデータを追加または削除しないでください。繰り返しのリクエストによって返される Promise 内のオブジェクト参照アドレスは同じであるため、変更するとデータ汚染が発生します。特別な場合には、応答結果を浅くコピーして処理したり、対応するアサーションを追加したりできます。
  • 繰り返しのリクエストを処理するときは、他のユーザーが間違いを犯さないように、ログにプロンプ​​トを表示し、コンポーネントに理由と使用シナリオを注釈付けするのが最適です。
  • 極端なケースでのリクエストの失敗に対処できるように準備し、リクエスト情報をクリアして削除するための有効な時間を設定し、クロージャに蓄積された無駄なリクエスト情報が多すぎることによるメモリ リークを回避します。

JavaScript で promise を使用して複数の繰り返しリクエストを処理する方法については、これで終わりです。js promise の複数の繰り返しリクエストの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript 非同期プログラミングにおける Promise の初期の使用法の詳細な説明
  • node.js Promiseオブジェクトの使用例の分析
  • WeChatアプレットJSスクリプトでPromiseを使用して関数処理を最適化する方法の詳細な説明
  • jsはPromiseを使用してシンプルなAjaxキャッシュを実装します
  • JS で Promise を使用して信号機のサンプル コードを実装する (デモ)
  • JavaScript における Promise の使用に関する詳細な説明
  • JavaScript での Promise の使用法の詳細な説明

<<:  Linux でディスクをマウントし、起動時に自動的にマウントするように設定する方法

>>:  Mysql テーブルで利用可能な最小 ID 値を照会する方法

推薦する

CentOS 7 ブートカーネルの切り替えとブートモードの切り替えの説明

Centos7 スイッチブートカーネル注: 必要に応じて、最初にyum update -yを実行して...

1 つの記事で Nginx の現在の制限を理解する (簡単な実装)

Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...

MySQL インデックス カバレッジの例の分析

この記事では、MySQL インデックス カバレッジについて例を挙げて説明します。ご参考までに、詳細は...

JSタイマーを使用して要素を移動する

JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の...

MySQL の最適化: InnoDB の最適化

勉強の計画は簡単に中断され、継続するのが困難です。先日、社内で事業の方向性を調整するための会議があり...

同期スクロールを実現するための複数のテーブル要素のサンプルコード

Element UIは、複数のテーブルを同時に水平および垂直にスクロールすることを実装します。 コー...

MySQLでテーブルインデックスを構築する方法

目次複数の種類のフィルタリングをサポート複数の範囲のクエリを避ける並べ替えを最適化するインデックスの...

echartsマップカルーセルハイライトを解決するための記事

目次序文やることリストやるだけ地図を準備するインスタンスをバックアップ用に保存するタイマーカルーセル...

MySQLレジストリをクリアする方法

具体的な方法: 1. [ win+r ] を押して実行ウィンドウを開き、「regedit」と入力して...

MySQL ユーザーのホスト属性を素早く変更する方法

MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...

JavaScript での実行コンテキストと実行スタックの例の説明

JavaScript - 原則シリーズ日常の開発では、既存のプロジェクトを引き継ぐときは常に、まず他...

Windows システムに MySQL を素早くインストールして展開する方法 (グリーンの無料インストール バージョン)

まずは緑色の無料インストール版のMySQLをダウンロードします。任意のフォルダに入れて構いません。今...

Linux コマンドラインのワイルドカードとエスケープ文字の実装

ハードディスクのファイル属性のバッチ表示など、特定の種類のファイルに対してバッチ操作を実行する場合、...

Dockerが正常に起動しない原因と解決策を詳しく解説

1. Docker 起動時の異常なパフォーマンス: 1. ステータスが繰り返し再起動している場合は、...

Linux tac コマンドの実装例

1. コマンドの紹介tac (cat の逆順) コマンドは、ファイルの内容を行単位で逆順に出力します...