使用 promise.all 依次缓存文件

有这样一个需求, 进入一个页面需要播放好几个音频,为了增加用户体验,产品要求在第一次进入的时候就将所有的音频缓存在本地,然后再从本地读取。
但是wx.downloadFile()是一个异步方法,我必须再确定所有的音频下载完成之后在开始播放音频,但是因为是异步方法,解决思路了如下。

  • 设定一个 i = 0 ,使用forEach 依次发起下载请求,每次请求成功就+1,一直判断i == Arr.length 为止
  • 把每一个异步下载的方法都用给为promise,然后组合为一个数组传递给 promise.all 使用,最后在promise.all,的then中开始阅读音频。
  onLoad() {
    let kejianList = this.data.kejianArr;
    const that = this;
    let p = null;
    let pArr = []
    kejianList.forEach((el, ind) => {
      that.audioArr[ind] = []; // 二维数组
      el.QiNiuContentAudioUrl.forEach((elt, cind) => {
        p = new Promise((resovle, reject) => {
          wx.downloadFile({
            url: elt,
            success(res) {
              console.log('下载进度', ind + 1, '/', kejianList.length)
              if (res.statusCode === 200) {
                that.audioArr[ind][cind] = res.tempFilePath
                resovle()
              }
            },
            fail: () => {
              reject()
              console.log('下载失败')
            }
          })
        })
        pArr.push(p)
      })
    })
    console.log(pArr)
    Promise.all(pArr)
      .then(res => {
        console.log('下载成功,音频Arr', this.audioArr)
        this.readText()
      }).catch(err => {
        console.log('下载失败')
      })
  },

参考

  • [阮一峰ES6标准:Promise.all] (https://es6.ruanyifeng.com/#docs/promise#Promise-all)

你可能感兴趣的:(使用 promise.all 依次缓存文件)