随着 JavaScript 应用场景的不断扩大，对 JavaScript 异步编程的需求也越来越强烈。传统的回调函数和 Promise 已经不能满足在复杂的异步场景下的需求，让人头疼不已。ES8 (即 ES2017) 中引入了 async/await，帮助我们更轻松地处理异步操作。本文将详细介绍 async/await 的新特性、学习和指导意义，并提供示例代码。
Async 和 Await 是什么？
Async 和 Await 是 ES8 中的新语法，能够使异步操作看起来像同步操作。这是通过将异步操作的结果封装在一个 Promise 对象中，以简化异步编程的方法。Async 函数表示要执行异步操作，而 Await 表示等待异步操作的结果。在函数前加上 async 关键字，称之为异步函数。
Async 函数
异步函数是一个用 async 关键字声明的函数。它的返回值是一个 Promise 对象。在函数内部使用 await 关键字可以等待一个 Promise 的完成，并返回 Promise 执行完成后的结果。
下面是一个简单的示例：
----- -------- --------- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------ ----- - ----------------------------
上面的代码中，我们使用了 fetch API 发起了一个网络请求，并使用 await 关键字等待数据响应。fetch 方法返回一个 Promise 对象，response 对象也是一个 Promise 对象，await 等待 Promise 的 resolve 后返回结果，此处得到的是 JSON 数据。
注意：await 关键字只能在 async 函数内部使用。
Await 关键字
在 async 函数内部，可以使用 await 关键字等待 Promise 的完成。如果 await 后面是一个 Promise 对象，则 await 将暂停函数执行，等待 Promise 的完成，并返回 Promise 执行完成后的结果。
下面是一个简单的示例：
----- -------- --------- - --------------- ------- -------- ----- ------ - ----- ------------------------ ------ -------------------- - ----------
上面的代码中，我们在 async 函数内部使用 await 关键字等待 Promise 的完成。Promise.resolve 方法会立即返回已完成的 Promise 对象。执行 example 函数时，先输出 '等待 Promise 完成...'，等待 Promise 完成后输出 'Promise 完成！'。
Async 函数中的错误处理
在使用 async/await 时，可能会遇到错误。如果使用 try/catch 处理错误，则可以更好地控制错误情况。async 函数返回的 Promise 对象将根据返回值和抛出的异常自动解决或拒绝。如果 async 函数中抛出了一个错误，则返回的 Promise 对象将被拒绝，并抛出异常。如果 async 函数返回的结果是一个 Rejected Promise 对象，则返回的 Promise 对象也将被拒绝。
下面是一个使用 try/catch 处理错误的简单示例：
----- -------- --------- -
--- -
----- ------ - ----- ------------------ ----------------
- ----- ------- -
---------------------
-
-
----------上面的代码中，使用 await 等待 Promise 抛出错误。try/catch 会捕获该错误，并输出错误信息。
使用 Async 和 Await 的优点
使用 async/await 的主要优点是代码可读性更高，易于理解和维护，避免了 Promise 成为回调地狱的最大优势。由于 async/await 可以同时处理多个异步调用，因此可以提高效率和性能。在处理异步操作的情况下，它们可以简化代码和错误处理，使代码更加可靠。
结论
Async/await 是 ES8 中最重要的新特性之一，具有对高效和可读性的重大影响。它使异步代码更加优雅，更容易理解和维护。需要注意的是，使用 async/await 时需要配合 Promise 对象使用，并使用 try/catch 处理错误。在复杂的异步编程场景中，async/await 将是非常有用的工具。
参考代码
下面是一个使用 async/await 的示例代码，用于从 Github API 检索最受欢迎的 Javascript 仓库，并输出一些信息。
-- -- ----- --------
----- ----- - -----------------
-- -- ------ --- -- ---------- --
----- -------- -------------------- -
----- --- - -----------------------------------------------------------------------------------------
----- -------- - ----- ---------------
----- ----- - ---------------------------- ----
------ ------
-
-- ---------
----- -------- ------------ -
----- ----- - ----- ---------------------
------------------ ---------- -----
------------------ -- -
------------------------- ------------------------- ---------
---
-
-------------输出结果为：
----- ---------- --- ------------ ------- ------ --- ------- ------ ----- ------- ------ ------------ ------ ------ ---- ------ ------ --- ------ ------ ----- ------ ------ ---------------- ------ ------ ----- ------ ------ -------- ------ ------
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67389946317fbffedf118e4f