ES6总结 16- Generator

ES6学习总结是自己在学习过程中的总结，记笔记就是为了督促自己学习和复习，好记性不如烂笔头。如果有错误，感谢指出。

Generator

为异步编程的一种解决方案
next函数的用法

yield*的语法

genertaor基本定义

在function后面加一个*符号，通过next一步步执行yield的代码，达到一个异步操作的过程

{
  // genertaor基本定义
  let tell=function* (){
    yield 'a';
    yield 'b';
    return 'c'
  };

  let k=tell();

  console.log(k.next());
  console.log(k.next());
  console.log(k.next());
  console.log(k.next());
}

Generator作为遍历器的返回值

{
  let obj={};
  obj[Symbol.iterator]=function* (){
    yield 1;
    yield 2;
    yield 3;
  }

  for(let value of obj){
    console.log('value',value);
  }
}

Generator状态机

事物3种状态循环
如果想运行需要装babel插件

  let state=function* (){
      while(1){
        yield 'a';
        yield 'b';
        yield 'c';
      }
    
  };
  let status=state();
  console.log(status.next());
  console.log(status.next());
  console.log(status.next());
  console.log(status.next());

Generator语法糖

  let state=async function(){
      while(1){
        await 'a';
        await 'b';
        await 'c';
      }
    
  };
  let status=state();
  console.log(status.next());
  console.log(status.next());
  console.log(status.next());
  console.log(status.next());

应用1：抽奖

抽奖次数递减

{
  let draw=function(count){
    //具体抽奖逻辑
    console.info(`剩余${count}次`)
  }

  let residue=function* (count){
    while (count>0) {
      count--;
      yield draw(count);//执行具体抽奖逻辑
    }
  }

  let star=residue(5);//假设后台传来抽奖次数5
  let btn=document.createElement('button');
  btn.id='start';
  btn.textContent='抽奖';
  document.body.appendChild(btn);
  document.getElementById('start').addEventListener('click',function(){
    star.next();
  },false)
}

应用2：长轮询

如服务端某一个数据状态定期发生变化，客户端需要定期去取这个状态：1.web Socket；2.长轮询

{
  // 长轮询
  let ajax=function* (){
    yield new Promise(function(resolve,reject){
      setTimeout(function () {//模拟接口
        resolve({code:0})//resolve({code:1})
      }, 200);
    })
  }

  let pull=function(){
    let genertaor=ajax();
    let step=genertaor.next();//返回一次查询结果
    step.value.then(function(d){//step.value就是promise实例 查询结果
      if(d.code!=0){//如果不是最新的
        setTimeout(function () {
          console.info('wait');
          pull()
        }, 1000);
      }else{
        console.info(d);
      }
    })
  }

  pull();
}