JavaScript、React-複数の同時ajax呼び出しを送信する

Lokesh Agrawal

私のReactアプリケーションには、ajax呼び出しキューのパラメーターとして使用する必要があるパラメーターの配列(たとえば、いくつかのID)があります。問題は、配列に1000を超えるアイテムが含まれている可能性があり、forEachループを使用してajax呼び出しを再帰的に行うと、各リクエストが解決される前にブラウザページが最終的に応答を停止することです。

たとえば、一度に5つのリクエストで非同期にajaxリクエストを送信し、それらが終了した場合にのみ次の5つに進むことができるテクニック/ライブラリはありますか?

フォローアップの質問:

React-複数のAjax呼び出しを制御する

React-サーバーに対して行われたAJAX呼び出しの制御

シャムバブ

esバージョンに制約されず、es6を使用できる場合は、asyncawaitを調べる必要があります。

async function makeBatchCalls(arrayIds, length) {
    let test = arrayIds.reduce(
        (rows, key, index) => (index % length == 0 
            ? rows.push([key]) 
            : rows[rows.length - 1].push(key)
        ) && rows, 
        []
    );

    let Batchresults = [];

    //convert them to two dimensionl arrays of given length [[1,2,3,4,5], [6,7,8,9,10]]
    for (calls of test) {
       Batchresults.push(
           await Promise.all(
               calls.map((call) => fetch(`https://jsonplaceholder.typicode.com/posts/${call}`))
           )
       );
    }

    return Promise.all(Batchresults); //wait for all batch calls to finish
}

makeBatchCalls([1,2,3,4,5,6,7,8,9,10,12,12,13,14,15,16,17,18,19,20],3)

async / awaitは、非同期呼び出しを待機する正確なシナリオを対象としています。基本的に、awaitが解決されるまで、非同期関数内で実行が中断されます。使用を開始する前に、Promiseとジェネレーターを理解する必要があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

React-複数のAjax呼び出しを制御する

分類Dev

react-nativeから複数のAPI呼び出しを送信する

分類Dev

Javascriptを使用して複数の指標を使用してAPI呼び出しをGoogleAnalyticsAPIに送信する方法

分類Dev

javascript:同じ関数を同時に呼び出す?

分類Dev

Reactの複数のdivで同じ関数を呼び出す方法は?

分類Dev

同じ引数JavaScriptを使用して関数を複数回呼び出す

分類Dev

JavaScript:複数のREST呼び出しを次々に実行する正しい方法

分類Dev

送信時に関数を呼び出しているだけの場合、フォームタグを React で使用する必要がありますか?

分類Dev

WebViewにJavaScript関数を追加し、後でreCAPTCHAの送信時にHTMLから呼び出す方法

分類Dev

Javascript / AngularJSで同時呼び出しを同期することは可能ですか?

分類Dev

ユーザーが複数のタブで同じ JavaScript 呼び出しを実行しないようにする最善の方法は何ですか?

分類Dev

JavaScript関数の複数呼び出し

分類Dev

Javascript関数は、2回目の呼び出し時に、古い呼び出しを繰り返します

分類Dev

C#から複数の引数を渡してJavaScriptを呼び出す方法

分類Dev

関数呼び出し時のJavascript

分類Dev

JavaScriptの関数呼び出しで投稿フォーム送信をシミュレートする

分類Dev

Reactの子で親関数呼び出しを処理する

分類Dev

javascriptで変数が「いいえ」の場合に終了するajax呼び出しをループします

分類Dev

JavaScriptで関数の呼び出しと変数の変更を同時に行う

分類Dev

JavaScript変数へのAJAX呼び出しから結果を取得します

分類Dev

javascript関数の呼び出しと参照を理解する

分類Dev

JavaScriptの呼び出し関数を理解する

分類Dev

JavaScriptで準備完了関数の呼び出しを作成する

分類Dev

複数の関数の1つを呼び出す方法-JavaScript?

分類Dev

複数のAPIURLを呼び出し、同時に呼び出す

分類Dev

関数呼び出し時にJavascriptファイルをロードする

分類Dev

react-native-webviewhtmlから特定のjavascript関数を呼び出す

分類Dev

JSFはAjaxの更新後にjavascript関数を呼び出します

分類Dev

複数のJavascript関数をonSubmitで呼び出す

Related 関連記事

  1. 1

    React-複数のAjax呼び出しを制御する

  2. 2

    react-nativeから複数のAPI呼び出しを送信する

  3. 3

    Javascriptを使用して複数の指標を使用してAPI呼び出しをGoogleAnalyticsAPIに送信する方法

  4. 4

    javascript:同じ関数を同時に呼び出す?

  5. 5

    Reactの複数のdivで同じ関数を呼び出す方法は?

  6. 6

    同じ引数JavaScriptを使用して関数を複数回呼び出す

  7. 7

    JavaScript:複数のREST呼び出しを次々に実行する正しい方法

  8. 8

    送信時に関数を呼び出しているだけの場合、フォームタグを React で使用する必要がありますか?

  9. 9

    WebViewにJavaScript関数を追加し、後でreCAPTCHAの送信時にHTMLから呼び出す方法

  10. 10

    Javascript / AngularJSで同時呼び出しを同期することは可能ですか?

  11. 11

    ユーザーが複数のタブで同じ JavaScript 呼び出しを実行しないようにする最善の方法は何ですか?

  12. 12

    JavaScript関数の複数呼び出し

  13. 13

    Javascript関数は、2回目の呼び出し時に、古い呼び出しを繰り返します

  14. 14

    C#から複数の引数を渡してJavaScriptを呼び出す方法

  15. 15

    関数呼び出し時のJavascript

  16. 16

    JavaScriptの関数呼び出しで投稿フォーム送信をシミュレートする

  17. 17

    Reactの子で親関数呼び出しを処理する

  18. 18

    javascriptで変数が「いいえ」の場合に終了するajax呼び出しをループします

  19. 19

    JavaScriptで関数の呼び出しと変数の変更を同時に行う

  20. 20

    JavaScript変数へのAJAX呼び出しから結果を取得します

  21. 21

    javascript関数の呼び出しと参照を理解する

  22. 22

    JavaScriptの呼び出し関数を理解する

  23. 23

    JavaScriptで準備完了関数の呼び出しを作成する

  24. 24

    複数の関数の1つを呼び出す方法-JavaScript?

  25. 25

    複数のAPIURLを呼び出し、同時に呼び出す

  26. 26

    関数呼び出し時にJavascriptファイルをロードする

  27. 27

    react-native-webviewhtmlから特定のjavascript関数を呼び出す

  28. 28

    JSFはAjaxの更新後にjavascript関数を呼び出します

  29. 29

    複数のJavascript関数をonSubmitで呼び出す

ホットタグ

アーカイブ