Javascript中生成器函数和Generator对象的介绍与使用

✨Generator

🎶Generator的描述

Generator 函数是ES6提供的一种异步编程解决方案

🎉三种异步方法出现的顺序

🍧Generator的 核心语法

// 像下面这样 func 这样的函数称之为生成器函数
// 通过 * 进行声明 通过yield进行等待 
function* func(){
	yield '1'
	yield '2'
	}
1
2
3
4
5
6

Generator 对象由生成器函数返回并且它符合可迭代协议和迭代器协议。
生成器函数在执行时能暂停，后面又能从暂停处继续执行。

 const f =func() //根据上面定义：Generator对象是由 生成器函数返回 ，这里f就是一个Generator对象
 
 f.next() //func() 不会立即执行func生成器函数 而是需要通过f.next()才能执行func() 遇到yield暂停  
 // f.next()的返回值是一个对象， {value:'yield后面的值',done:false/true}
// done:是否执行完毕，false：可以继续执行；true ：已经执行完完毕
// value：yield 后面的值
 // 输出的样式是这样的 {value:'1',done:false} value是下一个yield 后面的表达式 done表示是否执行完毕了，
 //再次基础上再 f.next()的话 返回的就是{value:'2',done:true} 说明这个Generator对象已经执行完毕了

for(const iterator of f){
	console.log(iterator)// 1  2
 } //我们可以通过  for of 遍历Generator对象  拿到yield后面的每一个值
1
2
3
4
5
6
7
8
9
10
11
12

🎐Generator管理异步

核心步骤：异步操作之前加上yield

  function* cityGenerator () {
      yield axios('http://hmajax.itheima.net/api/city?pname=北京')
      yield axios('http://hmajax.itheima.net/api/city?pname=广东省')
    }


    // 获取 Generator对象
    const city = cityGenerator()

    //由于axios的返回值是一个Promise 
    // console.log(city.next()) //{value: Promise, done: false}

    // 通过next方法执行代码,并获取结果 通过Promise的then方法实现异步处理
    city.next().value.then(res => {
      console.log('res:', res)
      return city.next().value
    }).then(res => {
      console.log('res:', res)
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

可见Generator的定义与 async await 很相似，但是使用上没有后者不方便，后者出现的时间又比前者晚，常听到人们说： 后者是前者的语法糖