前言
在 JavaScript 中，异步编程是非常常见的，尤其是在前端领域。在 ES10 中，Generator 和 Promise 成为了两个重要的工具，可以帮助开发者更加轻松地进行异步编程。本文将介绍 Generator 和 Promise 的基本概念，并结合代码示例详细地讲解它们的使用方法和注意事项。
Generator
什么是 Generator？
Generator 函数是一种特殊的函数，它可以在执行过程中暂停，并且可以同时返回多次结果。我们可以通过 function 关键字后面加上一个星号 (*) 来定义一个 Generator 函数。例如：
function* gen() {
yield 1;
yield 2;
yield 3;
}上面的代码定义了一个名为 gen 的 Generator 函数，在调用 gen() 后，它不会立即执行，而是返回一个特殊的遍历器对象，调用遍历器对象的 next() 方法，便可以依次获取函数中每一个 yield 关键字返回的值。
如何使用 Generator？
首先，我们需要明确一个概念：Generator 函数的执行状态是惰性的。也就是说，除非通过 next() 方法调用，否则函数体内的代码不会执行。
我们可以通过下面的代码来使用 Generator 函数：
-- -------------------- ---- ------- --------- ----- - ----- -- ----- -- ----- -- - ----- - - ------ ---------------------- ---------------------- ---------------------- ----------------------
上面的代码定义了一个名为 gen 的 Generator 函数，并在后面创建了一个遍历器对象 g。在遍历器对象上调用 next() 方法时，会执行函数体内的代码，第一次调用 next() 会返回 1，第二次调用返回 2，以此类推，直到函数体执行结束。
Generator 与异步编程
Generator 函数在异步编程中的应用非常广泛，我们可以将异步操作封装在 Generator 函数中，然后通过 yield 关键字暂停函数的执行，等待异步操作完成后再继续执行。
例如，我们可以通过下面的代码来实现一个加载图片的异步操作：
-- -------------------- ---- -------
-------- -------------- -
------ --- ----------------- ------- -- -
----- --- - --- --------
---------- - -- -- -------------
----------- - -- -- ---------- ------------- ---- ----- ---- ----------
------- - ----
---
-
--------- ----- -
----- ---- - ----- -------------------------------------------
----- ---- - ----- -------------------------------------------
--------------------------------
--------------------------------
-
----- - - ------
----- -- - ---------------
------------ -- -
----- -- - -------------------
------ ---
------------ -- -
-------------
------------ -- -
-------------------
--上面的代码中，我们定义了一个名为 loadImage 的异步加载图片函数，然后在 gen 函数中依次调用两次 loadImage 函数，等待它们完成后再把两张图片添加到文档中。在调用 gen 函数时，我们首先获取到第一个图片加载的 Promise 对象并通过 then() 方法来处理它的结果，然后再将结果传递给第二个 loadImage 函数并继续处理。最后，我们通过 g.next() 方法来恢复 gen 函数的执行，将两张图片添加到文档中。
Promise
什么是 Promise？
Promise 是一种异步编程模型，用于表示一个异步操作是否成功或失败。在 ES10 中，Promise 是语言内置对象，我们可以通过 new 关键字创建一个 Promise 对象并将一个异步操作封装在它内部。
一个 Promise 对象具有三种状态：pending（等待中）、fulfilled（已成功）和 rejected（已失败）。在异步操作完成后，Promise 要么处于 fulfilled 状态，要么处于 rejected 状态，并且无法从这两个状态转换到其他状态。
Promise 的基本用法
我们可以通过下面的代码来创建一个 Promise 对象：
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, Promise!');
}, 1000);
});上面的代码创建了一个 Promise 对象，并在内部封装了一个异步操作，异步操作在 1000 毫秒后返回一个字符串。在封装异步操作时，我们需要在 Promise 内部调用 resolve 和 reject 函数来标志异步操作的成功或失败。例如，调用 resolve('Hello, Promise!') 会表示异步操作成功并且返回 'Hello, Promise!'。
然后，我们可以通过 then() 方法来处理 Promise 中的结果：
p.then(result => {
console.log(result);
}).catch(err => {
console.error(err);
})上面的代码中，我们通过 then() 方法注册了一个回调函数，当 Promise 对象中的异步操作成功并返回结果时，我们在 then() 中获取到结果并处理它。如果 Promise 中的异步操作失败了，则会调用 catch() 方法中的回调函数来获取错误信息。
Promise 的链式调用
由于 Promise 对象具有链式调用的特点，我们可以通过 then() 方法链式调用多个回调函数来依次处理多个异步操作的结果。例如：
-- -------------------- ---- -------
----- -- - --- ----------------- ------- -- -
------------- -- -
-----------
-- ------
---
----- -- - -------------- -- -
--------------------
------ ------ - --
---
----- -- - -------------- -- -
--------------------
---上面的代码中，我们首先定义了一个名为 p1 的 Promise 对象，这个对象会在 1000 毫秒后返回 1。然后，我们利用 p1.then() 方法处理 p1 中的结果，并在回调函数中返回结果加一。这样，p2 就包含了 result + 1 的值。接着，我们再利用 p2.then() 方法处理 p2 中的结果，并直接打印出来。这样，我们便实现了两个异步操作的链式调用。
Generator 与 Promise 的混合使用
Generator 函数和 Promise 可以很好地结合使用，让我们更加方便地进行异步编程。我们可以通过 yield 关键字将异步操作封装在 Generator 函数中，然后通过 then() 方法来处理 Promise 中的结果。例如：
-- -------------------- ---- -------
-------- ------------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- -----
---------------- - -------
---------- - -- -- ----------------------
----------- - -- -- ---------- ------------- ---- ---- ---- ----------
-----------
---
-
--------- ----- -
----- ---- - ----- ---------------------------------------------------------
------------------
-
----- - - ------
----- - - ---------------
----------- -- --------------上面的代码中，我们在 gen 函数的第一行中调用了 loadData 函数，它返回了一个 Promise 对象。然后，我们在 yield 关键字后面等待异步操作完成，并通过 next() 方法将数据返回给 gen 函数。最后，我们通过 p.then() 方法和 g.next() 方法来实现 Generator 函数和 Promise 之间的通信。
小结
本文介绍了 ES10 中的 Generator 和 Promise，它们是 JavaScript 中的两个重要工具，用于实现异步编程。我们可以将异步操作封装在 Generator 函数中，然后通过 yield 关键字暂停函数的执行，等待异步操作完成后再继续执行。我们还可以通过 then() 方法链式调用多个回调函数来依次处理多个异步操作的结果。
在使用 Generator 和 Promise 进行异步编程时，我们需要注意两点：一是 Generator 函数的执行状态是惰性的，需要通过 next() 方法来调用；二是我们需要通过 then() 方法来处理 Promise 中的结果，并利用 g.next() 方法实现 Generator 函数和 Promise 之间的通信。
通过本文的介绍，希望读者能够更加熟练地掌握 Generator 和 Promise 的使用方法，并可以在实际的开发中运用它们来提高异步编程的效率。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67921097504e4ea9bd5e635c