zoukankan      html  css  js  c++  java
  • 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        
        }
  • 相关阅读:
    MQ 2035(MQRC_NOT_AUTHORIZED)
    C# 构造函数中调用虚方法的问题
    Oracle bug 使用max或min函数into到一个char类型报字符缓冲区太小的错误
    windows2003 64位 iis6.0 运行32位web应用程序
    .NET安装和配置Oracle数据访问组件(ODAC)
    WMS函数组:10.创建采购订单
    报表:BOM展开程序
    WMS函数组:9.交货单过帐3(BDC)
    WMS函数组: 7.交货单行项目除
    WMS函数组:1.检查ZPB2是否存在
  • 原文地址:https://www.cnblogs.com/nanacln/p/8862498.html
Copyright © 2011-2022 走看看