Generator
概念
- Generator 函數(shù)是 ES6 提供的一種異步編程解決方案
- Generator 函數(shù)是一個狀態(tài)機，封裝了多個內(nèi)部狀態(tài)。
- Generator 還是一個遍歷器對象生成函數(shù).返回的遍歷器對象，可以依次遍歷 Generator 函數(shù)內(nèi)部的每一個狀態(tài)。
形式上
Generator 函數(shù)是一個普通函數(shù)，但是有兩個特征。
- 一是，
function關(guān)鍵字與函數(shù)名之間有一個星號； - 二是，函數(shù)體內(nèi)部使用
yield表達式，定義不同的內(nèi)部狀態(tài)（yield在英語里的意思就是“產(chǎn)出”）。
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();
// --- 輸出 ------
console.log(hw.next()) // { value: 'hello', done: false }
console.log(hw.next()) // { value: 'world', done: false }
console.log(hw.next()) // { value: 'ending', done: true }
console.log(hw.next()) // { value: undefined, done: true }
例子
// 執(zhí)行順序
function* test(x) {
console.log(111)
let a = yield x + 222
console.log('a', a)
let b = yield 333 + a
console.log('b', b)
let c = yield 44444 + b
console.log('c', c)
}
let t = test(1)
console.log(t.next())
console.log(t.next())
console.log(t.next())
console.log(t.next())
/**
111
{ value: 223, done: false }
a undefined
{ value: NaN, done: false }
b undefined
{ value: NaN, done: false }
c undefined
{ value: undefined, done: true }
**/
發(fā)現(xiàn)除了第一個next()能正常輸出{ value: 223, done: false },第二個next開始輸出 a=undefined.
查閱文檔后發(fā)現(xiàn)
yield表達式本事是沒有返回值, 或者說總是返回undefined.
但是,
next方法可以帶一個參數(shù), 該參數(shù)會被當做上一個yield表達式的返回
- 給next方法傳遞參數(shù)
// 執(zhí)行順序
function* test(x) {
console.log(111)
let a = yield x + 222
console.log('a', a)
let b = yield 333 + a
console.log('b', b)
let c = yield 44444 + b
console.log('c', c)
}
let t = test(1)
console.log(t.next())
//111
// { value: 223, done: false }
// next 方法的參數(shù)
// yield表達式本身沒有返回值，或者說總是返回undefined。
// next方法可以帶一個參數(shù)，該參數(shù)就會被當作上一個yield表達式的返回值。
console.log(t.next(33))
// a 33
// { value: 366, done: false }
console.log(t.next('cc'))
//b cc
// { value: '44444cc', done: false }
console.log(t.next('dd'))
// c dd
// { value: undefined, done: true }
generator函數(shù)的運行順序如下：
image-20201023154710301
generator搭配promise將異步回調(diào)變成同步模式
function request(data) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(it.next(data + 1))
}, 1000)
})
}
function* getApi() {
let res1 = yield request(1)
console.log('res1', res1)
let res2 = yield request(res1)
console.log('res2', res2)
let res3 = yield request(res2)
console.log('res3', res3)
}
let it = getApi()
it.next()
// res1 2
// res2 3
// res3 4
