前言
在 JavaScript 中，我们经常使用 Promise 在异步操作时获取数据。Promise 带来的便利性能大大提升代码的可读性和可维护性，但在一些复杂的情形下，Promise 函数会变得很难处理。这时， ECMAScript 2016 引入了 async 函数来简化 Promise 链式调用。
async 函数与 Promise
async 函数是 ECMAScript 2016 引入的新语法，本质上是一种语法糖。它可以让我们使用类似同步调用的方式来处理异步操作。async 函数本质上返回一个 Promise 对象，它的返回值会作为 Promise 对象的 resolve 值。如果 async 函数抛出异常，则会被作为 Promise 对象的 reject 值。
下面是一个简单的 async 函数例子：
----- -------- --------- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------ ----- -
这个例子中，我们首先使用了 fetch 函数来获取一个 json 数据，然后我们再使用 response.json() 来解析获取到的数据。最后，我们返回解析后的数据。
与 Promise 相比，async 函数使得编写异步代码更加简洁。我们不需要使用 Promise 的 then() 方法来处理多个异步调用，而是使用 await 一次性获取多个异步操作的结果。另外，async 函数中的错误处理也更加方便。
在 Promise 链中使用 async 函数
async 函数其实最大的优势是可以在 Promise 链中使用，将任何异步操作都转化为 await / async 写法，大大简化了代码风格。下面是一个使用 async 函数的 Promise 链式调用示例：
-------- --------- -
------ -------------------------------------
---------------- -- -----------------
-
-------- ----------------- -
------ ------------------------------------------------
---------------- -- -----------------
-
-------- ----------------- -
------ --------------------------------------------------- -
------- -------
----- ---------------------
---
-
----- -------- ----------- -
----- ---- - ----- ----------
----- -------- - ----- ------------------
----- ----------------------
-这个例子中，我们定义了三个使用 Promise 函数封装并获取数据的方法： getInfo 、getMoreInfo 和 displayInfo 。这些方法通过串联调用组成一个Promise链。最后，我们定义了一个 async 函数 fetchInfo，我们使用 await 来获取Promise对象并将三个方法组成一条Promise链。
使用 async 函数简化了我们的代码，让它看起来更加简洁和优美。
如何安全使用 async 函数
尽管 async 函数方便了我们的编码，但在使用时需要注意以下几点：
不要在返回值前throw 异常。
不要使用 await 语句在同步代码中。
使用try / catch 包裹 async 函数，捕捉抛出的异常。
总之，如果你遵循上面几点，你的 async 函数将安全、可读且易于维护。
结论
async 函数使得异步编程更加简单、易读且容易维护，它可以使我们的代码看起来更加清晰。尝试在你的代码中使用 async 函数进行异步编程，可能会给你带来意外的好处。学会使用 async 函数对于前端开发是很有帮助的。
参考
https://javascript.info/async-await
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
https://blog.logrocket.com/improve-your-asynchronous-codes-readability-with-async-await/
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671af6469babaf620fa6b572