async await promise 各种坑点

最新推荐文章于 2025-04-04 20:19:49 发布

原创最新推荐文章于 2025-04-04 20:19:49 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记-小程序相关专栏收录该内容

1 篇文章

订阅专栏

本文探讨了JavaScript中的异步编程，重点在于Promise和async/await的使用。通过实例展示了如何确保异步操作按预期顺序执行，并解释了wx.cloud.uploadFile在处理错误时的特性。在异步函数中，正确封装Promise是关键，以确保await能正确等待异步操作完成。同时，文章提到了云开发中文件上传的异步处理，指出在success回调中的错误可能不会被console.log捕获，强调了错误处理的重要性。

各个promise会异步执行，但是返回的结果，会按照数据[a,b]的顺序输出

  onLoad() {
    let a=new Promise(resolve=>{
      setTimeout(() => {
        console.log('1')
        resolve('a')
      }, 1000);
    })
    let b=new Promise(resolve=>{
      setTimeout(() => {
        console.log('2')
        resolve('b')
      }, 500);
    })
    Promise.all([a,b]).then(res=>{
      console.log(res)
    })
    console.log('c')
    //各个promise会异步执行，但是返回的结果，会按照数据[a,b]的顺序输出
  },

输出结果：
在这里插入图片描述

async-await ，await对应的函数需要封装一个promise

错误

 async onLoad() {
   let a=await this.setTime()
 console.log('a',a)
  },
  setTime(){
    setTimeout(() => {
      return 1
    }, 1000);
  }
  //a undefined

正确

 async onLoad() {
   let a=await this.setTime()
 console.log('a',a)
  },
  setTime(){
  return new Promise(resolve=>{ setTimeout(() => {
      resolve(1) 
    }, 1000);
  })
  }
  //a 1

要引用一个异步的函数，该函数可以用return new Promise包起来，再引用，引用出加.then即可

  onLoad() {
    this.setTime().then(res => {
      console.log('res', res)
    })
  },
  setTime() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(1)
      }, 1000);
    })
  }
  //res 1

wx.cloud.uploadFile的success回调，里面如果有报错，console不会提示出来

  // 上传到云开发的存储中
  uploadImage(fileURL) {   
      let p = new Promise((reslove, reject) => {
        wx.cloud.uploadFile({
          cloudPath: path + new Date().getTime() + suffix, // 上传至云端的路径
          filePath: fileURL[i].url, // 小程序临时文件路径
          success: res => {
          	// fileID.push(res.fileID)《注意此处，之前没注释，此fileID为未定义，
            //出错了，但是console不提示,导致下面reslove不执行》
            reslove(res.fileID)
          },
          fail: console.error
        })
      })
      task.push(p)
    }
    Promise.all(task).then(res => {
      console.log(res);
    })
  },