【JavaScript】Generator

MDN-Generator

Generator对象由生成器函数返回，并且它符合可迭代协议和迭代器协议。

Generator-核心语法

核心语法:

1. 定义生成器函数
2. 获取generator对象
3. yield表达式的使用
4. 通过for of获取每一个yield的值

// 1. 通过function* 创建生成器函数 
function* foo() {
  // 遇到yield表达式时会暂停后续的操作
  yield 'a'
  yield 'b'
  yield 'c'
  return 'd'
}
// 2. 调用函数获取生成器
const f = foo()
// 3. 通过next方法获取yield 之后的表达式结果，会被包装到一个对象中
// 执行一次next 即可获取一次 yield之后的表达式结果
const res1 = f.next()
console.log(res1)// {value: 'a', done: false}
const res2 = f.next()
console.log(res2)// {value: 'b', done: false}
const res3 = f.next()
console.log(res3)// {value: 'c', done: false}
// 最后一次可以拿到return的结果
const res4 = f.next()
console.log(res4)// {value: 'd', done: true} 
// done 为true之后，获取到的value为undefined
const res5 = f.next()
console.log(res5)// {value: undefined, done: true} 


// 4. 通过for of 获取每一个yield之后的值，
const f2 = foo()
for (const iterator of f2) {
  console.log(iterator)
}

总结：

Generator-核心语法

1. 可以通过生成器函数(function* xxx(){})来生成Generator对象
2. 通过Generator对象的next方法可以获取yield表达式之后的结果

Generator-id生成器

使用Generator实现一个id生成器id。

核心步骤:

1. 定义生成器函数
2. 内部使用循环,通过yield返回id并累加

// 1. 通过function* 创建生成器函数 
function* generator() {
  let id = 0
  // 无限循环
  while (true) {
    // id累加并返回
    yield id++
  }
}
// 2. 调用函数获取生成器
const idMaker = generator()
// 3. 需要id的时候 通过next获取即可
const { value: id1 } = idMaker.next()
console.log(id1)
const { value: id2 } = idMaker.next()
console.log(id2)

总结：

Generator-id生成器

1. 生成器函数内部的代码会在调用next方法时执行,利用这一特点,可以实现任意的生成器,需要时调用next即可获取结果

Generator-流程控制

遇到yield表达式时会暂停后续的操作。使用Generator实现流程控制。

核心步骤:

1. yield后面跟上天气查询逻辑
2. 接口文档-天气预报
3. 参考code:北京 110100 上海 310100 广州 440100 深圳 440300

  <button class="getWeather">天气查询button>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js">script>
  <script>

    /**
         * 需求：流程控制，依次查询，北上广深的天气预报
         * 参考code: 北京 110100  上海 310100  广州 440100 深圳 440300
         * 接口文档: https://apifox.com/apidoc/project-1937884/api-49760220
         * */
    function* weatherGenerator() {
      // 北京
      yield axios('http://hmajax.itheima.net/api/weather?city=110100')
      // 上海
      yield axios('http://hmajax.itheima.net/api/weather?city=310100')
      // 广州
      yield axios('http://hmajax.itheima.net/api/weather?city=440100')
      // 深圳
      yield axios('http://hmajax.itheima.net/api/weather?city=440300')
    }

    const cityWeather = weatherGenerator()
    document.querySelector('.getWeather').addEventListener('click', async () => {
      const res = await cityWeather.next().value
      console.log(res)
    })

同理，可以使用 Promise 链式调用。

city.next().value.then(res => {
  console.log('res:', res)
  return city.next().value
}).then(res => {
  console.log('res:', res)
})

总结：

Generator-流程控制

1. 使用Generator控制流程的本质是利用yield关键字来分隔逻辑。比如示例中依次调用了多个接口,通过yield分隔,通过next来触发调用。