摘要：
arr.forEach使用img的load事件获取图片宽高其实是异步操作。查看大图效果出现的js代码this.$preview.open。在执行这一步时this.imgInfoArr上面图片异步获取宽高必须全部执行完成。所以需要使用到promise。
1、使用场景：在一个房源列表里，点击某一条房源里的图片实现看大图效果。（vue2)
问题：使用vue-preview查看大图时需要知道图片宽高，但是接口没有返回，所以需要使用Image对象来获取图片宽高。
arr.forEach((val, indexs) =>{ let img = newImage() 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 functiongetImgInfo() { var p = new Promise(function(resolve, reject) { _this.imgInfoArr =[] arr.forEach((val, indexs) =>{ let img = newImage() img.addEventListener('load', () =>{ _this.imgInfoArr.push({ src: val, w: img.width, h: img.height }) if (arr.length - 1 ===indexs) { resolve() } }) img.src =val }) }) returnp } 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"; returnstr_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); } }); }); returnmyFirstPromise }