Generator函數(shù)

warkiz 發(fā)布于2019-08-20 19:08 / 1872人閱讀

摘要：使用同步化異步函數(shù)的幾個步驟將異步代碼的每一步都封裝成一個普通的函數(shù)定義一個生成器函數(shù)把流程寫進去定義一個變量賦值為遍歷器對象生成器變量名

基本概念

Generator 是ES6的一種異步編程結(jié)局方案。
狀態(tài)機（封裝了多個內(nèi)部狀態(tài) ）遍歷器對象生成

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

有兩個狀態(tài) hw是指向一個內(nèi)部狀態(tài)對的指針對象

    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

當(dāng)調(diào)用next() 方法的時候從上一個yield開始執(zhí)行遇到y(tǒng)ield就會暫停執(zhí)行并返回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
  }

實現(xiàn)菲薄齊納函數(shù)

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)
  }

狀態(tài)機

ES5版本的狀態(tài)機

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

ES6版本的狀態(tài)機

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

使用Generator函數(shù)實現(xiàn)異步操作

使用例子：在服務(wù)器端有3個文件 a.html b.html c.html 現(xiàn)在前端需要讀到這三個文件的內(nèi)容才可以繼續(xù)執(zhí)行操作。

  $.get("a.json",function (data) {
        console.log(data)
        $.get("b.json",function (data) {
            console .log(data)
            $.get("c.json",function (data) {
                console.log(data)
                //執(zhí)行前端代碼
            })
        })
    })

異步回調(diào)函數(shù)的地域

 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實現(xiàn)了異步請求三個文件。
使用Generator同步化異步函數(shù)的幾個步驟
1、將異步代碼的每一步都封裝成一個普通的函數(shù)
2、定義一個生成器函數(shù) 把流程寫進去
3、定義一個變量賦值為遍歷器對象生成器
4、變量名.next()