promise使用场景

使用场景：在一个房源列表里，点击某一条房源里的图片实现看大图效果。（vue2)

问题：使用vue-preview查看大图时需要知道图片宽高，但是接口没有返回，所以需要使用Image对象来获取图片宽高。

 arr.forEach((val, indexs) => {
    let img = new Image()
    img.addEventListener('load', () => {
       _this.imgInfoArr.push({
          src: val,
          w: img.width,
           h: img.height
        })
         if (arr.length - 1 === indexs) {
            resolve()
         }
      })
       img.src = val
  })    

使用img的load事件获取图片宽高其实是异步操作。

查看大图效果出现的js代码

this.$preview.open(index, this.imgInfoArr)。

在执行这一步时this.imgInfoArr上面图片异步获取宽高必须全部执行完成。所以需要使用到promise。完整代码如下：

// 看大图
    watchBigImg(index, arr) {
      var _this = this
      function getImgInfo() {
        var p = new Promise(function(resolve, reject) {
          _this.imgInfoArr = []
          arr.forEach((val, indexs) => {
            let img = new Image()
            img.addEventListener('load', () => {
              _this.imgInfoArr.push({
                src: val,
                w: img.width,
                h: img.height
              })
              if (arr.length - 1 === indexs) {
                resolve()
              }
            })
            img.src = val
          })
        })
        return p
      }
      getImgInfo()
        .then((data) => {
          this.$preview.open(index, this.imgInfoArr)
        })
    }