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