前端学习：ES6中的生成器

1.生成器

在没有生成器之前我们异步编程使用的是纯回调函数

概念：生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同；

基本使用：

 // 声明生成器
    function* gen() {
        console.log("你好");
    }

    let iterator = gen();
    console.log(iterator);

运行结果：

 从运行结果来看我们可以看出并不是我们想要的结果。打印出来的可以看出是一个迭代器，可以调用next方法。为了让生成器中的代码运行，我们就利用迭代器的iterator的next属性来调用。具体做法利用以下代码。

 iterator.next();

生成器中有一个特殊的代码分隔符：yield

function* gen() {
        console.log("aaa");
        yield '一只没有耳朵';
        console.log("bbb");
        yield '一只没有尾巴';
        console.log("ccc");
        yield '真奇怪';
        console.log("ddd");
        console.log("eee");
    }

    let iterator = gen();
    // console.log(iterator);
    iterator.next();
    iterator.next();
    iterator.next();
    iterator.next();

 因为此处是迭代器对象，所以在调用的过程中我们可以通过for...of进行遍历。

 function* gen() {
        // console.log("aaa");
        yield '一只没有耳朵';
        // console.log("bbb");
        yield '一只没有尾巴';
        // console.log("ccc");
        yield '真奇怪';
        // console.log("ddd");
        // console.log("eee");
    }

    let iterator = gen();
    for (let v of iterator) {
        console.log(v);
    }

 2.生成器函数参数

因为生成器是一个函数，所有我们可以向函数传递参数

function* gen(arg) {
        console.log(arg);
        let one = yield 111;
        console.log(one);
        yield 222;
        yield 333;
    }

    // 执行获取迭代器对象
    let iterator = gen("qqq");
    console.log(iterator.next());
    console.log(iterator.next("bbb"));
    console.log(iterator.next());
    console.log(iterator.next());

上述代码中表示我们函数参数传入是没有问题的。在next方法中传入参数，该参数将作为上一个yield语句的输出。即为one的输出结果。

3.生成器函数实例

实例需求1：1s后控制台输出111，2s后输出222，3s后输出333。具体代码如下：

// 生成器函数实例
    function one() {
        setTimeout(() => {
            console.log(111);
            genn.next();
        }, 1000)
    }

    function two() {
        setTimeout(() => {
            console.log(222);
            genn.next();
        }, 2000)
    }

    function three() {
        setTimeout(() => {
            console.log(333);
            genn.next();
        }, 3000)
    }
    function* gen() {

        yield one();

        yield two();

        yield three();
    }

    let genn = gen();
    genn.next();

实例2需求：模拟获取用户数据，订单数据，商品数据

function getUsers() {
        setTimeout(() => {
            let data = "用户数据";
            // 调用next方法，并将数据传入
            genn.next(data);
        }, 1000)
    }

    function getOders() {
        setTimeout(() => {
            let data = "订单数据";
            genn.next(data);
        }, 1000)
    }

    function getGoods() {
        setTimeout(() => {
            let data = "商品数据";
            genn.next(data);
        }, 1000)
    }

    function* gen() {
        let users = yield getUsers();
        console.log(users);
        let orders = yield getOders();
        console.log(orders);
        let goods = yield getGoods();
        console.log(goods);
    }

    let genn = gen();
    // console.log(genn.next());
    genn.next();