场景
有一个对象数组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')}})
})