循环中设置异步加载

随手记录一下开发过程中的小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相关方法还有很多，日常中不太常用，但是某些特定场景下，还是需要复习下~