文章目录

生成器

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

function * gen(){
   yield '一只没有耳朵';
   console.log(222);
   yield '一只没有尾巴';
   yield '真奇怪';
}
let iterator = gen();
console.log(iterator.next());  //一只没有耳朵 
console.log(iterator.next());   // 先打印222 再返回一只没有尾巴
console.log(iterator.next());   //真奇怪

代码说明：

  1. * 的位置没有限制
  2. 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法返回的是yield 语句后的值
  3. yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next方法，执行一段代码(到yield截至)
  4. next 方法可以传递实参，作为 上一个 yield 语句的返回值

生成器函数的参数

<script>
        function * gen(arg){
            console.log(arg);
            let one = yield 111;
            console.log(one);
            let two = yield 222;
            console.log(two);
            let three = yield 333;
            console.log(three);
        }

        //执行获取迭代器对象
        let iterator = gen('AAA');  
        console.log(iterator.next()); //AAA  111
        //next方法可以传入实参
        console.log(iterator.next('BBB')); // BBB 222
        console.log(iterator.next('CCC')); // CCC 333
        console.log(iterator.next('DDD')); // DDD undefine
        
    </script>

生成器函数示例

示例一：1s 后控制台输出 111 2s后输出 222 3s后输出 333(总时长6秒)
如果使用回调函数：

setTimeout(() => {
            console.log(111);
            setTimeout(() => {
                console.log(222);
                setTimeout(() => {
                    console.log(333);
                }, 3000);
            }, 2000);
        }, 1000);

如果回调的函数增多则会很麻烦，代码结构很凌乱。

而使用生成器：

function one(){
            setTimeout(()=>{
                console.log(111);
                iterator.next();
            },1000)
        }

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

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

        function * gen(){
            yield one();
            yield two();
            yield three();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();

这个next调用一定是在每一次回调结束后再去执行。如果最后并列着写三个next调用，那么总时长只有三秒，因为他们几乎是同一时间被加入到异步进程处理器中。

示例二： 模拟获取 用户数据 订单数据 商品数据

<script>
        //模拟获取  用户数据  订单数据  商品数据 
        function getUsers(){
            setTimeout(()=>{
                let data = '用户数据';
                //调用 next 方法, 并且将数据传入
                iterator.next(data);
            }, 1000);
        }

        function getOrders(){
            setTimeout(()=>{
                let data = '订单数据';
                iterator.next(data);
            }, 1000)
        }

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

        function * gen(){
            let users = yield getUsers();
            let orders = yield getOrders();
            let goods = yield getGoods();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();

    </script>