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 値を照会する方法
この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
この記事では、ページ印刷の自動ページングを実現するためのVueの具体的なコードを例として紹介します。...
目次1. 遅延読み込みとは何ですか? 2. 遅延読み込みを実装する🌄: 2.1 最初の方法: 2.2...
1. CSSスコープの使用(スタイル分割) Vue では、CSS スタイルを現在のコンポーネントでの...
背景 - オンラインアラートオンライン サーバーがアラームを発し、ディスク使用率 disk.util...
これがないと、ブラウザはページをレンダリングするときに Quirks モードを使用することがわかって...
Bashで配列を定義するbash スクリプトで新しい配列を作成する方法は 2 つあります。 1 つ目...
序文最近、多くの新しい同僚がこの質問をしてきました。特に、homebrew を通じて自動的にインスト...
序文最近、仕事でAES_ENCRYPT()関数を使用してプレーンテキストを暗号化し、MySQL に保...
特記事項:この記事は、Chris Spooner の英語記事「Web デザイン用の Retina グ...
この記事の例では、テーブルドラッグオプションを実装するためのjsの具体的なコードを参考までに共有して...
ハイパーリンク a タグはリンク ポイントを表し、英語の単語「anchor」の略語です。その機能は、...
1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...
この記事では、トップに戻るボタンを実装するためのJavaScriptの具体的なコードを参考までに紹介...
目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...