在 ECMAScript 2017 (ES8) 中，引入了 async function，以简化异步操作的处理。在 ECMAScript 2020 (ES11) 中，async function 经历了一些重要的扩展和改进，这些扩展和改进极大地提高了 async function 的功能和使用性。本文将详细描述 ECMAScript 2020 中的 async function 扩展，包括如何使用新的 async function 功能，并提供示例代码和指导意义。
快速回顾 async function
在回顾 ECMAScript 2020 async function 的新特性之前，我们先简单回顾一下 async function 的基本功能和语法。
async function 类似于一种特殊的函数，它使用一个关键字 async 来声明，该关键字在函数定义之前。async function 可以使用 await 关键字等待一个异步函数执行完成，并将结果返回给调用者。下面是一个简单的示例：
-- -------------------- ---- ------- ----- -------- --------- - ----- -------- - ----- ------------------------------------------------------ ----- ---- - ----- ---------------- ------ ----- - ------------------- -- - ------------------ ---
在这个示例中，getData 函数使用了 async 关键字来声明。在函数内部，它使用了 await 关键字来等待异步请求完成。当请求完成并返回数据时，它会将数据作为结果返回给调用者。在此之后，我们可以在调用者中使用 .then() 方法来处理返回的数据。
ECMAScript 2020 中的 async function 扩展
top-level await
在 ECMAScript 2020 中，可以在模块级别上使用 await 关键字。这意味着我们可以在顶层代码中使用 await，以等待异步操作完成。这是一个非常重要的特性，因为它简化了异步操作和模块加载。
下面是一个简单的示例：
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
console.log(data);在这个示例中，我们使用了 top-level await，从而能够在顶层代码中使用 await 关键字来等待异步请求完成。在请求完成并返回数据后，我们可以进一步处理该数据。
需要注意的是，top-level await 只适用于模块级别上的代码，不能在函数级别上使用。
链式执行
在 ECMAScript 2020 中，可以在 async function 中使用 return 表达式来返回一个 Promise 对象。这意味着我们可以在 async function 中使用链式执行，从而减少了代码量并提高了可读性。下面是一个简单的示例：
-- -------------------- ---- -------
----- -------- --------- -
----- -------- - ----- -----------------------------------------------------
------ ----------------
-
---------
---------- -- -
------------------
--
------------ -- -
---------------------
---在这个示例中，我们使用了链式执行来处理异步操作。在 getData 函数中，我们返回了一个 Promise 对象，然后在外部使用 .then() 方法来处理该 Promise 的结果。
需要注意的是，如果在 async function 中使用 return 表达式返回一个值，那么该值将被包装在 Promise 对象中。
for-await-of 循环
在 ECMAScript 2020 中，可以使用 for-await-of 循环来迭代异步生成器。这个特性提高了异步操作的灵活性，让开发者能够更容易地处理异步操作并迭代异步数据流。下面是一个简单的示例：
-- -------------------- ---- -------
----- -------- ----------- -
----- -------- - ----- ----------------------------------------------------
----- ---- - ----- ----------------
------ -----
-
----- -------- ------------- -
--- ----- ------ ---- -- ------------ -
------------------
-
-
------------------------- -- -
---------------------
---在这个示例中，我们使用 for-await-of 循环来迭代异步生成器 fetchData()，并处理迭代的结果。使用 for-await-of 循环时，需要注意迭代的对象必须是一个异步生成器。
总结
在 ECMAScript 2020 中，async function 经历了一些重要的扩展和改进。其中，top-level await 让我们能够在模块级别上使用 await，从而简化了异步操作和模块加载；链式执行让我们能够在 async function 中使用 return 表达式返回一个 Promise 对象，从而使异步操作更加灵活；for-await-of 循环则让我们能够更容易地处理异步操作并迭代异步数据流。了解这些扩展并在项目中使用它们，可以提高开发效率并使代码更加简洁优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64786e8c968c7c53b04ae09b