我理解的async和await

Enter键上的妹妹

2021-06-15 738 阅读1分钟

为什么出现？

为了解决使用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从上次中断的地方继续执行

有啥需要注意的？

错误处理

使用try/catch包起来

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

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() {}
}

async函数里return的值默认会被promise包裹起来

await关键字

只能用在async函数里
最近好像支持顶层await了
await 后可以是一个promise，也可以是一些普通类型的值

const someFun = arg => arg * 2;
const fun1 = async () => {
   let tempData = await 37;
   let tempData1 = await someFun(4);
}

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

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

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

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

友情链接：