promise使用场景

1、使用场景：在一个房源列表里，点击某一条房源里的图片实现看大图效果。（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)
        })
    }

 以下代码保证了是所有图片都遍历完成获取到宽高push到this.imgInfoArr里面去。

if (arr.length - 1 === indexs) {
   resolve()
}

 2、封装小程序调用请求方法

ajax(url,method,data){       
        let pData=data
        pData.method=method
        let getSuccessMethod= function (method) {
            let str_tempmethod = method.substring(method.indexOf(".") + 1);
            str_tempmethod = str_tempmethod.replace(/\./g, "_");
            str_tempmethod += "_response";
            return str_tempmethod;
        }
        let myFirstPromise = new Promise((resolve, reject) => {
            swan.request({
                url:url,
                data:pData,
                success: res => {
                    resolve(res.data[getSuccessMethod(method)])
                },
                fail: err => {
                    console.log('request fail', err);
                    reject(err)
                },
                complete: () => {
                    //this.setData('loading', false);
                }
            });
        });
        return myFirstPromise        
    }

 

转载于:https://www.cnblogs.com/nanacln/p/8862498.html