这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战

async函数

ES2017的标准增加了：async-to-generator即async函数，这篇文章我们就来了解一下什么是async函数。

async函数是使用async关键字声明的函数，async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。

它其实是 Generator 函数的语法糖，前面文章： ES2015之生成器函数已经提到Generator生成器函数，有需要的可以传送门过去。

如何使用

我们使用Promise解决了回调地狱嵌套的问题，而Generator解决了Promise长链式问题，async则解决了Generator每次都需要手动执行的问题。我们可以在调用任何返回Promise的函数时使用 await，如下：

function resloveName() {
    return new Promise((reslove, reject) => {
        setTimeout(() => {
            reslove('也笑')
        }, 2000)
    })
}

async function outputName() {
    console.log('开始', Date.now());
    const name = await resloveName();
    console.log('结束:', name, Date.now());
}

outputName()

输出结果：

开始 1637462497820
结束: 也笑 1637462499838

上述代码中，会先打印开始，然后等resloveName函数两秒执行完后，再打印结束。

注意事项

我们需要注意的是：

await关键字只在async函数内有效。如果你在async函数体之外使用它，就会抛出语法错误 SyntaxError。
async/await的目的为了简化使用基于promise的API时所需的语法，async/await的行为就好像搭配使用了生成器和promise。
await 关键字会阻塞其后的代码，直到promise完成，就像执行同步操作一样

总结

在我们项目中，async函数是经常用到的，合理的使用它，可以让我们的逻辑和代码结构更简洁。

如果你想了解ES的其他特性，请移步到 ES2015+碎片化学习，每天都在向前走一步，这是所有文章的目录入口。

ES2017之async函数

async函数

如何使用

注意事项

总结