Generator函数

基本概念

Generator 是ES6的一种异步编程结局方案。
状态机 (封装了多个内部状态 ) 遍历器对象生成

 function* helloWorldGenderator() {
        yield 'hello';
        yield 'world';
        return 'ending';
    }
    var hw=helloWorldGenderator();

有两个状态 hw是指向一个内部状态对的指针对象

    function* helloWorldGenderator() {
        yield 'hello';
        yield 'world';
        return 'ending';
    }
    var hw=helloWorldGenderator();
    console.log(hw.next())  //{done:false value:"hello"}
    console.log(hw.next())  //{done:false value:"hello"}
    console.log(hw.next()) //{done:true value:"hello"}

生成的遍历器之间彼此不受影响

   function* g() {
    var o=1;
     yield o++;
     yield o++;
     yield o++;
   }
   var gen=g();
   console.log(gen.next())   //1
   var xx=g();
   console.log(xx.next())  //1
   console.log(gen.next())  //2
   console.log(xx.next())   //2

当调用next() 方法的时候 从上一个yield开始执行 遇到yield就会暂停执行 并返回yield后边的值

使用 for of方法自动可以遍历 遍历器对象

 function* g() {
       yield 1;
       yield 2;
       yield 3;
       yield 4;
       yield 5;
       return 6;
   }
   let a=g();
  for(let i of a){
      console.log(i)  //1 2 3 4 5
  }

实现菲薄齐纳函数

function* ff() {
      let [prev,curr]=[0,1];
      for(;;){
          [prev,curr]=[curr,prev+curr];
          console.log('---------')
          yield  curr;
      }
  }
  for(let n of ff()){
      if(n>100) break
      console.log(n)
  }

状态机

ES5版本的状态机

 var ticking=true;
    var clock=function () {
        if(ticking){
            console.log('Tick');
        }else{
            console.log('Tock');
        }
        ticking=!ticking
    }
    setInterval(clock,1000)

ES6版本的状态机

  function* Clock () {
        while (true){
            console.log("111")
            yield ;
            console.log("222")
            yield ;
        }
    }
    var cc=Clock();
    setInterval(function () {
        cc.next()
    },1000)

使用Generator函数实现异步操作

使用例子:在服务器端有3个文件 a.html b.html c.html 现在前端需要读到这三个文件的内容才可以继续执行操作。

  $.get("a.json",function (data) {
        console.log(data)
        $.get("b.json",function (data) {
            console .log(data)
            $.get("c.json",function (data) {
                console.log(data)
                //执行前端代码
            })
        })
    })

异步回调函数的地域

 function request(url) {
        $.get(url,function (response) {
            it.next(response);
        })
    }
    function* ajaxs () {
        var i=0;
        console.log(++i,yield request('a.json'))
        console.log(++i,yield request('b.json'))
        console.log(++i,yield request('c.json'))
    }
    var it=ajaxs();
     it.next();

使用Generator实现了异步请求三个文件 。
使用Generator同步化异步函数的几个步骤
1、将异步代码的每一步都封装成一个普通的函数
2、定义一个生成器函数 把流程写进去
3、定义一个变量 赋值为遍历器对象生成器
4、变量名.next()

    原文作者:丹丹赵
    原文地址: https://segmentfault.com/a/1190000010987070
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞