做网站知名公司凤凰网台湾资讯

一、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自动化