map遍历数组时正确使用async与await

1.开发环境 vue
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会处理一些数据,需要拿到一个xxx在去请求另外一个接口,但是数据是异步操作,所以赋值的时候一直是空,下面我来分享一下。
4.废话不多说,直接上效果图:

5.下面我来分享

// 完整代码
this.list = this.list.map(async (item) => {
    let a = await this.$Cmethods.getfilesimg(item.fileKey);
    item.img = a[0];
    return item;
});
this.list = await Promise.all(this.list);

6.分析与解决

1.分别打印item和this.list,发现item里面有值,但是this.list里面没有,怀疑是异步
2.因为async函数返回的是一个Promise,所以map返回的是Promise数组.必须等到所以Promise得到处理之后再进行赋值
3.通过await Promise.all(xxx);//解决

7.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。