Generator详解

作者: Dolanf | 来源:发表于2018-07-08 17:12 被阅读18次

    很多人初接触es6的Generator的时候可能会觉得云里雾里绕得慌,本文从多种角度详细解说了其基础语法和使用方式,希望看完的你能从雾中走出来~
    主要有以下内容:

    1.相关概念
    2.消息传递
    3.Generator在流程控制中的应用
    4.Generator+Promise实现完美异步
    5.async和await
    6.yield委托


    1.相关概念

    1)为什么要引入Generator?
    众所周知,传统的JavaScript异步的实现是通过回调函数来实现的,但是这种方式有两个明显的缺陷:

    • 缺乏可信任性。例如我们发起ajax请求的时候是把回调函数交给第三方进行处理,期待它能执行我们的回调函数,实现正确的功能
    • 缺乏顺序性。众多回调函数嵌套使用,执行的顺序不符合我们大脑常规的思维逻辑,回调逻辑嵌套比较深的话调试代码时可能会难以定位。

    Promise恢复了异步回调的可信任性,具体参见(欸欸这个往后放),而Generator正是以一种看似顺序、同步的方式实现了异步控制流程,增强了代码可读性。

    2)概念:

    • Generator(生成器)是一类特殊的函数,跟普通函数声明时的区别是加了一个*号,以下两种方式都可以得到一个生成器函数:
    // 声明方式一(个人比较偏向这种风格啦)
    function *main() {
        // do something……
    }
    
    // 声明方式二
    function* main() {
        // do something
    }
    
    • Iterator(迭代器):当我们实例化一个生成器函数之后,这个实例就是一个迭代器。可以通过next()方法去启动生成器以及控制生成器的是否往下执行。
    • yield/next:这是控制代码执行顺序的一对好基友。
      通过yield语句可以在生成器函数内部暂停代码的执行使其挂起,此时生成器函数仍然是运行并且是活跃的,其内部资源都会保留下来,只不过是处在暂停状态。
      在迭代器上调用next()方法可以使代码从暂停的位置开始继续往下执行。
    // 首先声明一个生成器函数
    function *main() {
        console.log('starting *main()');
        yiled; // 打住,不许往下走了
        console.log('continue yield 1');
        yield; // 打住,又不许往下走了
        console.log('continue yield 2');
    }
    // 构造处一个迭代器it
    let it = main(); 
    
    // 调用next()启动*main生成器,表示从当前位置开始运行,停在下一个yield处
    it.next(); // 输出 starting *main()
    
    // 继续往下走
    it.next(); // 输出 continue yield 1
    
    // 再继续往下走
    it.next(); // 输出 continue yield 2
    
    

    以上是一个非常简单的yield/next相互配合控制代码执行的例子,认真看的同学可能会产生一个疑问:
    next()居然比yield多了一个???
    没错,就是这样的,因为let it = main(); 进行实例化之后,main()里的代码不会主动执行。第一个next()永远是用于启动生成器,生成器启动后要想运行到最后,其内部的每个yield都会对应一个next(),所以说next()永远都会比yield多一个了~~

    2.消息传递

    生成器的作用之一是消息传递。通过yield ...和next(...)组合使用,可以在生成器的执行过程中构成一个双向消息传递系统。

    • 当next(..)执行到yield语句处时会暂停生成器的执行,同时next(...)会得到一个带有value属性的对象,yield语句后面带的值会赋给value(如果yield后面没有值,value就为undefined)。可以将yield ...效果看成跟return ...类似。

    • 当生成器处于暂停状态时,暂停的yield表达式处可以接收下一个启动它的next(...)传进来的值。当next(...)使生成器继续往下执行时,其传入的值会将原来的yield语句替换掉。

    看个栗子:

    function *main() {
        let x = yield "starting";
        let y = yield (x * 2);
    
        console.log(x, y);
        return x + y;
    }
    
    let it = main();
    
    let res = it.next(); // 第一个next()用于启动生成器
    console.log(res.value);  // 输出"starting" (yield语句后跟的值传给了next()的对象)
    
    res = it.next(5); // 向等待的第一个yield传入值5,*main()中的 x 被赋值为5
    console.log(res.value); // 输出10 (x * 2得到了10传给next(5)运行后的对象)
    
    res = it.next(20); // 向等待的第二个yield传入值20, *main()中的x被赋值为20
                       // 输出5 20    (执行后面的console.log(x, y)语句分别输出x,y的值)
    console.log(res.value); // 输出25  (return ...的值传给了next(20)运行后的对象)
    

    注意:

    1. 第一个next()仅仅是用于启动生成器用的,并不会传入任何东西,如果传入了参数也会被自动忽略掉。
    2. yield ...在值传递方面的作用相当于return ...,你也可以把它当做一个return语句来看待,如果yield后面不加参数,则默认yield undefined;
    3. 最后一个next()执行完毕之后,得到的值是*main()函数return出来的值,如果函数没有自己加return语句,一样也会默认return undefined;
    4. next()执行完毕后会返回一个对象,属性值有两个,分别为value(从yield或return处拿到的值)和done(boolean值,标识生成器是否执行完毕)。

    接下来尝试一下异常传值的情况:

    function *main() {
        let x = yield "starting";
        let y = yield (x * 2);
        console.log(x, y);
    }
    
    let it = main();
    
    let res = it.next('1111'); // '1111'被丢弃啦~~
    console.log(res.value);  // 输出"starting"
    
    res = it.next(); // 不给yield传值 x成了undefined
    console.log(res.value); // 输出NaN (undefined * 2得到了NaN传给next()运行后的对象)
    
    res = it.next(); // 不给yield传值 y未拿到值
                     // 输出undefined undefined
    console.log(res.value); // 输出undefined  (默认return undefined;)
    

    3.Generator在流程控制中的应用##

    基础概念说完了,那么,Generator是如何解决传统回调中存在的缺乏顺序性问题的呢?首先来看下面一个使用传统回调函数实现异步的例子:

    function getCallSettings() {
        // utils.ajax方法用于发起ajax请求
        utils.ajax({
            url: '/dialer/dialerSetting',
            method: "GET",
            success: (res) => {
                let settingInfo = res.dialerSetting;
                dealData(settingInfo);
            },
            error: (err) => {
                console.log(err);
            }
        });
    }
    function dealData(data) {
        // do something……
    }
    getCallSettings();
    

    可以看出,dealData只能在ajax请求拿到数据之后才能运行,所以需要嵌套在success回调中执行。以上例子嵌套的不深,依赖settingInfo的地方也不多,只有一个dealData函数,所以看起来还好,但是,试想一下如果接下来的很多其他请求都依赖于该请求返回的数据,或者很多代码逻辑都需要拿到settingInfo之后才能进行,那么代码可读性就会差很多了。
    所以,接下来尝试以生成器的方式实现以上场景:

    function getCallSettings() {
        utils.ajax({
            url: '/dialer/dialerSetting',
            method: "GET",
            success: (res) => {
                it.next(res.dialerSetting); // 将res.dialerSetting传给yield表达式
            },
            error: (err) => {
                it.throw(err); // 抛出错误
            }
        });
    }
    function *dealData() {
        try{
           let settingInfo = yield getCallSettings();
           // do something……
        }
        catch(err) {
          console.log(err); // 接收错误
        }
    }
    let it = dealData();
    it.next(); // 启动生成器
    

    此处的yield是用于在异步流程中暂停阻塞代码,当然,它阻塞的只有生成器里面的代码,生成器外部的丝毫不受影响。let settingInfo = yield getCallSettings();中,通过yield把异步的流程完全抽离出去,实现了看似顺序同步的代码,这无疑是巨大的改进。

    4.Generator+Promise实现完美异步##

    1.如果将Generator和Promise结合在一起使用,既让代码看起来顺序同步,又恢复了可信任性,可以说是非常完美的了。
    接下来就把以上例子改成Generator + Promise实现:

    function getCallSettings() {
        // utils.ajax方法支持返回promise对象,把得到的promise return出去
        return utils.ajax({
            url: '/dialer/dialerSetting',
            method: "GET",
        });
    }
    function *dealData() {
        try {
            let settingInfo = yield getCallSettings();
            // do something……
        }
        catch(err) {
            console.log(err); // 接收错误
        }
    }
    
    let it = dealData();
    let promise = it.next().value; // 注意,这里拿到yield出来的promise
    promise.then(
        (info) => {
            it.next(info); // 拿到info传给yield表达式
        }, 
        (err) => {
            it.throw(err); // 抛出错误
        }
    );
    

    2.这种方式的另一个好处在于,当多个Promise并发请求时,正确的写法可以更好地提高性能。
    例如以下场景:

    // 满屏都是代码,这里代码尽量精简些啦
    function *dealData() {
        let r1 = yield utils.ajax(reqUrl1); // 请求1获取到 r1
        let r2 = yield utils.ajax(reqUrl2); // 请求2获取到 r2
    
        let reqUrl3 = getUrl(reqUrl1, reqUrl2); // 请求3需要的url依赖于前面两个请求
        let r3 = yield utils.ajax(reqUrl3);
        // do something……
    }
    

    以上写法中,生成器执行时会先发出请求1,请求1返回后才会发出请求2,请求2返回之后,再发出请求3。其实在这里请求1和2之间不存在依赖关系,是可以同时进行的。所以还可以用一种效率更高的写法:

    // 满屏都是代码,这里代码也尽量精简些啦
    function *dealData() {
        let p1 = utils.ajax(reqUrl1); // 请求1获取到 r1
        let p2 = utils.ajax(reqUrl2); // 请求2获取到 r2
    
        let r1 = yield p1;
        let r2 = yield p2;
    
        let reqUrl3 = getUrl(reqUrl1, reqUrl2); // 请求3需要的url依赖于前面两个请求
        let r3 = yield utils.ajax(reqUrl3);
        // do something……
    }
    

    这样p1和p2之间就可以同时进行,不会相互阻塞啦~~是不是很棒棒呢

    5.async和await##

    以上yield + Promise的写法需要我们对拿到的promise的决议进行人工处理(区分成功或失败),在ES7中提供了async/await帮我们省掉了这个步骤:async/await组合的出现使得异步的世界更加完美啦~~
    下面改写一下代码实现形式:

    function getCallSettings() {
        return utils.ajax({
            url: '/dialer/dialerSetting',
            method: "GET",
        });
    }
    async function dealData() {
        try {
            let settingInfo = await getCallSettings(); // await会暂停在这,直到promise决议(请求返回)
            // do something……
        }
        catch(err) {
            console.log(err);
        }
    }
    dealData();
    

    dealData函数不需要再被声明为生成器函数,而是声明为async函数;
    同时,其内部也不用yield出一个promise,而是用await进行等待,直到promise决议。

    那么async/await的写法和yield相比孰优孰劣呢?
    其实个人感觉两者都有自己独到的长处,没有优劣之分(纯属个人见解,不喜勿喷)

    • async/await在处理promise的层面上省略了对决议的人工处理,让代码量得以减少,语义上也更容易理解。
    • yield包容性更广泛,async只能接口promise,yield除此之外还能接收字符串、数组、对象等各种类型的数据。

    6.yield 委托##

    为什么要用委托呢?因为,一个代码组织合理的程序中,出于功能模块化等原因,我们很可能在一个生成器中调用另外一个生成器,比如在a()中调用b(),但是通常情况下a()的实例中是无法使用next方法对b()内部进行操控的,所以这个时候我们就可以使用yield将b()委托给a()。

    function *a() {
        console.log('a start');
        yield 2;
        console.log('a end');
    }
    function *b() {
        console.log('b start');
        yield 1;
        yield *a(); // 将a委托给b
        yield 3;
        console.log('b end');
    }
    
    let it = b();
    
    it.next().value;    // b start
                        // 1 
    it.next().value;    // a start
                        // 2
    it.next().value;    // a end
                        // 3
    it.next().value;    // b end
    

    合理地进行生成器分离和使用委托,可以使代码可读性更强,更易维护~~~~~

    相关文章

      网友评论

        本文标题:Generator详解

        本文链接:https://www.haomeiwen.com/subject/glbouftx.html