随着 Web 技术的不断发展和进步，JavaScript 作为前端编程语言迅速变得越来越重要。ECMAScript 标准则是 JavaScript 的核心语言规范之一，其每年都会发布新版本。在 ECMAScript 2020（也称为 ES11）中，引入了一个新的关键字 await，用于异步操作，使得 JavaScript 更加易于编写和维护，提供了更好的可读性和可维护性。
什么是 await 运算符？
在理解 await 运算符之前，我们需要先了解 JavaScript 异步操作的基础。异步操作实际上是一种非阻塞的操作，与主线程相互独立，可以在后台执行，同时不会阻塞浏览器或 Node.js 的主线程。异步操作一般都是以回调函数的形式存在，例如：
-------------------------------------- -------- ------ - -- ---- --
在上面的代码中，fetch 函数是一个异步函数，它的第二个参数是一个回调函数。当数据被获取到后，回调函数会被调用，以处理数据。
在 ECMAScript 2017（ES8）中，引入了一个新的关键字 async，用于异步操作的定义。async 函数会返回一个 Promise 对象，使得异步操作更加容易、直观了。
----- -------- ----------- -
----- -------- - ----- --------------------------------------
------ ----- ---------------
-
-----------
---------- -- -
-- ----
--在上面的代码中，fetchData() 是一个异步函数，它通过 await 运算符等待数据的返回，处理它并返回一个 JSON 对象。得到数据后，回调函数便可以轻松地处理数据。
使用 Generator 简化异步操作
尽管 async/await 使得异步操作更加方便和直观，但它在一定程度上还是具有限制性。例如，一个 async 函数只能通过一个异步操作来异步返回结果，即无法在一个 async 函数中同时执行多个异步操作。如果有多个异步操作需要执行，就需要定义多个 async 函数。这种情况下，Generator 可以提供一个简单而又灵活的解决方案。
在 JavaScript 中，Generator 是一种特殊的函数，它可以在函数执行的过程中暂停并记录当前的执行状态，然后在需要时恢复执行。Generator 可以通过 yield 关键字暂停函数的执行，并可以在下一次调用它的时候恢复执行，实现一些非常有趣的特性。
我们可以通过 Generator 函数和 yield 关键字等待多个异步操作，使得它们像同步操作一样按照顺序执行。以下代码展示了如何使用 Generator 函数来模拟异步操作的顺序执行：
--------- ----------- - ----- --------- - ----- --------------------------------------- ----- ----- - ----- ---------------- ----- --------- - ----- --------------------------------------- ----- ----- - ----- ---------------- ------ ------- ------ - ----- --- - ----------- ----- -------- ---------------- - ----- --------- - ----- ---------------- ----- ----- - ----- ---------------- ----- --------- - ----- --------------------- ----- ----- - ----- ---------------- ----- ------ - --------------------- ------ ------ - ---------------------------- -- - -- -- ------ --
在上面的代码中，我们定义了一个 Generator 函数 fetchData()，它包含两个异步操作，等待数据的返回。在 handleFetch() 函数中，我们使用 await 运算符来等待 Generator 函数的执行结果，并逐步获取数据。
结论
await 运算符、async 函数和 Generator 函数是 JavaScript 异步编程的重要组成部分，它们提供了强大的功能来简化异步操作并增强 JavaScript 代码的可读性和可维护性。我们可以使用它们来编写更加直观且易于维护的代码，同时为我们提供更大的灵活性和可扩展性。
在使用它们时，我们应该遵守一些基本理念，例如：
- 尽量只使用
Generator或async/await中的一种； - 合理使用
Generator和async/await，使异步操作按照我们的期望顺序执行； - 始终使用 Promises 链来处理错误和异常情况。
通过合理地使用 await 运算符和 Generator 函数，我们可以更加轻松地构建强大的异步操作，支持复杂的业务逻辑，并为我们提供直观，易于维护的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672cb2a9ddd3a70eb6d907f9