探索es6系列之—-Generator生成器函式

輝哥哥發表於2019-03-03
函式

之前知道es6的generator很好使，而且還有點複雜，專案遇上了又有點忘記了所以又重溫下，同時記錄下來，方便以後回憶

1. Generator兩個特徵

①function關鍵字與函式名之間有*
②函式體內有yield

執行流程

①執行生成器函式，相當於生成一個例項
②例項呼叫next()在最開始或者上一個暫停處向下執行至下一個yield或者return（yield是暫停，next()是播放?是不是很帶感）

next(param)帶引數

next的引數為上一條yield的返回值

舉個? 

function* foo(x) {
    var y = 2*(yield(x+2))
    var z = yield(y/4)
    return x+y+Z
}
let bar = foo(2)
bar.next() //{value:4,done:false} 返回yield（2+2）= 4
bar.next(7) //{value:4,done:false} 設定yield(x+2) = 7,那麼y= 2*7=14,那麼yield(y/4) = 3.5
bar.next(3) //{value:4,done:false} 設定z = yield(y/4) = 3 那麼 x+y+z = 2+14+3 = 19
複製程式碼

##es7的async函式（偷偷告訴你，未來這個肯定很常見）
其實async函式就是換了個馬甲，把*換成了async ,把yield換成await;看起來語義化一些，不過，人家還是有變化的：async可以不用挨個呼叫next()去移動指標。而是等待await後面的語句執行完成（包括非同步請求或其他操作），才會繼續執行，達到同步的效果。而且aysnc返回的是Promise物件

舉個?

async function fun(item){
    let sym = await myfun1(item);//執行第一個非同步請求
    let haha = await myfun2(sym);//執行第二個請求
    return haha
}
let result = fun(`test`).then(res => {
    console.log(res)
}).catch(err =>{
    console.error(err)
})
複製程式碼

blog閱讀

相關文章