ES6系列九：generator

短命女 2022-02-01 08:21 180阅读 0赞

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

function show() {
        console.log('a')
        console.log('b')
    }
    show()  // 普通函数
    
    function *show2() {
        console.log('1')
        yield  //暂停
        console.log('2')  //需要调用next()方法启动执行
    }
    let genObj = show2()
    genObj.next()  // 结果：1
    genObj.next()  // 结果：2
    genObj.next()  // 最后了，没有结果

二、generator yield  
yield  
 既可传参，又可以返回。  
 第一个next()传参无效，只用来启动。  
如果函数前漏掉 \*  
 就是普通函数。  
 如果有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返回

三、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
    })