在 JavaScript 中，异步编程是非常常见的。而在 ES7 中，有一种新的异步编程方式——async/await。通过使用 async/await，我们可以更加方便地编写异步代码，并且避免了回调地狱的问题。本文将会介绍 async/await 的基本用法，以及使用 async/await 编写异步代码的一些注意事项。
async/await 基本用法
async/await 是基于 Promise 的语法糖，因此在使用 async/await 之前，我们需要了解 Promise 的基本用法。Promise 是一种异步编程的解决方案，可以避免回调地狱的问题，并且可以更加清晰地表达异步操作的顺序。
下面是一个使用 Promise 的例子：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
-
----------------------- -- -
------------------
---在上面的例子中，fetchData 函数返回一个 Promise，这个 Promise 在 1 秒钟后会 resolve，返回值为 'data'。我们可以通过 then 方法来获取这个返回值，并在控制台中输出它。
接下来，让我们看一下 async/await 的基本用法。使用 async/await，我们可以将上面的代码改写成下面的形式：
-- -------------------- ---- -------
----- -------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
-
----- -------- ------ -
----- ---- - ----- ------------
------------------
-
-------在上面的代码中，我们定义了一个名为 fetchData 的 async 函数，这个函数返回一个 Promise。在 main 函数中，我们使用 await 关键字来等待 fetchData 函数返回的 Promise，直到 Promise resolve，然后获取返回值并输出它。
需要注意的是，使用 async/await 时，我们必须将代码放在 async 函数中，否则会报错。另外，await 关键字只能在 async 函数中使用。
async/await 的优点
使用 async/await 有以下几个优点：
- 更加清晰的代码结构。使用 async/await，我们可以将异步操作的顺序写成顺序执行的代码，避免了回调地狱的问题。
- 更加方便的错误处理。使用 try/catch 语句，我们可以更加方便地捕获 Promise 中的错误，并进行处理。
- 更加自然的代码顺序。使用 async/await，我们可以按照自然的顺序编写代码，而不需要考虑 Promise 的 then 方法的嵌套顺序。
async/await 的注意事项
使用 async/await 时，需要注意以下几个问题：
- async 函数返回的是一个 Promise。因此，在使用 async 函数时，我们需要使用 Promise 的 then 方法来获取返回值。
- await 关键字只能在 async 函数中使用。如果在非 async 函数中使用 await，会导致语法错误。
- await 关键字只能等待 Promise 对象。如果我们使用 await 关键字来等待一个非 Promise 对象，会导致语法错误。
- async 函数可以使用 try/catch 语句来捕获 Promise 中的错误。如果 Promise 中发生了错误，async 函数会返回一个 rejected 状态的 Promise，我们可以使用 try/catch 语句来捕获这个错误，并进行处理。
下面是一个使用 async/await 的例子：
-- -------------------- ---- -------
----- -------- ----------- -
----- -------- - ----- ----------------------------------------------
-- ------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- --- -------------- -------- --- --- -----
-
-
----- -------- ------ -
--- -
----- ---- - ----- ------------
------------------
- ----- ------- -
---------------------
-
-
-------在上面的例子中，我们定义了一个名为 fetchData 的 async 函数，这个函数使用 fetch API 来获取 GitHub 上的用户信息。如果请求成功，我们将返回的 response 转换成 JSON 数据，并返回这个 JSON 数据。如果请求失败，我们将抛出一个错误。
在 main 函数中，我们使用 try/catch 语句来捕获 fetchData 函数中可能出现的错误，并进行处理。如果 fetchData 函数返回的是一个 resolved 状态的 Promise，我们将获取返回值并输出它。如果 fetchData 函数返回的是一个 rejected 状态的 Promise，我们将捕获这个错误，并输出错误信息。
总结
在本文中，我们介绍了 async/await 的基本用法，以及使用 async/await 编写异步代码的一些注意事项。使用 async/await，我们可以更加方便地编写异步代码，并且避免了回调地狱的问题。如果你还没有使用 async/await，不妨试着将它应用到你的项目中，相信它会给你带来很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660fa6b9d10417a22203fb52