JavaScript，React-同时发送多个ajax调用

小编典典

JavaScript，React-同时发送多个ajax调用

reactjs

在我的React应用程序中，我有一个参数数组（例如一些ID），这些参数应该用作ajax调用队列的参数。问题是该数组可能包含1000多个项目，如果我仅使用forEach循环递归地进行ajax调用，则浏览器页面最终会在每个请求得到解决之前停止响应。

是否有一种技术/库可以允许以异步方式一次发送5个请求，例如，一次异步发送ajax请求，并且仅在这些请求完成后才继续下一个5？

后续问题：

反应-控制多个Ajax调用

阅读 383

2020-07-22

共1个答案

小编典典

如果您不受es版本的限制并且可以使用es6，则应该考虑异步等待

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用于等待异步调用的确切情况。基本上在异步函数内部，直到解决了等待问题，然后暂停执行。在开始使用承诺和生成器之前，您需要了解它们。

2020-07-22