ES6 generator生成器函数 async

generator生成器函数

• 定义

• function后面加了*
• 函数体里有 yield关键字 在这里起到了十分重要的作用，就相当于暂停执行并且返回信息。有点像传统函数的return的作用，是暂停执行
• Generator函数被调用后得到的生成器理解成一个遍历器iterator，用于遍历函数内部的状态。

function * 函数名{
let obj = yield "生成器函数"
} 

表现形式

• 调用这个函数，不会立即执行函数体里的内容，返回一个对象
• 通过这个对象的next方法，可以驱动函数的执行，但是并不会执行完，执行到下一个yield关键字的时候，停住
• 调用next()方法返回的结果
• value： yield关键字后面的表达式的结果。
• done：函数是否执行完。 （当函数return的时候执行完，返回true）
• 函数return的时候，value是return的内容，done是true
• next()方法可以加参数
• next(参数)
• 这个参数会作为上一个yield关键字的返回值

作用

• 函数可以返回多个值
• 在调用函数之后，可以给函数体里传递数据了
• 调用函数的时候，可以控制函数内部的执行了
• 可以解决异步问题

 

生成器函数的执行器

//定义生成器函数

function* initData() {

        let category = yield getShopCategory();

        let goods = yield getGoods(category[0].id);

        let comment = yield getComment(goods[0].id);

        return comment;

    }

  // 书写生成器函数执行函数

    function run(gen) {

        let lt = gen();

        return new Promise((reslove, reject) => {

            function step(data) {

                if (data.done) {

                    console.log('递归调用结束了');

                    reslove(data.value);

                } else {

                    data.value.then(res => {

                        step(lt.next(res))

                    })

                }

            }

            step(lt.next())

        })

    }

    //调用执行

    run(initData).then(res => {

        console.log(res);

    })

　　

async/await

这是ES7的语法，它是基于generator函数做的语法糖。

直接运行到结果

async function initData() {
        let category = await getShopCategory();
        let goods = await getGoods(category[0].id);
        let comment = await getComment(goods[0].id);
        return comment;
    }
    initData().then(res => {
        console.log(res)
    })