东莞企业型网站建设域名注册服务网站
MDN-Generator
Generator对象由生成器函数返回，并且它符合可迭代协议和迭代器协议。
Generator-核心语法
核心语法:
- 定义生成器函数
- 获取
generator对象 yield表达式的使用- 通过
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-核心语法
- 可以通过生成器函数(
function* xxx(){})来生成Generator对象 - 通过
Generator对象的next方法可以获取yield表达式之后的结果
Generator-id生成器
使用Generator实现一个id生成器id。
核心步骤:
- 定义生成器函数
- 内部使用循环,通过
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生成器
- 生成器函数内部的代码会在调用
next方法时执行,利用这一特点,可以实现任意的生成器,需要时调用next即可获取结果
Generator-流程控制
遇到yield表达式时会暂停后续的操作。使用Generator实现流程控制。
核心步骤:
yield后面跟上天气查询逻辑- 接口文档-天气预报
- 参考
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 genCity.next()console.log(res)})</script>
同理，可以使用 Promise 链式调用。
city.next().value.then(res => {console.log('res:', res)return city.next().value
}).then(res => {console.log('res:', res)
})
总结：
Generator-流程控制
- 使用
Generator控制流程的本质是利用yield关键字来分隔逻辑。比如示例中依次调用了多个接口,通过yield分隔,通过next来触发调用。