关于前端:优化-http-并发请求

问题

现有 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)
      });
    }
  });
}