概述
ES8 是 ECMAScript 的第 8 个版本，它在 Async 函数与 await 表达式上做出了显著的改进。Async 函数是一种基于 Promise 的语法糖，能够使异步代码更加易读、易写。Await 表达式则是 Async 函数中的一种关键字，能够让 JavaScript 停止执行，直到一个 Promise 被 resolve 或 reject，从而在代码中处理异步控制流。
Async 函数
Async 函数在语法上类似于 Generator 函数，使用 async 关键字来声明。Async 函数自动返回一个 Promise 对象，并且能够在函数中使用 await 表达式来等待 Promise 对象的解决或拒绝。
下面是一个示例 Async 函数：
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await response.json();
return data;
}在这个示例中，我们使用了 fetch 函数来异步获取一个远程 JSON 文件，并使用 await 语法等待 Promise 对象的解决。注意，我们可以在 Async 函数中使用 return 语句来返回 Promise 对象的值，这将在 Promise 对象解决时执行。
我们也可以使用 Promise.all 函数来同时运行多个 Async 函数：
-- -------------------- ---- ------- ----- -------- ----------- - ----- ------- ------ - ----- ------------------------ ------------- ------------------ ------- - ----- -------- ---------- - ----- -------- - ----- ---------------------------------------------------- ----- ---- - ----- ---------------- ------ ----- - ----- -------- ---------- - ----- -------- - ----- ---------------------------------------------------- ----- ---- - ----- ---------------- ------ ----- -
在这个示例中，我们使用 Promise.all 函数来同时并发获取多个远程 JSON 文件，并分别等待它们解决。
Await 表达式
Await 表达式出现在 Async 函数中，用于等待一个 Promise 对象的结果。当 Await 表达式出现时，JavaScript 执行中断，直到 Promise 对象被解决或拒绝，然后继续执行后面的代码。
下面是一个简单的示例，演示了 Await 表达式的作用：
-- -------------------- ---- -------
----- -------- --------- -
----- ----------- - --- ----------------- -- -
------------- -- -
------------- ------
-- ------
---
----- ---- - ----- ------------
------------------
------ -----
-
----------在这个示例中，我们使用 Promise 延迟 2 秒钟以模拟异步请求，随后我们等待 Promise 对象完成，并打印输出结果。
结论
Async 函数和 Await 表达式提供了一种更加简洁易读的方式来处理异步流程，并能够使代码更加易于维护。虽然它们是相对新的语言特性，但它们已经广泛被支持，并且在现代 JavaScript 和 Web 开发中已经变得日益重要。学习使用 Async 函数和 Await 表达式是每个现代前端开发人员必须掌握的基本技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6721ed662e7021665e096df0