我理解的async和await

为什么出现？

• 为了解决使用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
}
复制代码

2. 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被挂起了