React - 控制多个 Ajax 调用

在我的反应应用程序中，我有一个网格。用户可以一次选择多个网格行，然后单击按钮对所选网格行执行批量操作。

在服务器端，我有一个脚本，我想在单击批量操作时为每个选定行执行该脚本（为了使问题简单，我在下面的示例中为每个选定行调用“jsonplaceholder.typicode.com”）按钮。单击批量操作按钮时，我会在操作创建器中获取 selectedRows，在其中迭代 selectedRows 并对每个选定行进行 ajax 调用。

由于 selectedRows 可能包含超过 1000 个项目，并且如果我只是使用 forEach 循环迭代地进行 ajax 调用，则浏览器页面最终可能会在每个请求得到解决之前停止响应。因此，我使用下面的解决方案，以 5 个为一组发送请求，然后等待这 5 个请求得到解决。

// Action creator, selectedRows is an array.
function onGridRowsSelection(selectedRows) {
   makeBatchCalls(selectedRows,5)
}

async function makeBatchCalls(selectedRows, 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
}

上面的解决方案工作正常，但有一个问题，

1. 从网格中选择 5 行以上，然后单击批量操作按钮，
2. 再次选择超过 5 行并单击批量操作按钮，
3. 现在我一次看到 10 个活跃请求。

我怎样才能限制这个？

此处提到的问题的后续问题在React - 智能地控制异步调用，在复杂的应用程序中没有任何副作用

这个问题是以下问题的后续问题JavaScript、React - 发送多个同时的 ajax 调用

The async模块有一个功能：async.queue。首先定义一个任务函数。然后你给它一个任务 - 在你的例子中，是一个行数组和你希望它执行的操作。该任务将运行，或者如果已有任务正在进行中，则将其添加到队列中。当一个任务完成后，将从队列中取出下一个任务。

更好的是，您可以只为一行定义任务函数，并将队列的并发度设置为 5。当用户单击该按钮时，您可以向队列添加大量任务，每选择一行一个任务。 5 个任务将立即开始运行，其余任务将排队。这可能比您想要做的更好，因为这样用户可以启动 2 个任务，然后立即启动另外 3 个任务，并且它们都将并行运行。

尝试以下代码：

const async = require('async');    // or whatever mechanism you're using for module management.

const queue = async.queue((row, callback) => {
    fetch(`https://jsonplaceholder.typicode.com/posts/${call}`)
        .then(callback, callback);
}, 5);

function onGridRowsSelection(selectedRows) {
    for (let call of selectedRows) {
        queue.push(call);
    }
}