詳談Generator

Generator究竟有什麼樣的做用呢????

• 他是ES6提出的一個解決異步問題方案

  先看一段代碼, 感覺一下generator函數和普通函數的區別

function* test(){
        yield 2;
        yield 3;
        yield 5;
    }
    var app = test()            // 此時代碼不會執行
    var a = app.next()          // 這個時候代碼纔開始真正開始執行 
    console.log(a)              // {value:2,done:false}
    var b = app.next()          // 繼續執行
    console.log(b)              // {value:3,done:false}
    var b = app.next()          // 最後一步
    console.log(b)              // {value:5,done:true}

從上面的代碼能夠看出來,generator可讓函數在寫的時候中止運行,就比如咱們在打斷點的時候,那麼我就在想,若是我寫異步函數是否是也可讓他中止呢,激動的我趕忙試了一下

function* getTime(){
    //這裏我就用axios打個比方,就不寫一段promise了,你們理解這裏能夠放一個promise就行
    yield axios.get('xxxxx')
}
var app = getTime()
app.next()     //  {value,done}  這裏面的value就是返回的axios數據

• 總結一下,那麼generator就是針對異步的一種解決方法
• 既然瞭解了他的用處,那麼咱們就來好好學習一下如何去使用他

使用Promise

• Promise的書寫規範是什麼

// 在寫函數的時候必須用一個*  
function* add(){}
function *add(){}
// 那麼在es6以後函數能夠寫成
get(){
    ...
}
//因此還有另一種寫法
*get(){
    
}

• Promise如何使用

  這時候須要瞭解一個關鍵字 yield 這個關鍵字必須在generator函數內,就比如await必須用在async內部同樣

var app = test()  //test是一個generator函數
app.next()        //會把程序中的yield後面的值拿出來,而且吧yield後面的數據傳遞給返回的對象的value中
//例如
function *test(){
    yield 2
}
test().next()     //test()自己不會執行,當調用next的時候纔會執行,就是返回一個對象 {value:2,done:true}
//再理解一下,yield後面的值賦給了value,done是指generator函數後面還存在return或者yield等程序,就是後面時候還有代碼段

• 那麼咱們會寫generator函數了,而且也會調用了
• 若是還能傳遞參數了,那麼咱們這個函數豈不是用起來很完美麼

function* test(){
    console.log('程序開始了')
    console.log(`1.${yield}`)  //這裏面咱們使用es6的字符串插值方式
    console.log(`2.${yield}`)  //這裏面咱們調用
}
var app = test()                //這個時候只是讓app變成一個指向generator函數的指針,並不會打印出值來
app.next()                     
app.next('第一步')             
app.next('第二步')             
//接下來就是打印的結果了
程序開始執行了
1.第一步
2.第二步

• 分享不易,感謝star