随着 JavaScript 的不断发展，每年都会有新的 ECMAScript 版本推出。在 ES6 中，引入了 generators 和 promises，这些新特性让异步编程更加容易和优雅。而在 ES8 中，async/await 模式的出现，更是让异步编程变得更加简单和直观。在 ES2020 中，这些特性又有了新的变化和增强。
Generators
Generators 是一种可暂停执行的函数，它可以在函数内部暂停执行，并在稍后恢复执行。在 ES6 中，我们可以使用 generators 来编写更加简洁和可读性更高的异步代码。
下面是一个简单的例子：
--------- ----------- - --------------------- ----- -- ---------------------- ----- -- ------------------- - ----- --- - ------------ ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ ---------- ----- ---- -
在这个例子中，我们定义了一个 generator 函数，它包含了三个 console.log 语句和两个 yield 语句。当我们执行 gen.next() 时，函数会执行到第一个 yield 语句，然后暂停执行并返回 { value: 1, done: false }。当我们再次执行 gen.next() 时，函数会从上次暂停的地方继续执行，并执行到第二个 yield 语句，然后再次暂停执行并返回 { value: 2, done: false }。最后，当我们再次执行 gen.next() 时，函数会继续执行到最后一个 console.log 语句，并返回 { value: undefined, done: true }，表示函数执行完毕。
Generators 可以让我们在异步编程中避免回调地狱，使代码更加优雅和易于维护。例如，我们可以使用 generators 来解决异步请求的依赖问题：
--------- ----------- -
----- ------- - ----- ---------------------------------------
----- ------- - ----- ---------------------------------------
----- ------- - ----- ---------------------------------------
-------------------- -------- ---------
-
-------- -------------- -
----- --- - ------------
-------- -------------------- -
-- ------------- -
------ ------------------------------
-
------ -----------------------------
--------- -- -----------------------------
-
------ -------------------------
-
---------------在这个例子中，我们定义了一个 generator 函数，它包含了三个异步请求，并在请求完成后打印结果。我们还定义了一个 run 函数，用来执行 generator 函数。在 run 函数中，我们首先获取 generator 实例，然后定义一个 handleResult 函数，用来处理每个异步请求的结果。当请求完成后，我们通过 Promise.resolve 将结果包装成 Promise 对象，并使用 gen.next(res) 继续执行 generator 函数，直到函数执行完毕。
Async/Await
在 ES8 中，async/await 模式的出现，更是让异步编程变得更加简单和直观。使用 async/await 可以让我们像编写同步代码一样编写异步代码。
下面是一个简单的例子：
----- -------- --------- - ----- ------- - ----- --------------------------------------- ----- ------- - ----- --------------------------------------- ----- ------- - ----- --------------------------------------- -------------------- -------- --------- - ----------
在这个例子中，我们定义了一个 async 函数，它包含了三个异步请求，并在请求完成后打印结果。使用 async/await，我们可以非常直观地编写异步代码，而不需要使用回调函数或者 Promise 链式调用。
在 ES2020 中，async/await 也有了新的变化和增强。我们现在可以使用 try/catch 块来捕获异步函数中的错误，以及使用 Promise.allSettled 来等待多个异步请求全部完成。
下面是一个使用 try/catch 块的例子：
----- -------- --------- -
--- -
----- ------- - ----- ---------------------------------------
----- ------- - ----- ---------------------------------------
----- ------- - ----- ---------------------------------------
-------------------- -------- ---------
- ----- ------- -
---------------------
-
-
----------在这个例子中，我们使用 try/catch 块来捕获异步函数中的错误，并打印错误信息。
下面是一个使用 Promise.allSettled 的例子：
----- -------- --------- -
----- ------- - ----- --------------------
---------------------------------------
---------------------------------------
--------------------------------------
---
---------------------
-
----------在这个例子中，我们使用 Promise.allSettled 来等待多个异步请求全部完成，并打印所有请求的结果。使用 Promise.allSettled，我们可以保证即使其中一个请求出错，也不会影响其他请求的执行。
总结
JavaScript 中的 generators 和 async/await 模式是异步编程中非常强大和优雅的特性。在 ES2020 中，这些特性又有了新的变化和增强，使异步编程更加简单和直观。通过学习和掌握这些特性，我们可以编写更加优雅和易于维护的异步代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66167022d10417a22265fa91