js中的Generator-详解

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>