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

此方法会根据请求顺序，返回一个返回结果数组，异常的结果会返回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]);});},