在前端开发中，Promise 是一种常见的异步编程解决方案。但是，使用 Promise 时会出现 then 的嵌套陷阱，导致代码可读性差、难以维护。为了解决这个问题，ES7 引入了 async/await 语法糖。
Promise then 的嵌套陷阱
在使用 Promise 时，我们通常会使用 then 方法来处理异步操作的结果。但是，如果有多个异步操作需要依次执行，就会出现 then 的嵌套，导致代码可读性差、难以维护。
例如，我们需要依次执行三个异步操作，代码如下：
-- -------------------- ---- -------
------------
------------- -- -
------ --------------------
--
------------- -- -
------ --------------------
--
------------- -- -
---------------------
--
------------ -- -
---------------------
---上面的代码中，我们依次执行了 asyncFunc1、asyncFunc2 和 asyncFunc3 三个异步操作，并且通过 then 方法依次处理它们的结果。但是，由于 then 的嵌套，代码可读性很差，难以维护。
ES7 async/await 语法糖
为了解决 Promise then 的嵌套陷阱，ES7 引入了 async/await 语法糖。使用 async/await 可以让异步代码看起来像同步代码，提高代码可读性和维护性。
async/await 的基本用法如下：
-- -------------------- ---- ------- ----- -------- ----------------- - ----- ------- - ----- ------------- ----- ------- - ----- -------------------- ----- ------- - ----- -------------------- --------------------- - ----------------------------- -- - --------------------- ---
上面的代码中，我们定义了一个 async 函数 myAsyncFunction，通过 await 关键字等待异步操作的结果。在 myAsyncFunction 中，我们依次执行了 asyncFunc1、asyncFunc2 和 asyncFunc3 三个异步操作，并且通过 await 关键字等待它们的结果。最后，我们打印出了 result3 的值。
需要注意的是，使用 async/await 时需要将函数定义为 async 函数，并且使用 try/catch 捕获异常。
async/await 的指导意义
使用 async/await 可以让异步代码看起来像同步代码，提高代码可读性和维护性。同时，async/await 也可以解决 Promise then 的嵌套陷阱，让异步代码更加清晰和易于理解。
但是，在使用 async/await 时需要注意以下几点：
- async/await 只是 Promise 的语法糖，需要在支持 Promise 的环境中使用；
- await 只能在 async 函数内部使用；
- await 等待的是 Promise 对象，如果不是 Promise 对象会自动转换为 Promise 对象；
- 如果 await 等待的 Promise 对象状态变为 rejected，会抛出异常，需要使用 try/catch 捕获异常。
示例代码
下面是一个使用 async/await 的示例代码，用于获取 Github API 的用户信息：
-- -------------------- ---- -------
----- -------- --------------------- -
----- --- - -------------------------------------------
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
----- - ----- ---- ---------- --------- - - -----
------------------ ----------
----------------- ---------
----------------------- ---------------
----------------------- ---------------
- ----- ------- -
---------------------
-
-
-----------------------上面的代码中，我们使用了 fetch 函数获取 Github API 的用户信息，并通过 await 等待异步操作的结果。最后，我们打印出了用户的名字、个人简介、粉丝数和关注数。如果出现异常，我们使用 try/catch 捕获异常并打印出错误信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3a6b9a941bf71346f7d6c
