generate 解决异步操作问题

最新推荐文章于 2023-03-04 11:53:34 发布

炉火纯青-旺

最新推荐文章于 2023-03-04 11:53:34 发布

阅读量236

点赞数

文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/qq_34870529/article/details/120766800

版权

<!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>迭代器</title>
</head>

<body>
    <script>
        // for of 循环
        let arr = ['a', 'b', 'c', 'd'];
        // for (let val in arr) { // for in 循环key值   对于数组来说key值为下标
        //     console.log(val)
        // }

        // for (let val of arr) { // for of 循环value值   对于数组来说value值为数组每一项
        //     console.log(val)
        // }

        let obj = {
            a: 1,
            b: 2,
            c: 3
        }

        // for (let attr in obj) {
        //     console.log(attr); // a b c
        // }

        // 对象添加迭代属性 控制for of 循环出的结果
        obj[Symbol.iterator] = function () {
            // 迭代协议
            let keys = Object.keys(obj);
            let index = 0;
            return {
                next() {
                    if (index >= keys.length) {
                        return {
                            done: true
                        }
                    } else {
                        return {
                            done: false,
                            value: {
                                key: keys[index],
                                value: obj[keys[index++]]
                            }
                        }
                    }
                }
            }
        }

        // for (let val of obj) {
        //     console.log(val); // obj is not iterable
        // }
        // console.log(arr);
        // console.log(obj);

        // console.dir(arr);
        // console.dir(obj);

        // generate 迭代异步操作  --> 通过封装co函数实现

        function* fn() {
            yield new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(1);
                }, 500);
            });
            yield new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(2);
                }, 500);
            });
            yield new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(3);
                }, 500);
            });
        }

        co();

        function co() {
            let f = fn();
            next();
            async function next() {
                const {
                    done,
                    value
                } = f.next();
                if (!done) {
                    const val = await value;
                    console.log(val);
                    next();
                }
            }
        }
    </script>
</body>

</html>

炉火纯青-旺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
generate 解决异步操作问题

<!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>迭.
复制链接

扫一扫