问题

现有 40 个异步申请须要发送，但因为某些起因，咱们必须将同一时刻并发申请数量管制在 6 个以内，同时还要尽可能疾速的拿到响应后果。应该怎么做？

这个问题与一道经典面试题很相似：

实现一个批量申请函数 multiRequest(urls, maxNum)，要求如下：• 要求最大并发数 maxNum• 每当有一个申请返回，就留下一个空位，能够减少新的申请• 所有申请实现后，后果依照 urls 外面的程序顺次打出

实现

Promise 串行与并行

  • 串行：一个异步申请完了之后在进行下一个申请;
  • 并行：多个异步申请同时进行;

串行

串行是一个 http 申请胜利后再次发动下一个 http 申请；

长处

  • http 申请是有序的；
  • 后一个 http 申请能够拿到前一个申请的返回值；

毛病：

  • 没有利用浏览器同域名申请的最大并发数，同时只会存在一个 http 申请，很大水平上缩短了响应工夫。
const p = () => {  return new Promise((resolve, reject) => {    setTimeout(() => {      console.log("1000");      resolve();    }, 1000);  });};const p1 = () => {  return new Promise((resolve, reject) => {    setTimeout(() => {      console.log("2000");      resolve();    }, 2000);  });};const p2 = function () {  return new Promise((resolve, reject) => {    setTimeout(() => {      console.log("3000");      resolve();    }, 3000);  });};p().then(() => {    return p1();  }).then(() => {    return p2();  }).then(() => {    console.log("end");  });

并行

参数数组中所有 promise 都达到resolve状态，才执行then回调。

毛病：

  • 如果 http 申请达到几万条，promise.all 在霎时收回几万条 http 申请，这样很有可能导致沉积了有数调用栈导致内存溢出。
  • 任意一个 promise 是 reject，就不会进入 then;
const promises = () => {  return [1000, 2000, 3000].map((current) => {    return new Promise((resolve, reject) => {      setTimeout(() => {        console.log(current);        resolve();      }, current);    });  });};Promise.all(promises()).then(() => {  console.log("end");});

Promise.all 并发限度

Promise.all 并发限度指的是：每个时刻并发执行的promise数量是固定的，最终的执行后果还是放弃与原来的Promise.all统一。

栗子: 申请接口雷同，参数不同的申请并发限度

增加最大并发数 maxRequestNum，所有申请实现后再返回。

长处：

  • 利用浏览器同域名申请的最大并发数，疾速拿到所有返回值，缩小响应工夫，不会造成堆栈溢出。

毛病：

  • 所有申请全副完结才会返回，白屏工夫久，用户体验不好。
const multiRequest = (fetch, params = [], maxRequestNum = 6) => {  const paramsLength = params.length;  let result = new Array(paramsLength).fill(false);  let sendCount = 0;  let finishCount = 0;  return new Promise((resolve) => {    while (sendCount < maxRequestNum && sendCount < paramsLength) {      next();    }    function handleResult(current, res) {      finishCount ++;      result[current] = res;      if (sendCount < paramsLength) {        next();      }      if (finishCount >= paramsLength) {        resolve(result);      }    }    function next() {      let current = sendCount++;      const param = params[current];      fetch(param).then((res) => {        handleResult(current, res)      }).catch((err) => {        handleResult(current, err)      });    }  });}