在 JavaScript 中，异步编程是非常常见的。由于 JavaScript 的单线程特性，如果在一个异步任务完成之前我们需要执行大量的同步任务，那么这些同步任务将会阻塞我们的异步任务，降低网站或应用程序的性能。为了解决这个问题，JavaScript 开发人员必须依靠回调函数、Promise、Generator 等编写异步代码，然而这些方法并不总是简单和直观。
幸运的是，ES8 引入了 async/await 语法，这使得编写异步代码更加容易和直观。async/await 是基于 Promise 的，可以用简单且可读性强的方式编写异步代码，同时还能够捕获和处理错误。
async 函数和 await 关键字
async 函数是一个可以包含 await 关键字的函数，它返回一个 Promise 对象。当调用 async 函数时，它不会立即执行，而是返回一个 Promise 对象，即使函数中没有使用 await 关键字。
await 关键字只能在 async 函数内部使用，它可以暂停 async 函数的执行，等待 Promise 对象的状态发生改变。当 Promise 对象的状态变为 resolved 后，await 表达式返回 Promise 的结果并继续执行 async 函数的下一条语句。
下面是一个简单的 async/await 示例：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- ----------------------------------------------------------
----- ---- - ----- ----------------
------------------------
- ----- ------- -
-------------------
-
-
-----------在上面的例子中，async 函数 getPost 获取一个 ID 为 1 的帖子的标题。函数使用 await 关键字等待 fetch() 方法返回一个 Promise 对象，并使用 await 等待解析 JSON 数据的 Promise。如果任何一个异步操作失败，则会调用 catch() 方法输出错误。
使用 async/await 处理多个异步操作
一个常见的使用场景是，我们需要对多个异步操作进行处理，或者等待每个操作完成后再执行下一个异步操作。使用 async/await 语法可以更容易地实现这些操作。
下面是一个例子，在获取用户数据之后，使用 getUserPosts() 函数获取用户的帖子列表，并以标题的顺序输出所有帖子。
-- -------------------- ---- -------
----- -------- -------------------- -
--- -
----- ------------ - ----- --------------------------------------------------------------
----- ---- - ----- --------------------
------------------ --- ---- ----------------------
----- ------------- - ----- ---------------------------------------------------------------------
----- ----- - ----- ---------------------
------------------ -- -
------------------------
---
- ----- ------- -
-------------------
-
-
----------------在上面的例子中，getUserPosts() 函数使用 await 关键字等待先前的异步操作完成，然后使用 Promise 解析帖子列表并将帖子标题存储在数组中。最后，forEach() 函数用于输出每个帖子的标题。
结论
async/await 语法是 JavaScript 的一个伟大的改进，可以让我们更加轻松地编写异步代码，并帮助我们更好地管理异步操作。通过完全理解 async/await 语法，可以避免许多与异步编程相关的问题。
当然，async/await 也只是一种语法糖，在实现异步编程时，我们还应该继续利用 Promise 和其他工具。了解这些基本知识可以帮助你更好地处理 JavaScript 异步编程的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67502007fbd23cf8907397e2