【前端异步问题】通过Promise.all(）解决异步取值问题

场景

有一个对象数组itemList,数组中的对象有的有属性attr,有的没有。没有属性a的对象需要通过调用接口获取并赋值给相应对象。
再将处理完后的对象数组，传入另一个接口中。

let itemList = [
	{ id: 0, attr: '雨伞'},
	{ id: 1, attr: null},
	{ id: 2, attr: '水杯'},
	{ id: 3, attr: null},
	{ id: 3, attr: '书包'}
]

代码

刚开始我的写法如下：

itemList.forEach(item => {
	if(!item.attr) {
	app.$http.get('url1',id).then(res => {
		item.attr = res.data.attr
		})
	}
})
console.log(itemList) // 此处能打印出我处理好的数组
app.$http.post('url2',{data:itemList})

这种情况下，接口会报错，说我传入的数据没有attr属性。是因为异步导致第一个接口可能没有处理完就调用了第二个接口。这个时候我们可以运用promise.all等遍历过程中所有的promise处理结束后再调用第二个接口，具体代码如下：

let promiseList = [] // 定义数组接收所有的promise
itemList.forEach(item => {
	if(!item?.attr){
	let itemPromise = app.$http.get('url1',id).then(res=>{
	item.attr = res.data.attr
	})
	promiseList.push(itemPromise)
	}
})
Promise.all(promiseList).then(()=>{
	app.$http.post('url2',{data:itemList}).then(res => {
	if(res.code===200){
	$message.success('success')
	}
 })
})