ES6之生成器函数generator

1、generator 生成器函数简介

（1）普通函数，一路执行到底
（2）generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权。
yield 有放弃、退让、退位的意思。
需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步
generator函数前面加一个 * 两边可以有空格，或靠近函数或function
实际生成多个小函数，实现走走停停的效果。

function show() {
    console.log('a')
    console.log('b')
}
show() // 普通函数
//输出结果 1 2

//生成器函数
function *show2() {
    console.log('1')
    yield //具体是啥下面有解释
    console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最后了，没有结果

2、generator-yield到底是什么？

（1）yield

① 既可传参，又可以返回
② 第一个next()传参无效，也接收不到的，只用来启动

（2）如果函数前漏掉 *

① 就是普通函数
② 如果有yield会报错， ReferenceError: yield is not defined
③ yield 只能在Generator函数内部使用

function * show() {
    console.log('1')
    var a = yield
    console.log('2')
    console.log(a)
}
// yield 传参
var gen = show()
gen.next() // 1
gen.next() // 2 和 undefined 因为没有传参，yield没有返回值
var gen = show()
gen.next(10) // 1 第一次执行到yield，但没有执行赋值
gen.next(20) // 2 和 20

function* show2() {
    console.log('1')
    yield 10
    console.log('2')
}
// yield 返回
var gen = show2()
var res1 = gen.next()
console.log(res1) // { value: 10, done: false }
var res2 = gen.next()
console.log(res2)
// { value: undefined, done: true } 最后的value需要return返回

3、generator-实例

① Promise 适合一次读一组
② generator 适合逻辑性的

// 带逻辑-generator
runner(function * () {
    let userData = yield $.ajax({url: 'getUserData'})

    if (userData.type == 'VIP') {
        let items = yield $.ajax({url: 'getVIPItems'})
    } else {
        let items = yield $.ajax({url: 'getItems'})
    }
})
// yield 实例，用同步方式写异步
server.use(function * () {
    let data = yield db.query(`select * from user_table`)
    this.body = data
})

4、generator的用途

在JavaScript中,一个函数一旦被执行,就会执行到最后或者被return,运行期间不会被外部所影响打断,而generator的出现就打破了这种函数运行的完整性。

5、asnyc await

ES2017标准引入了asnyc函数，使得异步操作变得更加方便。其实asnyc 是generator函数的语法糖。