如果要发100 个请求，怎么用 Promise 去控制并发

前端需要发送100 个请求，怎么控制并发

首先执行能执行的并发任务，每个任务执行完毕后，执行下一个要执行的任务

思路如下：

1. 循环去启动规定数量的任务
2. 取出任务并执行，并更新当前的并发数，当前执行完成后执行下一个任务。
3. 执行下一个任务的函数中判断是否还有任务，有就继续执行任务，没有任务并且当前执行的并发数为0则触发最终的回调函数。

代码如下

1. 模拟请求队列

// 模拟请求 
function request(url, time = 1) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('请求结束：' + url);
      if (Math.random() > 0.5) {
        resolve('成功')
      } else {
        reject('错误;')
      }
    }, time * 1e3)
  })
}

// 所有请求队列
const sendArr = [1, 2, 3, 4, 5, 6, 7, 8, 9].map((val, i) => {
  return () => request(val);
});

2. 执行函数

const sendRequest = (list, limit, callback) => {

  // list 浅拷贝
  let promiseAll = list.slice();
  // 当前规定同时执行的数量
  let curNum = Math.min(list.length, limit);
  // 当前还在执行的数量
  let curCount = 0;

  // 开始执行函数
  const startRun = () => {
    let i = 0;

    while (i < curNum) {
      i++
      runTask();
    }
  }
  // 执行promise
  const runTask = () => {
    let task = promiseAll.shift();
    if (!task) return;
    curCount++;
    task().then(res => {})
      .catch(err => {})
      .finally(() => {
        curCount--;
        // 开始下一个
        runNext();
      })
  }
  // 执行剩下的promise
  const runNext = () => {
    if (promiseAll.length > 0 && curCount < curNum) {
      runTask();
    } else {
      // 队列为空，当前请求数为空 执行回调
      if (promiseAll.length == 0 && curCount === 0) {
        typeof callback === 'function' && callback();
      }

    }
  }
  // 开始
  startRun();
}

sendRequest(sendArr, 5, () => {
  console.log('所有请求结束')
})

// 执行结果
/**
 * 请求结束：1
    请求结束：2
    请求结束：3
    请求结束：4
    请求结束：5
    请求结束：6
    请求结束：7
    请求结束：8
    请求结束：9
    所有请求结束
 */