vue axios封装并发请求
【代码】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]);
});
},
更多推荐
已为社区贡献1条内容
所有评论(0)