ES6 异步编程之一：Generator

Generator

生成器是es6原生提供的异步编程方案，其语法行为和传统函数完全不同，阮大的《ECMAScript 6 入门》一书中对生成器有比较详尽的介绍，还有一些其他的文章可以参考，比如：

• 《ECMAScript 6 入门：generator》

• 深入浅出ES6（三）：生成器 Generators

• 深入浅出ES6（十一）：生成器 Generators，续篇

本文主要是通过一些代码示例来记录和总结生成器的用法。

yield 和 next

yield和next在生成器中扮演着非常重要的角色，前者是一个操作符，后者是生成器上的一个函数。

他们具有以下特性：

1. 需要调用generator的next函数，生成器中的语句才开始执行；

2. next函数在生成器之外调用，意味着可以在生成器之外控制其内部操作的执行过程；

3. 当生成器执行到yield操作符就立即执行yield之后的语句并暂停，不敢妄言内部原理，姑且感性地比作savepoint；

4. 当再次调用生成器的next函数时，生成器从上次发生yield的'savepoint'继续执行，直到再次遇到yield，或者遇到是return或者throw生成器就退出；

5. next的返回值是一个形如{done:false, value:x}的对象，每次调用next都会使生成器继续执行，对于next的返回值有如下规律：

   • 如果再次遇到yield，next返回值中的value属性是紧接在这条yield之后的语句执行之后的返回值；

   • 如果遇到的是return，那么返回对象done=true，value则是return的返回值；

   • 其他情况下，返回对象{done:false, value:undefined};

6. next的输入参数在上一次发生yield的地方返回，所以第一次调用next传入的参数是“然并卵”，next是在生成器之外调用的，所以这个机制使得我们有能力控制生成器内部的行为。

以上说了很多，先看一个用生成器实现的一个无限斐波那契数列，可以无限的调用next函数，他永远不会新视觉返回done=true

    const f = function* fibonacci() {
        let [a, b] = [0, 1];
    
        for (;;) {
            yield a;
            [a, b] = [b, a + b];
        }
    }();
    
    //执行三次，得到三个对象，其value值分别是0,1，1
    for (let i of Array(3).keys()) {
        console.log(f.next());
    }

接下来通过一段代码看看next和yield在传值和返回值上的情况，如下：

    const iter = function* gen() {
        console.log(`yield ${(yield 'a' + 0)}`);
        console.log(`yield ${(yield 'b' + 1)}`);
        return 'c' + 2;
    }();
    
    console.log(`next:${iter.next(0).value}`);  //输出 next:a0
    console.log(`next:${iter.next(1).value}`);  //输出 yield 1 next:b1
    console.log(`next:${iter.next(2).value}`);  //输出 yield 2 next:c2

对以上代码的输出分析如下：

1. 第一个next触发生成器执行到第一个yield，并立即执行'a' + 0 = 'a0', a0作为这次next的返回值；

2. 第二个带参数为1的next触发生成器继续执行，此时第一个yield才返回1，然后执行到第二个yield并立即立即这条yield后面的'b' + 1 = 'b1'，b1作为这次next的返回；

3. 第三个next执行以此类推……

异步编程方案

在同步编程模型中，每个函数总是有序依次地执行，一般上一个函数执行的结果往往是下一个函数的入参，那么在javascript中如何让下一个异步操作等待上一个异步执行得到结果之后再执行呢？

我们现在已经有了生成器并且知道next可以触发生成器执行到yield操作处，而且生成器会在遇到yield时立即执行后面的语句并暂停，那么如果yield后面是一个异步操作，而异步操作获取到结果之后再调用next不就实现了等待新视觉影院的效果么？

    function asyncfuc(v) {
        setTimeout(function() {
            let r = v + 20;
            console.log(r);
            g.next(r); //把异步函数执行得到的结果传出并触发下一个yield
        }, 500);
    }
    
    
    let g = function* gen() {
        let v1 = yield asyncfuc(0);
        let v2 = yield asyncfuc(v1);  //上一个异步调用的结果作为下一个异步调用的入参
        return v2;
    }();
    
    g.next();

异步操作执行链

有了前文的基础我们可以实现一个用来执行多个异步操作的函数，定义一个run(...functions)方法依次执行传入的函数，如下：

    //这个方法用来模拟一个异步调用
    function delay(time, callback) {
      setTimeout(function () {
        callback(`slept for ${time}`);
      }, time);
    }
    
    function run(...functions) {
        //构造一个生成器循环执行传入的方法
        var generator = function* sync(resume, functions) {
            let result;
            for (var func of functions) {
                result = yield func(result, resume); //前一个方法执行的结果作为下一个方法的入参
            }
            return result;
        }(resume, functions);
        
        //提供一个方法用于推进生成器执行。
        function resume(callbackValue) {
            generator.next(callbackValue);
        }
        generator.next(); //触发生成器立即执行第一个方法
    }
    
    //模拟异步方法调用, 斐波那契数列
    function d(result, resume) {
        delay(1000, (msg) => {
            let value = result;
            if (value) {
                [value.a, value.b] = [value.b, value.a + value.b];
            } else {
                value = { a: 0, b: 1 };
            }
            console.log(value.a);
            resume(value);
        });
        return result;
    }
    
    run(d, d, d); //顺序执行异步方法

以上实现有个值得注意的地方是通过一个叫做的resume的函数来推进生成器，它要求业务处理函数必须带上一个resume并在获得异步结果之后把结果作为参数并执行resume(value)（如同上面的d(result, resume)函数），由于resume不是一个标准的api，因此这个方案具有比较大的侵入性。