深度理解 ES12 中的 Generator：如何在异步编程中应用
随着 JavaScript 不断发展，异步编程成为了一个必不可少的技能。在异步编程中，经常需要处理一系列需要等待的操作，这时候就需要运用 Generator 函数来进行控制。
一、什么是 Generator？
Generator 是 ES6 中的一个新特性，可以被看作是一个状态机，所有的 Generator 都支持 next、return 和 throw 这三个方法。在调用next()的时候，就会执行 Generator 函数，直到遇到 yield，进入暂停状态，返回 yield 后的值。Generator 函数调用 return 方法时，会结束并返回相应的值。throw 方法则是抛出错误。
例子：
function* foo(){
yield 1;
yield 2;
yield 3;
return 4;
}
let f = foo();
console.log(f.next());// {value: 1, done: false}
console.log(f.next());// {value: 2, done: false}
console.log(f.next());// {value: 3, done: false}
console.log(f.next());// {value: 4, done: true}二、Generator 在异步编程中的应用
我们在异步编程中常常使用回调函数，但是随着业务代码越来越复杂，回调函数嵌套格式越来越深，导致代码可读性、可维护性变差。而 Generator 函数结合 Promise 对象可以解决这个问题。通过将异步操作写成 yield 函数，而不是直接使用回调函数，避免了回调函数嵌套。
例子：
function* test(){
try{
const b = yield new Promise((resolve, reject) => {
setTimeout(() => {//延迟2秒执行异步操作
resolve(20)
},2000)
})
console.log(b)
}catch (e) {
console.log(e)
}
}
let a = test()
let res1 = a.next()
res1.value.then((res)=>{
a.next(res)
})我们在该例中使用 setTimeout 模拟一个耗时 2 秒的异步操作，我们让Generator 函数等待这个异步操作，这样就避免了回调函数嵌套，提高了代码的可读性和可维护性。
三、Generator 可以多次暂停和恢复
因为 Generator 函数在 yield 前的状态会被保存下来，所以可以反复使用。
例子：
function* gen(){
console.log(1)
yield;
console.log(2)
yield;
console.log(3)
yield;
console.log(4)
}
const g = gen()
g.next()// 1
g.next()// 2
g.next()// 3
g.next()// 4四、Generator 函数可以作为对象的属性
我们可以把一个 Generator 函数存储在一个对象上，并且在调用对象的方法时利用 yield 进行异步编程
例子：
const obj = {
*gen(){
const a = yield 1
console.log(a)
const b = yield 2
console.log(b)
const c = yield 3
console.log(c)
}
}
const objGen = obj.gen()
objGen.next()// 1 返回 {value:1, done: false}
objGen.next(11)//11 返回 {value: 2, done: false}
objGen.next(22)//22 返回 {value: 3, done: false}
objGen.next(33)//33 返回 {value: 'undefined', done: true}在这个例子中，我们将 gen 方法作为对象 obj 的属性，然后调用 gen 方法中的 yield，控制函数执行先后顺序。
五、Generator 函数使用场景
1、异步编程时的流程控制 2、数据的惰性求值 3、处理无限循环中的异步操作 4、实现迭代协议
六、总结
在异步编程中，Generator 函数的应用可以使代码更加清晰易懂并避免回调函数嵌套，提高了代码的可读性和可维护性。同时，Generator 的多次暂停和恢复特性以及可以作为对象的属性，也拓宽了 Generator 可以应用的场景，非常具有指导意义。
希望这篇文章能给大家带来一些帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6590c89eeb4cecbf2d60cb7d