在前端开发中，异步编程是非常常见的。异步编程是指在程序执行过程中，不需要等待特定的任务完成就可以继续执行其他的代码。一些经典的异步编程方式包括回调函数，Promise 和 async/await。其中，ES6 的 Generator 函数也是一种实现异步编程的方式。
Generator 函数
Generator 函数是一种特殊的函数，它可以在函数执行过程中暂停，并在稍后恢复。这使得我们可以一步步地执行函数，而不是一次性地执行。在定义 Generator 函数时使用关键字 function 后加上一个星号（*），如下所示：
function* generator() {
// generator function body
}当我们调用 Generator 函数时，它会返回一个迭代器对象。我们可以使用 for...of 循环迭代这个对象，获取每个 yield 表达式生成的值，如下所示：
-- -------------------- ---- ------- --------- ----------- - ----- -------- ----- -------- - ----- -------- - ------------ --- ---- ---- -- --------- - ------------------ -- ---- --- ------- --- ------- -
yield 表达式是 Generator 函数的特殊语法，它指示函数暂停并返回一个值。在下一次调用迭代器的 .next() 方法时，函数会从暂停的地方继续执行。我们可以在 yield 表达式后面加上一个值来返回给下一个 .next() 方法调用，如下所示：
-- -------------------- ---- ------- --------- ----------- - ----- - - ----- -------- --------------- ----- - - ----- -------- --------------- - ----- -------- - ------------ ---------------- -- - ------ -------- ----- ----- - ------------------- -------- -- ----- ------- - ------ -------- ----- ----- - ---------------------- -------- -- -------- ------- - ------ ---------- ----- ---- -
yield 表达式的执行顺序很重要。在第一次调用 .next() 方法时，函数会执行到第一个 yield 表达式，并返回一个值。在第二次调用 .next() 方法时，函数会从第一个 yield 表达式继续执行，并运行到第二个 yield 表达式暂停。我们可以通过 .next() 方法的参数来向上一个 yield 表达式传递一个值。在最后一次调用 .next() 方法时，Generator 函数会执行到结束，并返回一个 undefined 值。
使用 Generator 实现异步编程
使用 Generator 函数实现异步编程的想法是，我们可以让 Generator 函数暂停，直到一个异步任务完成后再继续执行。我们可以通过 yield 表达式来暂停执行。在异步任务完成后，我们可以使用 .next() 方法来继续执行 Generator 函数。
下面的示例代码展示了如何使用 Generator 函数来实现异步编程：
-- -------------------- ---- ------- --------- ---------- - ----- ----- - ----- ---------------------------------------------------- ----- -------------- - ----------------- -- ---------------- ------ --------------- - ----- -------- - ----------- --------------- -------------- -- ---------------- ---------- -- ---------------------
在这个示例代码中，我们首先定义了一个 Generator 函数 getTodos，该函数通过 yield 表达式暂停执行，直到 fetch 异步任务完成并返回一个响应对象。在响应对象中，我们可以使用 .json() 方法将响应数据转换为 JSON 对象。在第二次调用 .next() 方法时，我们将数据传递给了 Generator 函数，并让它继续执行。在函数执行结束后，我们可以在 .then() 方法中获取函数的返回值 completedTodos。
总结
ES6 的 Generator 函数是一种非常强大的异步编程方式。它可以让我们用一种顺序的方式来编写异步代码，并配合 Promise 和其他异步 API 使用。对于一些复杂的异步任务，使用 Generator 函数可以让代码更加易于阅读和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b01b5968c7c53b0a74932