法律建设企业网站,网站编程基础,wordpress多级菜单,西安工程信息交易中心场景#xff1a;有时候进入某些页面时会同时请求很多个业务接口#xff0c; 如果一个一个的发送请求#xff0c;会产生很多冗余#xff0c;所以封装了一个方法#xff08;参考渡一教育袁老师课程#xff09;。
此方法会根据请求顺序#xff0c;返回一个返回结果数组有时候进入某些页面时会同时请求很多个业务接口 如果一个一个的发送请求会产生很多冗余所以封装了一个方法参考渡一教育袁老师课程。
此方法会根据请求顺序返回一个返回结果数组异常的结果会返回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]);});},
