ES6 异步编程之一:Generator

Generator

生成器是es6原生供应的异步编程计划,其语法行动和传统函数完整差别,阮大的《ECMAScript 6 入门》一书中对生成器有比较详实的引见,另有一些其他的文章能够参考,比方:

本文主假如经由历程一些代码示例来纪录和总结生成器的用法。

yield 和 next

yieldnext在生成器中扮演着非常重要的角色,前者是一个操纵符,后者是生成器上的一个函数。

他们具有以下特征:

  1. 须要挪用generator的next函数,生成器中的语句才最先实行;

  2. next函数在生成器以外挪用,意味着能够在生成器以外掌握其内部操纵的实行历程;

  3. 当生成器实行到yield操纵符就马上实行yield以后的语句并停息,不敢妄语内部道理,权且感性地比作savepoint;

  4. 当再次挪用生成器的next函数时,生成器从上次发作yield‘savepoint’继承实行,直到再次碰到yield,或许碰到是return或许throw生成器就退出;

  5. next的返回值是一个形如{done:false, value:x}的对象,每次挪用next都会使生成器继承实行,关于next的返回值有以下规律:

    • 假如再次碰到yieldnext返回值中的value属性是紧接在这条yield以后的语句实行以后的返回值;

    • 假如碰到的是return,那末返回对象done=truevalue则是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. 第二个带参数为1next触发作成器继承实行,此时第一个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, func) {
        setTimeout(function() {
            func(`slept for ${time}`);
        }, time);
    }
    
    function run(...functions) {
        //组织一个生成器轮回实行传入的要领
        let generator = function* sync(functions) {
            let result;
            for (var func of functions) {
                result = yield func(result, generator); //前一个要领实行的结果作为下一个要领的入参
            }
            return result;
        }(functions);
    
        generator.next(); //触发作成器马上实行第一个要领
    }
    
    
    //模仿异步要领挪用, 斐波那契数列
    function d(result, g) {
        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);
            g.next(value);
        });
        return result;
    }
    
    run(d, d, d); //递次实行异步要领

以上完成有个值得注意的处所是营业处置惩罚函数必需带上一个生成器作为参数并在取得异步结果以后挪用g.next(value),它影响了营业函数的api,因而具有比较大的侵入性。

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