浏览器请求队列机制-请求为什么会阻塞及前端实现并发请求。

1、浏览器请求队列机制-请求为什么会阻塞

超级传送门

2、前端实现并发请求。

需求：实现批量导入功能，后端提供的接口是每次请求创建一道题

分析及考虑：

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

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

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

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

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

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

  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) => {
    // 这边可以做一些全部请求完的操作
  })
}