vue axios封装并发请求

场景：有时候进入某些页面时会同时请求很多个业务接口， 如果一个一个的发送请求，会产生很多冗余，所以封装了一个方法（参考渡一教育袁老师课程）。

此方法会根据请求顺序，返回一个返回结果数组，异常的结果会返回null

可以优化的地方，请求方式，以及传参。我这里是根据自身业务封装的

import request from "./request";
/**
 * maxNum:最大请求数
 * @param {string[]} urls 待请求的url数组
 * @param {number} maxNum 最大并发数
 */
export function concurRequest(urls, maxNum) {
  return new Promise((resolve) => {
    if (urls.length === 0) {
      resolve([]);
    }
    let index = 0; // 下一次请求对应的url地址下标
    let count = 0; // 请求完成的数量
    const result = [];
    async function sendRequest() {
      const i = index;
      const url = urls[index];
      index++;
      try {
        const resp = await request.post(url);
        result[i] = resp;
      } catch (error) {
        result[i] = error;
      } finally {
        count++;
        if (count === urls.length) {
          resolve(result);
        }
        if (index < urls.length) {
          sendRequest();
        }
      }
    }
    for (let i = 0; i < Math.min(urls.length, maxNum); i++) {
      sendRequest();
    }
  });
}

使用

async getPageData() {
      let proxyName = "api";
      let urls = [
        `${proxyName}/binhu/getComponentTypeStatistic`, // 设备部件
        `${proxyName}/binhu/getComponentStatusStatistic`, // 状态统计
      ];
      await concurRequest(urls, 5).then((res) => {
        let resultMap = res.map((item) => item.code === 200 && item.data);
        if (resultMap[0]) {
          let _componentsList = this.componentsList;
          resultMap[0].forEach((el) => {
            _componentsList.forEach((item) => {
              if (item.name.includes(el.name)) {
                item.queryKey = el.name;
                item.value = el.count;
              }
            });
          });
          this.componentsList = _componentsList;
          this.handleClickItem(
            0,
            this.componentsList[0].type,
            this.componentsList[0].queryKey
          );
        }
        // 设备状态统计
        resultMap[1] && (this.allDevice = resultMap[1]);
      });
    },