引言
在 JavaScript 的世界中，异步操作是非常普遍的。从发起 HTTP 请求到响应结果，到异步读取本地文件等等，这些异步操作需要我们用回调函数或者 Promise 来处理。虽然 ES6 已经引入了 Promise，但是在处理复杂异步操作时，Promise 仍然存在一些缺陷。于是，ES8 推出的 async 函数和 await 操作符成为了 Promise 的补充，用来更好地处理异步操作。本篇文章将重点介绍 ES8 新特性中的 async 函数和 await 操作符，并结合示例代码详细讲解其使用方法和注意事项。
async 函数
async 函数是一个返回 Promise 的异步函数（async 函数可以自己定义 Promise 的 then() 方法并返回 Promise）。在 async 函数内部，我们可以直接使用 await 操作符等待一个 Promise 对象的完成。如下所示：
----- -------- --------- - ----- ---- - ----- ------------- ------ ------------ -
在上面的示例中，我们定义了一个异步函数 getData()，这个函数返回一个 Promise 对象，await fetch('url') 表示在这个 getData() 函数中等待请求 URL 的数据返回完成。需要注意的是，await 关键字只能出现在 async 函数内部。
async 函数的返回值
需要注意的是，async 函数的返回值总是一个 Promise 对象。如果 async 函数没有显式返回一个 Promise，则 JavaScript 引擎会自动将其作为一个已经使用 resolved 值解决的 Promise 对象返回。如果返回值为一个非 Promise 对象，则 JavaScript 引擎会将其包装在 resolved 值解决的 Promise 对象中返回。
async 函数实例
如下所示，使用 async 函数获取数据的实例：
----- -------- ----------- - --- -------- - ----- ---------------------------------------- --- ---- - ----- ---------------- ------ ----- - --------------------------------- - ------------------------- ---
最终会输出人物姓名：Luke Skywalker。
await 操作符
await 操作符可以用来等待 Promise 对象的完成，只能出现在 async 函数内。如果一个 Promise 对象被传递给一个 await 操作符，则 await 将等待 Promise 对象的完成，并返回其解决值。
多个 await 操作符
可以在 async 函数中使用多个 await 操作符，它们将按顺序同步执行。如下所示：
----- -------- ---------- -
--- --------- - ----- --------------------------------------
--- ----- - ----- -----------------
--- --------- - ----- -----------------------------------------
--- ----- - ----- -----------------
------ -
------- ------
---------- -----
-
-
-------------------------------- -
-------------------------- ------------------
---最终会输出两个资源链接的 JSON 内容。
注意事项
async 函数错误处理
在 async 函数中抛出异常会导致返回的 Promise 对象被拒绝。需要注意的是，如果你在 async 函数中使用一个 try/catch 块来捕获异常，则返回的 Promise 对象将被解决，而不是拒绝。如下所示：
----- -------- ---------- -
--- -
--- --------- - ----- --------------------------------------
--- ----- - ----- -----------------
--- --------- - ----- -----------------------------------------
--- ----- - ----- -----------------
------ -
------- ------
---------- -----
-
- ----- ------- -
---------------------
-
-
-------------------------------- -
--------------------
---在上面的例子中，如果出现异常，则错误信息会被输出到控制台上并且 Promise 对象仍将正确解决，打印对应的结果。
Promise.all() 与 await 操作符
如果有多个异步操作需要同时执行，可以使用 Promise.all() 方法来执行并行操作。下面是使用 Promise.all() 和 await 操作符执行两个异步函数的示例：
----- -------- -------------- ---- -
----- ------------ - ---------------------------------------------
----- ------------ - ---------------------------------------------
----- ----------- ---------- - ----- -------------------------- --------------
---------------- --------- -- ---------------------------- ------------------
------ - ------ ---------- ------ --------- --
-
------------ ------------------------ -
------------------------- --------------
---在这个示例中，我们使用了 Promise.all() 方法将两个异步请求按顺序执行，并使用 Promise.all() 方法将结果转换为 json 对象。需要注意的是，在 Promise.all() 中传递的 Promise 对象数组返回的是具有解决值的 Promise 对象数组。
结论
在异步操作变得越来越普遍的时代，学会使用 ES8 新特性 async 函数和 await 操作符来处理异步操作能够更加有效地管理异步代码的错误，简化代码逻辑，并提高代码的可读性和维护性。使用上文中介绍的示例代码和注意事项能帮助读者更好地理解和应用 async 函数和 await 操作符。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6735c58d0bc820c58250640c