ES6中Generator

zhunjiee 發(fā)布于2019-08-23 12:23 / 916人閱讀

摘要：道理大概就是，有兩個(gè)異步程序，用小明和小紅指代它們。小紅需要等小明執(zhí)行完了才可以被執(zhí)行，那么我們?cè)趫?zhí)行到小明時(shí)，暫停程序的運(yùn)行通過，等到小明有了返回結(jié)果時(shí)，再執(zhí)行后面跟著的小紅。在最新的中，已經(jīng)拋棄了，轉(zhuǎn)而使用。

ES6中Generator

Generator是ES6一個(gè)很有意思的特性，也是不容易理解的特性。不同于let/const提供了塊級(jí)作用域這樣明顯的目的，這玩意兒被搞出來到底是干嘛的？

首先我們需要明確一個(gè)問題，在JavaScript中，任何一個(gè)函數(shù)只要開始執(zhí)行，便無法停止下來直到執(zhí)行完成（別跟我提debug，你見過哪個(gè)用戶在使用產(chǎn)品的還得開個(gè)debug調(diào)試你的代碼）。

but，Generator提供這種能力。看下面代碼：

function *g(){
    console.log("start");
    yield 1;
    console.log("middle");
    yield 2;
    console.log("end");
}
var g1 = g();
console.log(g1.next()); 
// start
// {value: 1, done: false}
console.log(g1.next());  
// middle
// {value: 2, done: false}
console.log(g1.next());  
// end
// {value: undefined, done: true}

根據(jù)輸出結(jié)果，我們看到，在函數(shù)g中，碰到yield關(guān)鍵詞，運(yùn)行的程序會(huì)停下來。只有調(diào)用 next()方法，才會(huì)繼續(xù)執(zhí)行函數(shù)g中的代碼。所以函數(shù)g本身有暫停狀態(tài)。

至此，我們需要知道：

Generator不是函數(shù)，不是函數(shù)，不是函數(shù)；

g()不會(huì)立即出發(fā)執(zhí)行，而是一上來就暫停，并返回一個(gè)Iterator對(duì)象；

每次g1.next()都會(huì)打破暫停狀態(tài)去執(zhí)行，直到遇到下一個(gè)yield或者return

遇到y(tǒng)ield時(shí)，會(huì)執(zhí)行yeild后面的表達(dá)式，并返回執(zhí)行之后的值，然后再次進(jìn)入暫停狀態(tài)，此時(shí)done: false。

遇到return時(shí)，會(huì)返回值，執(zhí)行結(jié)束，即done: true

每次g.next()的返回值永遠(yuǎn)都是{value: ... , done: ...}的形式

Generator與異步

既然Generator可以函數(shù)停下來，有些腦洞清奇的人，想到了可不可以用Generator處理異步程序。

先看一個(gè)傳統(tǒng)例子：

    function asyn(fn) {
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                fn();
                resolve(true);
            }, 1000);
        });
    }

    function main() {
        console.log("start");
        asyn(function(d) {
            console.log("async one");
            asyn(function(d) {
                console.log("async two");
                console.log("end");
            });
        });
    }

    main();

再來看看使用了Generator的異步程序：

    function asyn(fn) {
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                fn();
                resolve(true);
            }, 1000);
        });
    }

    co(function*() {
        console.log("start");
        yield asyn(function(d) {
            console.log("async one");
        });

        yield asyn(function(d) {
            console.log("async two");
        });
        console.log("end");
    });

    function co(fn) {

        return new Promise((resolve,reject)=>{
            let g = fn();

            onFullfilled();
            function onFullfilled() {
                let ret = null;
                ret = g.next();
                next(ret);
            }

            function next(ret) {
                if(ret.done) return resolve(ret.value);
                ret.value.then(onFullfilled);
            }
        } );
    }

函數(shù)在異步程序沒有采用嵌套回調(diào)，是直接用同步的方式寫了出來。道理大概就是，有兩個(gè)異步程序，用小明和小紅指代它們。小紅需要等小明執(zhí)行完了才可以被執(zhí)行，那么我們?cè)趫?zhí)行到小明時(shí)，暫停程序的運(yùn)行（通過yield），等到小明有了返回結(jié)果時(shí)，再執(zhí)行后面跟著的小紅（next()）。

在上面的程序中，我們添加了一個(gè)co函數(shù)，這個(gè)函數(shù)的作用是讓Generator自動(dòng)執(zhí)行下去。直白來說，就是當(dāng)?shù)谝粋€(gè)異步函數(shù)返回后，自動(dòng)調(diào)用next()方法運(yùn)行后面的代碼。

Generator與Koa

Koa是基于Node.js的Web應(yīng)用框架。在Koa中，處理的異步程序主要是網(wǎng)絡(luò)請(qǐng)求（HTTP）、文件讀取和數(shù)據(jù)查詢。這里面的異步場景較多，如果再加上程序分層，采用傳統(tǒng)的callback方式，那回調(diào)多了去了。

app.on("get", function(){
    auth(function(){
        router(function(){
            find(function(){
                save(function(){
                    render(function(){
                        //......
                    })
                })
            })
        })
    })

})

這樣寫法對(duì)于程序維護(hù)及其不利，毫無便捷性可言。在有了generator后，我們便可以像上面那種方式來寫程序。Koa最初的版本就是通過這種方式，讓中間處理程序都轉(zhuǎn)成一個(gè)個(gè)"yield"(中間件)。通過中間件的形式去處理客戶端請(qǐng)求，讓開發(fā)App應(yīng)用更加靈活，不受框架自身限制。

在最新的Koa2中，已經(jīng)拋棄了Genetator，轉(zhuǎn)而使用async/await。

但是無論采用哪種方式，其本質(zhì)都是利用了Promise。