请求多个接口
-
对于每个type,你的代码中需要三次独立的异步请求(
list_teacher
,list_external
,list_serve
)。这些请求可以同时进行以节省时间。 -
使用map函数直接生成list,而不是用forEach循环和push。
这是优化后的代码:
async getData() {
try {
const res = await list_zgqk();
if (res.data) {
const promises = res.data.map(async (typeName) => {
var data = {
name: typeName,
value: 0,
value1: 0,
value2: 0,
}
// Start three requests concurrently
const [value, value1, value2] = await Promise.all([
list_teacher({ "current": 1, "size": 1, "zgqk": data.name }),
list_external({ "current": 1, "size": 1, "zgqk": data.name }),
list_serve({ "current": 1, "size": 1, "zgqk": data.name })
]);
// 校内教职工
data.value = value.total;
// 外聘教师
data.value1 = value1.total;
// 服务人员
data.value2 = value2.total;
return data;
});
this.list = await Promise.all(promises);
console.log(JSON.stringify(this.list));
}
} catch (err) {
console.error(err);
}
},
在这段代码中,Promise.all
使得我们可以并发执行多个操作。只有当所有的promise都解决(或者一个拒绝)时,Promise.all
才会解决。这可以显著提高性能,特别是当每个请求都需要花费一些时间时。
循环请求接口方式
列表循环请求接口获取数据
list: [
{
name: '本科',
value: 0
}, {
name: '硕士',
value: 0,
}, {
name: '博士',
value: 0,
}, {
name: '博士后',
value: 0
}]
const promises = this.list.map(async (type) => {
try {
const data = await list_teacher({ "current": 1, "size": 1, "xlcc": type.name });
type.value = data.total;
return type;
} catch (err) {
console.error(`Error updating type ${type.name}:`, err);
type.value = 0; // or some default value
return type;
}
});
Promise.all(promises)
.then(results => {
console.log(results); // 所有请求完成后的处理
})
.catch(err => console.error("An error occurred:", err));