我理解的async和await

·  阅读 454

为什么出现?

  • 为了解决使用promise时,.then过多的问题

怎么用?

  • 一个小例子
const fun1 = () => new Promise((resolve) => setTimeout((data) => {
  console.log('fun1 ==>')
  resolve(data)
}, 1000, 'aaaa'));

const fun2 = async () => {
    let tempStr = await fun1();
    console.log('fun2 ==>');
    return tempStr
}
fun2();

console.log('黑猫警长')
复制代码

什么意思?

  • fun1返回了一个promise,是一个异步函数
  • fun2里调用了fun1,在代码执行到await fun1这一行的时候, js引擎就把fun2这个函数挂起了,转头去忙其他的了,这也就是 == 黑猫警长 == 先出现的原因
  • 当fun1执行完之后,会通知fun2从上次中断的地方继续执行

有啥需要注意的?

  • 错误处理
  1. 使用try/catch包起来
const fun2 = async () => {
    try {
        let tempStr = await fun1();
    } catch (err){
        console.log(err);
    }
    console.log('fun2 ==>');
    return tempStr
}
复制代码
  1. promise捕获错误(在fun2上捕获)
fun2().then(// ...)
.catch(err => console.log(err))
复制代码
  • forEach的函数参数前加async没用

在哪里能用?

  • async关键字
const fun1 = async () => {}

async function fun2() {}

class SomeClass {
    async fun3 () {}
}

const someObj {
    async fun4() {}
}
复制代码
  1. async函数里return的值默认会被promise包裹起来
  • await关键字
  1. 只能用在async函数里
  2. 最近好像支持顶层await了
  3. await 后可以是一个promise, 也可以是一些普通类型的值
const someFun = arg => arg * 2;
const fun1 = async () => {
   let tempData = await 37;
   let tempData1 = await someFun(4);
}
复制代码

await关键字执行时发生了啥?

  • await 关键字使JavaScript运行时暂停于此行,允许其他代码在此期间执行,直到异步函数调用返回其结果。一旦完成,您的代码将继续从下一行开始执行
  • 上面那一句

允许其他代码在此期间执行

的意思是js引擎爱干嘛干嘛去,但这个当前执行的async被挂起了

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改