之前寫redux-saga的使用時(shí)用到了generator函數(shù),今天我們來(lái)看看generator函數(shù)的簡(jiǎn)單用法.
function *fnc(){
yield "haha";
yield "123";
return "end"
}
const gen = fnc();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
先看下輸出結(jié)果
1.png
generator函數(shù)需要一直調(diào)用.next()函數(shù)才能一直執(zhí)行,直到done的值為true,如果我們最后沒(méi)寫return或者只寫了return沒(méi)寫返回值那么最后的結(jié)果會(huì)變成
{ value: 'haha', done: false }
{ value: '123', done: false }
//最后的value值會(huì)變成undefined
{ value: undefined, done: true }
我們可以寫個(gè)遞歸來(lái)調(diào)用它
function *fnc(){
yield "haha";
yield "123";
return "end"
}
const gen = fnc();
function fncNext(){
const { value, done } = gen.next();
console.log(value);
if(!done){
fncNext();
}
}
fncNext();
查看結(jié)果
2.png
generator函數(shù)還支持我們傳入?yún)?shù)
function *fnc(){
let a = yield "haha";
console.log("a = " +a)
let b = yield "123";
console.log("b = " +b)
return "end"
}
const gen = fnc();
console.log(gen.next())
//傳入了參數(shù)
console.log(gen.next("a"))
//傳入了參數(shù)
console.log(gen.next("b"))
我們光看代碼可能會(huì)覺(jué)得a會(huì)輸出"haha",b會(huì)輸出"123",我們執(zhí)行命令看看結(jié)果
3.png
結(jié)果并不是我們想的那樣而是輸出了我們傳入的參數(shù),這個(gè)是需要注意的.
接下來(lái)看一下配合Promise的使用
function* pf(num) {
const r1 = yield compute(num);
yield compute(r1);
}
function compute(num) {
return new Promise(resolve => {
setTimeout(() => {
const ret = num * num;
console.log(ret)
resolve(ret);
}, 1000); });
}
const fn = pf(2);
console.log(fn.next());
查看一下輸出結(jié)果
4.png
可以看到value中是Promise的對(duì)象,所以我們需要這樣執(zhí)行方法
fn.next().value.then(res => fn.next(res))
5.png
我們同樣用遞歸來(lái)實(shí)現(xiàn)他的調(diào)用
function prom(num){
const { value, done } = fn.next(num);
if(!done){
value.then(res => prom(res))
}
}
prom(2)
一樣可以得到上面的結(jié)果
6.png
