什么是 Generator 和 Async/Await
在介绍 Generator 和 Async/Await 如何搭配使用之前，我们先了解一下这两种概念的含义。
Generator
Generator 是 ES6 中引入的一项新特性，是一种可以暂停和继续执行的函数，可以通过 yield 和 next 关键字控制函数的执行。Generator 的使用可以简化数据流控制和异步编程，实现更直观、可维护的代码。
function* sayHello() {
yield('Hello ');
yield('world!');
}
const gen = sayHello();
console.log(gen.next().value); // 输出 "Hello "
console.log(gen.next().value); // 输出 "world!"Async/Await
Async/Await 是 ES7 中引入的一种新的异步编程方式，可以使异步代码像同步代码一样直观易懂并且更易于维护。通过使用 async 和 await 关键字，可以避免传统的回调函数、Promise 等异步编程方式的复杂性和冗长性。
async function fetchUser() {
const response = await fetch('/user');
const user = await response.json();
return user;
}如何将 Generator 和 Async/Await 结合使用
在 Generator 和 Async/Await 两种方式中，都可以使用 yield 关键字来暂停执行，并等待某个事件完成之后再继续执行。这个特性使得 Generator 可以和 Async/Await 很好地结合使用，可以通过编写一个支持 yield 关键字的异步函数来实现更简洁的异步编程代码。
下面是一个实现异步延迟函数 sleep 的例子，可以借助 Generator 和 Async/Await 搭配使用：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- -- ------------------- -------
-
----- --------- ------------------ -
------------------ -- -----------
----- ------------
----- --
----- ------------
------------------- -- -----------
----- --
----- ------------
---------------- -- -----------
-
------ ---------- -
--- ----- ------ ----- -- ------------------- -
-------------------
-
-----在上面的例子中，异步函数 generateSequence 用到了 Generator 的语法，通过使用 yield 关键字控制了异步事件的执行顺序。for await...of 循环可以遍历 generateSequence 函数返回的所有值，等待异步事件完成之后再继续执行下一个值的生成并输出。
需要注意的是，for await...of 循环使用时需要添加 async 关键字以声明异步函数。此时，每个循环周期都会等待前一个异步事件的完成，再进行下一个循环周期的执行，从而实现异步事件按顺序执行的效果。
总结
通过将 Generator 和 Async/Await 结合使用，可以实现更加方便易懂的异步编程，避免了传统方式需要手动控制回调函数和 Promise 等异步事件的繁琐复杂性。实际开发中，可以运用上述技巧来简化异步事件的控制和执行，提高代码可维护性和可读性。
示例代码
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- -- ------------------- -------
-
----- --------- ------------------ -
------------------ -- -----------
----- ------------
----- --
----- ------------
------------------- -- -----------
----- --
----- ------------
---------------- -- -----------
-
------ ---------- -
--- ----- ------ ----- -- ------------------- -
-------------------
-
-----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648f3f5948841e9894d8e390