1.什么是Generator?
是ES6提供的一种异步编程解决方案,语法不同于普通函数;简单的把Generator 理解为一个状态机,封装了多个内部状态。执行Generator 函数会返回一个迭代器对象,可以通过调用迭代器next依次遍历Generator函数内部的每一个状态。
2.Generator的特征?
- function关键字与函数名之间有个星号;
- 函数内部使用yield表达式
3.Generator的使用
1.声明一个Generator函数
function* Generator()
注意:*可以靠左,中,右 但是常靠function
2.与普通函数的区别:
普通函数:当使用return时,代码以下部分将不会运行
function sum(a, b) { return a + b } const value = sum(1, 2) //3
Generator函数:使用yield+next() 可以返回多次值
因为return会阻止后面的代码运行,所以 Generator提供了yield,yiled也是返回值,但是执行一次状态停在了第一个yield ,依次执行next方法,执行下一个yield状态。代码分段执行,一个yield分一段。上一个yield结束是下个状态的开始,下一个状态的结束再执行下一个yield。yield后面的是返回值。最后一个yield可以return返回。
基本使用例子:
<script> function* Generator() { // 内部使用yield表达式——不会阻止代码向下运行 yield '我是第一个状态' yield '我是第二个状态' yield '我是第三个状态' } let res = Generator() //返回值 返回的是一个迭代器对象 console.log(res.next()); //next()执行一个状态 console.log(res.next()); //next()执行下一个状态 // console.log(res.next()); //next()执行下一个状态 </script>
下一个状态使用上一个状态返回结果的例子:
<script> function* Generator() { let res = yield getData() // 上一个状态声明变量 下一个状态使用 console.log(res, '获取响应'); yield '结束了' } let res = Generator() //返回值 返回的是一个迭代器对象 res.next() //第一个状态执行 // 模拟一个异步请求 async function getData() { let result = await axios.get('http://121.199.0.35:8888/index/article/findCategoryArticles'); res.next(result); } </script>