前言

生成器

一、生成器是什么？

生成器就是一个特殊的函数，实现异步编程。格式function *名称(){...}
(这个*靠近function写，靠近名称写，或者两边空格都不靠近均正确)

二、生成器

生成器函数声明比较特殊：特殊在声明用*，而且该函数有iterator实现接口，是迭代器对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function* dr() {
            console.log("a");
        }
        let iterator = dr();
        console.log(iterator);
    </script>
</body>

</html>

在这里插入图片描述

生成器执行用next

        function* dr() {
            console.log("a");
            console.log("b");
        }
        let iterator = dr();
        iterator.next();

在这里插入图片描述

生成器函数执行后的返回对象
既然上面说它是迭代器对象，它调用next的工作原理跟迭代器的相似：next每调用一次，指针就往后移动一位；返回的是包含value，done属性的对象。
只不过它的next移动只有函数里设置yield时，才会实现next分层执行（可以理解为yield是函数代码分隔符，下面的代码:yield “111”,yield "222"把代码分成三部分，第一部分是yield "111"及上面，第二部分是yield "111"与yield “222"之间包括yield"222”，第三部分是yield "222"下面）。
否则默认全部为一次执行（即上面的图片执行结果）
（如果对迭代器不熟的，可以看我上篇文章）
next的返回结果的value是yield的值
next调用时，就是每调用一次运行上面所说的分成的部分

	function* dr() {
            console.log("a");
            yield "111";
            console.log("b");
            yield "222";
            console.log("c");
        }
        let iterator = dr();
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

在这里插入图片描述

生成器传参（生成器函数传参和next传参）
注意：next传参是改变上一个yield … 的返回结果

	function* dr(arg) {
            console.log(arg);
            let one = yield "111";
            console.log(one);
            yield "222";
            console.log("c");
        }
        let iterator = dr("aaa");
        console.log(iterator.next());
        console.log(iterator.next("bbb"));
        console.log(iterator.next());

在这里插入图片描述

实例
模拟：1s后获取用户数据，2s后获取订单信息，3s后获取商品信息

		<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function getUsers() {
            setTimeout(() => {
                let data = "用户数据";
                iterator.next(data);
            }, 1000)
        }

        function getOrders() {
            setTimeout(() => {
                let data = "订单信息";
                iterator.next(data);
            }, 2000)
        }

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

        function* dr() {
            let user = yield getUsers();
            console.log(user);
            let order = yield getOrders();
            console.log(order);
            let good = yield getGoods();
            console.log(good);
        }
        let iterator = dr();
        iterator.next();
    </script>
</body>

</html>