状态管理dva：Generator函数

1.Generator函数

function* 这种声明方式（function 关键字后跟一个星号）会定义一个生成器函数 (generator function)，它返回一个Generator 对象

• 1.生成器函数
• 2.Generator 生成器对象

• function*：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function*
• ECMAScript 6 入门Generator 函数的语法：https://es6.ruanyifeng.com/#docs/generator

生成器函数的特点：

在执行时能暂停，后面又能从暂停处继续执行

普通函数：

run-to-completion 模式
即：函数开始执行后，会一直执行，直到该函数所有语句执行完或遇到 return 返回，期间无法执行函数外的其他代码

生成器函数：

run-pause-run 模式
即：函数开始执行后，可以被暂停一次或多次，然后再恢复执行，暂停期间可以执行其他代码

Generator 对象（生成器对象），generator 函数的返回值

• 调用 generator 函数，并不会执行函数中的代码，而是返回一个 generator 对象
• 函数中的代码什么时候执行？调用 generator 对象的 next() 方法才会执行函数中的代码

generator 函数是否一次性执行

generator 函数中的代码，不是一次性执行完毕！

generator 函数中的代码执行时，执行到 yield，然后，函数中的代码就暂停执行了

const GeneratorDemo = () => {
  // -- 1. generator 函数 vs. 普通函数
  // const fn = () => {
  //   console.log('fn 函数执行了')
  //   return 1
  // }
  // const res = fn()
  // console.log('返回值', res)

  // generator 函数：需要在 function 关键字的后面加上一个 * 星号
  // 注意：
  //  1. 调用 generator 函数，函数中的代码并不会执行
  //  2. generator 函数的返回值，是一个 generator 对象
  //  3. 调用 generator对象 的 next() 方法，函数内部的代码才会执行
  //  4. generator 函数中的代码可以暂停，可以通过 yield 关键字，让代码暂停
  //  5. generator 函数个运行模式： 运行-暂停-运行
  function* gen() {
    console.log('gen 函数执行了')
    yield
    console.log('yield 后面的一行代码')
  }
  const g = gen()
  g.next()
  setTimeout(() => {
    g.next()
  }, 3000)

  return <h1>Generator</h1>
}

export default GeneratorDemo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

执行 generator 函数中的所有代码：

根据 next() 方法返回对象的 done 是否为 true 来判断

// 生成器函数
function* generator() {
  yield 1
  yield 2
}

// gen 生成器对象
const gen = generator()
console.log(gen.next()) // { value: 1, done: false }
console.log(gen.next()) // { value: 2, done: false }
console.log(gen.next()) // { value: undefined, done: true }
1
2
3
4
5
6
7
8
9
10
11