随手记录一下开发过程中的小bug
问题:移动端列表加载中有图片和信息,但是通过拿到图片的path去请求转换成base64的格式加载,因为循环的问题,导致图片加载不出来,说白了就是一个异步问题
解决方案:代码如下
async getCompanyById () {
const _vm = this
await this.getUnitInfo()
let arr = this.companyInfo.compImgList
// 利用Promise.all(),对每一次循环进行异步操作
await Promise.all(arr.map(async (item) => {
if (item) {
if (item.path) {
item.path = item.path.replace('/', '') || ''
}
item.path = await _vm.getPictures(item.path || '')
}
}))
// ...
},
核心就是Promise.all(),复习一下Promise的相关方法吧
- Promise.all()
内部是多个Promise实例(一个Promise包裹了多个Promise实例),只有内部的Promise实例状态都变成fulfilled的时候,外部的Promise状态才能转换成fullfiled。内部有一个实例返回的是rejected,外部的Promise状态就会是rejected。(其实就是&&的关系,都成功的时候才fulfilled,只要有一个不成功,就变成rejected)
- Promise.race()
与all()使用一样,内部也是包裹了多个Promise实例,但是race()是不等内部Promise执行完,只要有一个Promise实现状态转换,Promise.race()就会对应改变。
关于Promise相关方法还有很多,日常中不太常用,但是某些特定场景下,还是需要复习下~