Javascript的异步编程（下）及es6之generator

三、协程

异步编程的解决方案其中有一种叫做"协程"（coroutine），意思是多个线程互相协作，完成异步任务。

协程有点像函数，又有点像线程。它的运行流程大致如下。

第一步，协程A开始执行。

第二步，协程A执行到一半，进入暂停，执行权转移到协程B。

第三步，（一段时间后）协程B交还执行权。

第四步，协程A恢复执行。

上面流程的协程A，就是异步任务，因为它分成两段（或多段）执行。

读取文件的协程写法如下。

function asnycJob() {  // ...其他代码  var f = yield readFile(fileA);  // ...其他代码}

上面代码的函数 asyncJob 是一个协程，它的奥妙就在其中的 yield 命令。它表示执行到此处，执行权将交给其他协程。也就是说，yield命令是异步两个阶段的分界线。

协程遇到 yield 命令就暂停，等到执行权返回，再从暂停的地方继续往后执行。它的最大优点，就是代码的写法非常像同步操作，如果去除yield命令，简直一模一样。

四、Generator 函数

Generator 函数是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即暂停执行）。

generator实现更高级的异步编程功能

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

//基本用法

{

   // generator 特点：：有*号，函数体内有yield

   let tell = function* (){

        yield 'a';//异步操作需要暂停的地方，都用 yield 语句注明

        yield 'b';

        return 'c'

    };

    let k=tell();//这里执行yield前的语句，调用 Generator 函数，会返回一个内部指针（即遍历器 ）k

    console.log(k.next());//调用指针 g 的 next 方法，会移动内部指针（即执行异步任务的第一段），指向第一个遇到的 yield 语句

    console.log(k.next());

    console.log(k.next());

    console.log(k.next());




//next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，

//表示当前阶段的信息（ value 属性和 done 属性）。value 属性是 yield 语句后面表达式的值，

//表示当前阶段的值；done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。


//next 方法返回值的 value 属性，是 Generator 函数向外输出数据；next 方法还可以接受参数，这是向 Generator 函数体内输入数据。

}




Generator 函数内部还可以部署错误处理代码，捕获函数体外抛出的错误。

function* gen(x){  try {    var y = yield x + 2;  } catch (e){     console.log(e);  }  return y;}var g = gen(1);g.next();g.throw（'出错了'）;// 出错了

上面代码的最后一行，Generator 函数体外，使用指针对象的 throw 方法抛出的错误，可以被函数体内的 try ... catch 代码块捕获。这意味着，出错的代码与处理错误的代码，实现了时间和空间上的分离，这对于异步编程无疑是很重要的。

//应用--------使用generator创建iterator接口。

{

    let obj={};

    obj[Symbol.iterator]=function *(){

       yield 1;

       yield 2;

       yield 3;

    }

    for(let item of obj){

        console.log(item)

    }

}

　

下面看看如何使用 Generator 函数，执行一个真实的异步任务。

var fetch = require('node-fetch');function* gen(){  var url = 'https://api.github.com/users/github';  var result = yield fetch(url);  console.log(result.bio);}

上面代码中，Generator 函数封装了一个异步操作，该操作先读取一个远程接口，然后从 JSON 格式的数据解析信息。就像前面说过的，这段代码非常像同步操作，除了加上了 yield 命令。

执行这段代码的方法如下。

var g = gen();var result = g.next();result.value.then(function(data){  return data.json();}).then(function(data){  g.next(data);});

上面代码中，首先执行 Generator 函数，获取遍历器对象，然后使用 next 方法（第二行），执行异步任务的第一阶段。由于 Fetch 模块返回的是一个 Promise 对象，因此要用 then 方法调用下一个next 方法。

　

//使用generator轻松实现抽奖次数限制逻辑实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

//实例

let draw=function(count){

    //具体抽奖逻辑

    console.log(`剩余${count}次`);

};

 

let residue=function* (count){

    while(count>0){

        count--;

        yield  draw(count);

    }

};

 

let start=residue(5);

let btn=document.createElement("button");

btn.id="start";

btn.textContent="抽奖";

document.body.appendChild(btn);

console.log(2222222222222);

document.getElementById("start").addEventListener("click",function(){

    start.next();

},false);

长轮循

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

//长轮循

    //连续请求服务端接口，当服务端返回为0时，停止查询

    let ajax=function* (){

        yield new Promise(function(resolve, reject){

            //请求服务端的数据

            setTimeout(function(){

                resolve({code:0})

            },200)

        })

    }

    let pull=function(){

        let genertaor=ajax();

        let step=genertaor.next();

        step.value.then(function(d){

            if(d.code!=0){

                setTimeout(function(){

                    console.info("wait");

                    pull();

                },1000)

            }else{

                console.info(d);

            }

        })

    }

    pull();