ES6 之 generator 函数

Generator 函数是 ES6 提供的一种异步编程解决方案。（解决异步，深度嵌套的问题）语法行为与传统函数完全不同。
·
·
异步：不连续，上一个操作没有执行完 下一个操作照样开始
同步：连续执行，上一个操作没有执行完 下一个没法开始

generator函数语法：

function * show() {
      yield 'welcome'
      yield 'to'
      return 'myBlog'
    }  

• function关键字和函数名称之间有 *连接
• 函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

调用：

let g1 = show()

console.log(g1.next()) // {value: "welcome", done: false}
console.log(g1.next()) // {value: "to", done: false}
console.log(g1.next()) // {value: "myBlog", done: true}

• Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象
• 必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。
• next方法返回一个对象，它的value属性就是当前yield表达式的值hello，done属性的值false，表示遍历还没有结束，值为true表示遍历结束。

上述调用，手动调用，麻烦。还可以使用下面方法：

1. 可以使用for…of…自动遍历generator

function* show() {
      yield 'welcome'
      yield 'to'
      return 'myBlog'
    }

    let g1 = show()

    for (let val of g1) {
      console.log(val)
    }
    // welcome to (return的东西，它不会遍历)
    

2. 结合结构赋值

function* show() {
      yield 'welcome'
      yield 'to'
      return 'myBlog'
    }


    let [a, b, c] = show()
    console.log(a, b, c) // welcome to undefined

3. 使用扩展运算符

function* show() {
      yield 'welcome'
      yield 'to'
      return 'myBlog'
    }


    console.log(...show()) // welcome to 

4. Array.from()

function* show() {
      yield 'welcome'
      yield 'to'
      return 'myBlog'
    }


    console.log(Array.from(show())) // ["welcome", "to"]

应用：generator函数结合axios请求数据

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>

    // 请求接口：https://api.githup.com/users/itstrive

    function * gen() {
      let val = yield 'itstrive'
      yield axios.get(`https://api.githup.com/users/${val}`)
    }

    let g1 = gen()

    let userName = g1.next().value

    // console.log(g1.next(userName).value)

    g1.next(userName).value.then(res => {
      console.log(res.data)
    })
    
  </script>

前端进阶精选：点此去