初学微信小程序——文件上传Promise异步阻塞简单案例

在做学长让我做模拟的猫咪图鉴时,遇到了这个问题:

  在一个循环内,执行多次文件上传后,用于接收每次返回的res.fileID的数组变量,并没有如预想的获取到所有的fileID(甚至有时候一个值都没有)。

原因:

  文件上传的代码是异步执行的,在调用该变量时各个异步执行并没有结束,也就没有将res.fileID传入用于接收的数组。

解决方法:

  使用Promise!

  首先将每次循环都包装成一个Promise,丢进一个数组(promiseArr)中。

  在循环结束后,调用变量前,调用Promise.all(promiseArr),参数传入promiseArr数组,随后在调用的.then()方法中执行逻辑代码。

原理:

  Promise.all()方法,在传入的Promise数组中的每个Promise都执行完毕后,才会结束阻塞。

addCat() {
    let that = this
    let arr = []
    this.setData({
      fileIDArray: []
    })
    //先上传图片文件,拿到fileID数组
    var promiseArr = []
    this.data.imgTempPathArray.forEach(function (item, index) {
      //定义Promise并丢进promiseArr数组
      var promise = new Promise((resolve, reject) => {
        //上传文件
        wx.cloud.uploadFile({
          // 上传至云端的路径 
          cloudPath: "catImg/" + new Date().getTime(), // 动态生成文件名
          filePath: item, // 小程序临时文件路径
          success: res => {
            arr.push(res.fileID)
            resolve(res.fileID)
          },
          fail: err => {
            wx.showToast({
              title: '图片上传失败',
              icon: 'none',
              duration: 2000
            })
            reject(err)
          }
        }) 
      })
      promiseArr.push(promise)
    })//循环结束
    Promise.all(promiseArr).then(res=>{
      //关键步骤:Promise.all()
      //传入Promise数组,当其中所有的Promise执行完后才会执行then()
      console.log("arr:",arr)//执行代码逻辑
    })
}

 

posted @ 2020-07-03 17:05  TCSN  阅读(45)  评论(0编辑  收藏