在 JavaScript 开发中，我们经常会使用 Promise 来管理异步代码，但是 Promise 仍然存在一些问题，例如深度嵌套的问题和可读性差的问题。于是 ES2017 为我们引入了 async/await 函数，它能够让 Promise 代码更加优雅。在本文中，我们将学习 async 函数的基本用法，以及如何在实战中使用它优化 Promise 代码。
async/await 函数基本用法
async/await 函数是一种语法糖，它能够让我们更加方便地处理异步代码。async 函数可以包含 await 表达式，await 会暂停 async 函数的执行，直到 Promise 完成并返回结果。async 函数的返回值是一个 Promise，我们可以像使用普通 Promise 一样使用它。
下面是一个简单的例子，我们使用 async/await 函数获取一个 HTTP 请求的数据：
-- -------------------- ---- -------
----- -------- --------- -
----- -------- - ----- -------------------------------------
----- ---- - ----- ---------------
------ ----
-
---------
---------- -- -
-----------------
--
------------ -- -
--------------------
--在上面的代码中，我们定义了一个 async 函数 getData()，使用 await 等待 fetch() 方法和 response.json() 方法的返回结果。由于我们使用了 async 函数，我们不再需要使用 then() 和 catch() 方法来处理 Promise。相反，我们可以像使用普通函数一样使用 async 函数。
使用 async 函数优化 Promise 代码
在实际代码中，我们经常会遇到多个嵌套的 Promise，它们使代码可读性变得很差。下面是一个例子，它获取用户的授权后获取用户的订单信息：
-- -------------------- ---- -------
---------------------
-------- -- -
--------------
------------ -- -
---------------------
--
------------ -- -
--------------------
--
--
------------ -- -
--------------------
--在上面的代码中，我们先向用户请求授权，然后获取订单列表，并在获得订单列表后对其进行处理。这段代码非常难以读懂，我们可以使用 async/await 函数来重写它：
-- -------------------- ---- -------
----- -------- ------------ -
--- -
----- ---------------------
----- ------ - ----- --------------
---------------------
- ----- ------- -
--------------------
-
-
------------在上面的代码中，我们定义了一个名为 showOrders() 的 async 函数，在 try-catch 块中等待 askForAuthorization() 和 getOrderList() 的返回结果。如果任何一个 Promise 被拒绝，catch 块将捕获错误并打印它。相比之下，这段代码的可读性更高，并且我们再也不需要使用 Promise 的 then() 和 catch() 方法了。
结论
通过使用 async/await 函数，我们可以更加优雅地处理 Promise 代码。如果你还没有使用 async/await 函数，请考虑在你的项目中使用它！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672a0685ddd3a70eb6cefbd2