在现代 Web 开发中，前端 JavaScript 成为了无法忽视的一部分。由于现代浏览器对 ES6 和更新版本的支持性不断提高，我们也有越来越多的选择来构建 JavaScript 应用程序。ES8 中加入了 Async 函数和 await 操作符，这些新特性被广泛认为是 JavaScript 完善异步编程的“圣杯”。在这篇文章中，我们将深入了解 Async 函数和 await 操作符及其在 JavaScript 中的应用。
Async 函数
Async 函数是在 ES8 中引入的一种新的函数类型。它们被设计用于简化异步编程方式，因为异步编程通常会导致代码可读性较差、易错、难以调试。Async 函数解决了这些问题，并提高了代码的可读性和可维护性。
Async 函数通过在函数前加上 async 关键字来定义。例如：
----- -------- ------------- - -- ------ -
Async 函数将返回一个 Promise 对象，该对象会在函数完成执行后自动解决。在函数完成前，我们可以使用 await 操作符等待异步操作的完成。现在，我们来看一下 await 操作符的具体用法。
await 操作符
await 操作符用于等待一个 Promise 对象的解决。在 Async 函数中使用 await 操作符可以简化代码，并让其更易于理解和跟踪。例如:
----- -------- --------- - ----- ---- - ----- ------------ -------------- -
代码中，await fetchData() 表示等待 Promise 对象 fetchData 解决，并将结果赋值给 data 变量。在解决 Promise 对象前，代码将被暂停。
需要注意的是，await 操作符只能在 Async 函数中使用。在 Async 函数外使用 await 操作符将会抛出语法错误。此外，await 操作符只能用于 Promise 对象。正因为如此，await 操作符在使用前需要先确认 Promise 对象是处于 Pending 状态下。
示例代码
让我们来看一些实际的代码，使用 Async 函数和 await 操作符读取一个远程 API 并在 Web 页面上展示数据的示例。
----- -------- ------------ -
--- -
----- -------- - ----- ----------------------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
--------------------- -------
-
-
----- -------- -------------- -
----- ----- - ----- -------------
-------------------- -- -
----- ------- - ------------------------------
----------------- - ----------
-----------------------------------
--
-首先，我们定义了一个 Async 函数 fetchUsers() 。它使用 Fetch API 发起一个异步请求，获取一个 JSON 格式的用户数据集。该函数使用 await 操作符等待 Fetch API 请求完成，并解决许多与异步操作相关的问题。
然后，我们定义了另一个 Async 函数 displayUsers() ，该函数使用 fetchUsers() 异步获取用户数据，然后在 HTML 页面上展示用户的名称。
在这个例子中，我们使用了很多 JavaScript 的新特性，包括箭头函数、模板字面量，还有 Async 函数和 await 操作符。这些特性让 JavaScript 代码更加易于编写和理解。
结论
Async 函数和 await 操作符是 JavaScript 异步编程的重要组成部分。它们可以大大简化异步代码的编写，并且可以提高代码的可读性和可维护性。如果你还没有尝试过这些新特性，请务必尝试一下，并且发现它们在编写 JavaScript 应用程序时的价值。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6704bd4ad91dce0dc8500e1a