反应-控制多个Ajax调用

小编典典

反应-控制多个Ajax调用

reactjs

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

在服务器端，单击批量操作后，我有一个脚本要针对每个选定的行执行（为了简化问题，我在下面的示例中为每个选定的行调用“
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
}

上面的解决方案很好，但是有一个问题，

从网格中选择5条以上的行，然后点击批量操作按钮，
再次选择5行以上，然后点击批量操作按钮，
现在，我看到一次有10个请求处于活动状态。

我该如何限制呢？

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

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

阅读 248

2020-07-22

共1个答案

小编典典

该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);
    }
}

2020-07-22