ES6生成器(Generator)

一、function*

概念简介：function* - JavaScript | MDN (mozilla.org)

function* 声明创建一个绑定到给定名称的新生成器函数。生成器函数可以退出，并在稍后重新进入，其上下文（变量绑定）会在重新进入时保存。

1.1 yield

yield 关键字用于暂停和恢复生成器函数。MDN：yield - JavaScript | MDN (mozilla.org)

1.2 yield*

yield* 表达式用于委托给另一个generator 或可迭代对象。MDN:yield* - JavaScript | MDN (mozilla.org)

二、function*的应用场景

2.1 Generator函数解决回调地狱（简单从网上扒个demo）

function one() {
    setTimeout(() => {
        console.log(1);
        iterator.next();
    }, 1000);
}
 
function two() {
    setTimeout(() => {
        console.log(2);
        iterator.next();
    })
}
 
function three() {
    setTimeout(() => {
        console.log(3);
        iterator.next();
    })
}
 
function *gen() {
    yield one();
    yield two();
    yield three();
}
 
let iterator = gen();
iterator.next();

2.2 长轮询（转载于：从零开始学_JavaScript_系列（58）——Thunk函数-CSDN博客）

 场景：服务端的某一个数据状态定期变化，前端需要定时的去服务端取这个状态

对于这种场景，有两种解决方案

1）长轮询（定时器，定时访问接口）

2）websocket（浏览器兼容性不好）

3）generator

{
	let ajax=function* (){
		yield new Promise(function(resolve,reject){
			setTimeout(function(){
				resolve({code:0})
			},200)
		})
	}
 
	let pull=function(){
		let generator=ajax()
		let step=generator.next()
		step.value.then(function(d){
			if(d.code!=0){
				setTimeout(function(){
					console.log('wait')
					pull()
				},1000)
			}else{
				console.log(d)
			}
		})
	}
 
	pull()
}

 输出结果为

{code: 0}

将resolve({code:0})中code改成1,会一直轮询，输出结果为

wait

wait

wait

...

文章中的Thunk介绍了如何Generator自动化