学习笔记：ES6之Generator

来源：互联网发布：怪物猎人ol mac 编辑：程序博客网时间：2024/05/19 17:04

（1）基本概念

异步编程的一种解决方案
（a）genertor的基本定义
lettell=function*(){
yield'a';
yield'b';
return'c';
};
letk=tell();
console.log(k.next());
console.log(k.next());
console.log(k.next());
console.log(k.next());

（2）generator与Iterator接口的关系

letobj={};
//创建一个接口
obj[Symbol.iterator]=function*(){
yield1;
yield2;
yield3;
};
for(letvalueofobj){
console.log(value);
}

（3）状态机

letstate=function*(){
while(1){
yield'a';
yield'b';
yield'c';
}
};
letstates=state();
console.log(states.next());//a
console.log(states.next());//b
console.log(states.next());//c
console.log(states.next());//a
console.log(states.next());//b

（4）语法糖：

async ---实现方式与上面一样
letstate= async function(){
while(1){
await'a';
await'b';
await'c';
}
};
letstates=state();
console.log(states.next());//a
console.log(states.next());//b
console.log(states.next());//c
console.log(states.next());//a
console.log(states.next());//b

//抽奖
letdraw=function(count){
//具体抽奖逻辑
console.info(`剩余${count}次`)
};
letresidue=function*(count){
while(count>0){
count--;
yielddraw(count);
}
};
letstar=residue(5);
letbtn=document.createElement('button');
btn.id='start';
btn.textContent='抽奖';
document.body.appendChild(btn);
document.getElementById('start').addEventListener('click',function(){
star.next();
},false);

（5）长轮询：

客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。

letajax=function*(){
yield newPromise(function(resolve,reject){
setTimeout(function(){
resolve({code:0});
},200);
})
};
letpull=function(){
letgenerator=ajax();
letstep=generator.next();
step.value.then(function(d){
if(d.code!=0){//长轮询的查询
setTimeout(function(){
console.log('wait');
pull();
},1000);
}else{
console.log(d);
}
})
};
pull();

（6）next函数的用法

（7）Yield*的语法

阅读全文

0 0