之前写redux-saga的使用时用到了generator函数,今天我们来看看generator函数的简单用法.

function *fnc(){
    yield "haha";
    yield "123";
    return "end"
}
const gen = fnc();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

先看下输出结果

1.png

generator函数需要一直调用.next()函数才能一直执行,直到done的值为true,如果我们最后没写return或者只写了return没写返回值那么最后的结果会变成

{ value: 'haha', done: false }
{ value: '123', done: false }
//最后的value值会变成undefined
{ value: undefined, done: true }

我们可以写个递归来调用它

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();

查看结果

2.png

generator函数还支持我们传入参数

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())
//传入了参数
console.log(gen.next("a"))
//传入了参数
console.log(gen.next("b"))

我们光看代码可能会觉得a会输出"haha",b会输出"123",我们执行命令看看结果

3.png

结果并不是我们想的那样而是输出了我们传入的参数,这个是需要注意的.

接下来看一下配合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());

查看一下输出结果

4.png

可以看到value中是Promise的对象,所以我们需要这样执行方法

fn.next().value.then(res => fn.next(res))

5.png

我们同样用递归来实现他的调用

function prom(num){
  const { value, done } = fn.next(num);
  if(!done){
    value.then(res => prom(res))
  }
}
prom(2)

一样可以得到上面的结果

6.png