Promise链式调用实现小程序下载海报功能-CSDN博客

最近有个需求，要实现小程序下载海报保存到手机功能。业务要求，先调用一个接口判断是否已经生成过海报二维码，没有就调用生成二维码的接口。二维码图片和海报背景图片保存之前，还需要调用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});
                    })
          
      }
  })
复制代码