最近有个需求,要实现小程序下载海报保存到手机功能。业务要求,先调用一个接口判断是否已经生成过海报二维码,没有就调用生成二维码的接口。二维码图片和海报背景图片保存之前,还需要调用wx.download下载。粗略一想,这里已经涉及好几个异步任务了。为了避免层层嵌套回调函数,决定撸一个promise。
- 用Promise封装是否已经生成过海报二维码请求
getData: function (id) {
let getData = new Promise((resolve, reject) => {
util.Ajax({
url: `${aaa}....`,
success(res) {
resolve(res)
},
})
})
return getData
},
复制代码
2.用Promise封装请求二维码地址请求
getQrCode(id) {
let code = new Promise((resolve, reject) => {
util.Ajax({
url: `${aaa}....`,
success(res) {
resolve(res)
},
fail(err) {
reject(err)
}
})
})
return code;
},
复制代码
3.用Promise封装 wx.downloadFile方法
downFile(url) {
let down = new Promise((resolve, reject) => {
wx.downloadFile({
url: url,
success(res) {
if (res.statusCode === 200) {
resolve(res)
}
},
fail(err) {
reject(err)
console.log('下载图片失败' + err)
}
})
})
return down
},
复制代码
4.只要函数返回的是promise,就可以不断的.then调用。为下载二维码和下载背景图两个操作各自写一个函数返回prosmie,以请求回来的图片地址作为参数。
downLoadEwa(ewmUrl) {
//下载二维码图片资源
return this.downFile(ewmUrl);
},
//下载背景图片资源
downLoadBg(url) {
return this.downFile(url);
},
复制代码
现在可以愉快的调用了,爽。。。。。
this.getData(a)
.then((res) => {
//有生成过有二维码
if(res.hasCode){
//传入二维码图片地址,下载二维码图片
this.downLoadEwa(res.QrcodeUrl)
.then((res) => {
//保存下载到本地后,二维码的路径
this.setData({ewmUrl: res.tempFilePath});
//要返回一个promsie才可以继续链式调用,传入背景图地址,下载背景图
return this.downLoadBg(this.data.backgroundUrl)
})
.then((res) => {
//保存下载到本地后,背景图路径
this.setData({templateBgUrl: res.tempFilePath});
} else {
//没有生成过二维码的情况
this.getQrCode(id).then((res) => {
return this.downLoadEwa(res)
}).then((res) => {
this.setData({ewmUrl: res.tempFilePath});
return this.downLoadBg(this.data.backgroundUrl)
}).then((res) => {
this.setData({templateBgUrl: res.tempFilePath});
})
}
})
复制代码