ES6 从入门到精通 # 16：Generator 的应用-阿里云开发者社区

ES6 从入门到精通 # 16：Generator 的应用

2023-02-24 99

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ES6 从入门到精通 # 16：Generator 的应用

说明

ES6 从入门到精通系列（全23讲）学习笔记。

解决回调地狱

比如有个需求，需要通过接口 https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city= 先获取北京的天气，然后获取上海的，最后获取广州的。

<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <script>
        $.ajax({
            url: "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=北京",
            method: "get",
            success(res) {
                console.log("res", res);
                $.ajax({
                    url: "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=上海",
                    method: "get",
                    success(res1) {
                        console.log("res1", res1);
                        $.ajax({
                            url: "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=广州",
                            method: "get",
                            success(res2) {
                                console.log("res2", res2);
                                // ...
                            }
                        })
                    }
                })
            }
        })
    </script>    
</body>
</html>

上面就是回调地狱的展示，下面使用 Generator 处理，Generator 能让异步代码同步化

<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <script>
        function* main() {
            let res = yield getData("北京");
            console.log("res", res);
            let res1 = yield getData("上海");
            console.log("res1", res1);
            let res2 = yield getData("广州");
            console.log("res2", res2);
        }
        const ite = main();
        ite.next();
        function getData(city) {
            $.ajax({
                url: `https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=${city}`,
                method: "get",
                success(res) {
                    ite.next(res);
                }
            })
        }
    </script>    
</body>
</html>

其他例子：加载效果的异步

function loadUI() {
  console.log("加载----loading")
}
function getData() {
    setTimeout(() => {
        console.log("获取数据----data")
    }, 1000) 
}
function hideUI() {
    console.log("隐藏----loading")
}
loadUI();
getData();
hideUI();

下面使用 Generator 处理

function* loadMain() {
    loadUI();
    yield getData();
    hideUI();
}
function loadUI() {
    console.log("加载----loading")
}
function getData() {
    setTimeout(() => {
        console.log("获取数据----data")
        ite.next();
    }, 1000) 
}
function hideUI() {
    console.log("隐藏----loading")
}
const ite = loadMain();
ite.next();