前端实现并发请求。

 

 

 

需求：列表多页勾选实现批量打印流行病学问卷调查，打印出每一个患者（每一条数据）流行病学调查问卷。

分析：

通常多页勾选实现批量打印，我们的做法都是，将所有的数据统一传给后端的一个协议，但是这个需求比较特殊，用户要求单独一个患者有一份自己单独打印出来的问卷，同后端讨论后，我们为了实现需求，决定实现的方式为，勾选的数据分别去调用后端打印接口，实现批量单独打印。

方案确定后，我们有几个问题需要考虑：

1，如何发送请求，例如页面勾选100条，不可能一下子发送100个请求，因为浏览器有并发请求控制，如果超出并发数，后面的请求将会进入队列等候，我们在等候中的话  有可能会出现浏览器卡死。

2，如果单个继发，100条请求的话，必须要上一个结束再发送下一个请求，要等100次，这样效率也是很慢的。

那么为了解决上面两个问题，我们可以把两种方法综合一下，前端实现并发请求，

先并发假设5条，任意条成功之后，后面的队列加到前面的请求中。

相当于现在有5个水龙头在排队打水，假设第一个水龙头的人打完水，那么后面的一个人就排到第一个水龙头去，那么相当于前面有5个通道可以排队，大大减少了排队压力。

代码如何实现，以下代码为整体逻辑框架：

sendPrint = () => {
  const arrList = Array.from({length:100}, (v,k) => k); // 这边假设生成勾选的100条数据
  const limit = 5; // 并发请求数量

  // 请求后台打印协议
  const asyncMethond = () => {
    // some code
  }

  // 将所有数据定义成一个数组，这个数组的每一个元素返回一个函数，这个函数里面返回一个异步打印强求
  const asyncFunctionsHandles = arrList.map((item) => {
    return (task) => {
      return asyncMethond().then((res) => {
        const next = asyncFunctionsHandles.shift(); // 队列中还有等待，则取出等待的第一个
        if (next) {
          next(); // 执行这个
        } else {
          console.log('全部执行完成')
        }
      })
    }
  });

  const promiseList = [];
  // 实现并发请求
  for (let i = 0; i < limit; i ++) {
    const promiseItemFun = asyncFunctionsHandles.shift();
    promiseList.push(promiseItemFun());
  }

  Promise.all(promiseList).then((res) => {
    // 这边可以做一些全部请求完的操作
  })
}