需求:用一个数组中的每个值去循环请求接口,获取对应数据放进新数组
举个栗子可能更好理解:老师想知道每个同学的成绩,然后有个接口是需要用同学的id去拿到对应的分数。
那么,已知数组是:
[1, 2, 3, 4] // 同学id数组
目标数组是:
[
{ id: 1, name: '张三', score: 98 },
{ id: 2, name: '李四', score: 99 },
{ id: 3, name: '王五', score: 99 },
{ id: 4, name: '老六', score: 100 },
]
解决:
使用 async
,await
methods: {
async handleGoods(arr) {
let idArr = [1, 2, 3, 4];
let scoreArr = [];
for (let i = 0; i < idArr.length; i++) {
let data = await this.getScore(i);
scoreArr.push({
id: idArr[i],
name: data.name,
score: data.score,
})
}
},
async getScore(id) {
return await new Promise((resolve, reject) => {
// 请求接口
getScore({
id: id,
}).then(res => {
resolve(res.data);
}).catch(() => {
reject({});
})
});
},
}
总结:
要在循环中使用async
、await
,可以使用for…of
或者 for 循环
, while循环
等,不能使用foreach
,因为在 forEarch
里执行 await
会并行的。
相关资料: