|
有一需求需要给数组中每一项赋值，我这么写的
async mounted() {
let list = await this.setArr();
console.log(list, 'list')
},
methods: {
setArr() {
let arr = [{id: 1, groupList: []}, {b:1, groupList: []}];
arr.forEach(async item => {
item.groupList = await this.fetchGroupList(item.id);
console.log(item.groupList, 'item.groupList')
});
console.log(arr, 'arr')
return arr;
},
fetchGroupList(id){
return new Promise(resolve => {
setTimeout(() => {
let groupList = [{groupId: 1, name: 1}, {groupId: 2, name: 2}];
resolve(groupList);
}, 1000)
})
}
}
打印信息如下：
会先执行console.log（arr, 'arr'）而不是等待forEach中await执行完，setArr方法更改如下写法：
methods: {
async setArr() {
let arr = [{id: 1, groupList: []}, {b:1, groupList: []}];
const peomiseArr = arr.map(async item => {
item.groupList = await this.fetchGroupList(item.id);
console.log(item.groupList, 'item.groupList')
});
await Promise.all(peomiseArr);
console.log(arr, 'arr')
return arr;
},
fetchGroupList(id){
return new Promise(resolve => {
setTimeout(() => {
let groupList = [{groupId: 1, name: 1}, {groupId: 2, name: 2}];
resolve(groupList);
}, 1000)
})
}
}
打印结果：
但是promise.all是一次发出所有请求，等到所有请求返回后，按照接收结果的顺序打印出item.groupList;
最后同事推荐另外一种写法，串行发送请求：
methods: {
async setArr() {
let arr = [{id: 1, groupList: []}, {b:1, groupList: []}];
for(let [idx, item] of arr.entries()) {
item.groupList = await this.fetchGroupList(item.id);
console.log(item.groupList, idx, 'item.groupList')
}
console.log(arr, 'arr')
return arr;
},
fetchGroupList(id){
return new Promise(resolve => {
setTimeout(() => {
let groupList = [{groupId: 1, name: 1}, {groupId: 2, name: 2}];
resolve(groupList);
}, 1000)
})
}
}
| 
转播
