javascript-React-控制对服务器的AJAX调用

2019-10-25 17:35:23 阅读：228 来源： 互联网

标签：async-js reactjs ajax promise javascript

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

是否有一个库,可以允许发送ajax请求,例如,一次异步维护5个请求.

这是我现在使用的代码.

async function makeBatchCalls(arrayIds, length) 
{
     //convert arrayIds to two dimensional arrays of given length [[1,2,3,4,5], [6,7,8,9,10] ....]
     let test = arrayIds.reduce(
             (rows, key, index) => (index % length == 0 
                                    ? rows.push([key]) 
                                    : rows[rows.length-1].push(key)) && rows, []);

    let Batchresults = [];

    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],5)

此代码的问题是它等待5个调用完成,然后发送另一批5个调用.这不是对网络的有效利用.我想要的是在任何时间点应该有5个请求.

是否可以对上述代码本身进行调整以满足需求？

解决方法:

这是一个有趣的问题.我可以想到的一种方法是在第一批中的任何一个完成后立即进行第6个ajax调用.这样,随时都会有5个ajax请求正在处理中.我试图实现类似的东西.尽管我的解决方案不进行Ajax调用,但是我猜您可以更改流程函数以进行Ajax调用并返回Promise.

JS Bin

/** 
  This function processes the jobs in batches, once a job is finished in batch it   then processes the next job. This can be used to make network calls.  
*/
function processBatch(queue, batchSize, processJob) {
  // remove a batch of items from the queue
  const items = queue.splice(0, batchSize);
  let count = items.length;

  // no more items?
  if (!count) {
    return Promise.resolve();
  }

  return new Promise((resolve, reject) => {
    return items.forEach((item, i) => {
      return processJob(item).then(result => {
        return processBatch(queue, 1, processJob)
          .then(_ => --count || resolve());
      });
    });
  })
}

// create queue
var queue = [];
for (var i = 1; i <= 20; i++) {
  queue.push(i);
}

// a per-item action
function process(item) {
  console.log('starting ' + item + '...');
  return new Promise((resolve, reject) => {
    // (simulating ajax)
    return setTimeout(function() {
      console.log('completed ' + item + '!');
      resolve();
    }, Math.random() * 1000);
  });
}

// start processing queue!
processBatch(queue, 5, process)
  .then(result => console.log("All jobs processed"));

我只是尝试使用Promise实现泛型函数.您可以尝试使用ajax调用运行相同的代码.我想知道这种解决方案如何为您工作.

如您所见,在成功执行每个作业之后,我递归调用processBatch函数,并且后续的batchSize硬编码为1,但是可以更改和参数化.另外,此功能仅在满意的情况下起作用,因为它没有考虑拒绝的承诺.

标签：async-js,reactjs,ajax,promise,javascript
来源： https://codeday.me/bug/20191025/1930375.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-React-控制对服务器的AJAX调用