3-1-1-4-ES6 - 10 生成器 - 《Python 全栈开发与分析电子书(上)-V2022》

// generator函数 可以通过yield关键字，将函数挂起，为了改变执行流提供了可能，同时为了做异步编程提供了方案
// 它普通函数的区别
// 1.function后面 函数名之前有个*
// 2.只能在函数内部使用yield表达式，让函数挂起
/*  function* func() {
    console.log('one');
    yield 2;
    console.log('two');
    yield 3;
    console.log('end');   
}
// 返回一个遍历器对象 可以调用next()
let fn = func();
// console.log(o)
console.log(fn.next());
console.log(fn.next());
console.log(fn.next()); */
// 总结：generator函数是分段执行的，yield语句是暂停执行  而next()恢复执行
function* add() {
    console.log('start');
    // x 可真的不是yield '2'的返回值，它是next()调用 恢复当前yield()执行传入的实参
    let x = yield '2';
    console.log('one:'+x);
    let y = yield '3';
    console.log('two:'+y);
    return x+y;  
}
const fn = add();
console.log(fn.next()); //{value:'2',done:false}
console.log(fn.next(20)); //{value:'3',done:false}
console.log(fn.next(30)); //{value:50,done:true}
// 使用场景1：为不具备Interator接口的对象提供了遍历操作
function* objectEntries(obj) {
    // 获取对象的所有的key保存到数组 [name,age]
    const propKeys = Object.keys(obj);
    for(const propkey of propKeys){
        yield [propkey,obj[propkey]]
    }
}
const obj = {
    name:'mufeng',
    age:18
}
obj[Symbol.iterator] = objectEntries;
console.log(obj);
for(let [key,value] of objectEntries(obj)){
    console.log(`${key}:${value}`);  
}

用于异步(了解)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>11 Generator的应用</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
        // Generator 部署ajax操作，让异步代码同步化
        // 回调地狱
        /* $.ajax({
            url: 'https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976',
            method: 'get',
            success(res) {
                console.log(res);
                // 继续发送请求
                $.ajax({
                    url: '',
                    method: 'get',
                    success(res1) {
                        // 发送ajax
                        $.ajax({
                            url: '',
                            method: 'get',
                            success(res2) {
                                // 发送ajax
                                $
                            }
                        })
                    }
                })
            }
        }) */
        /* function* main() {
            console.log('main');
            let res = yield request(
                'https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976'
            )
            console.log(res);
            // 执行后面的操作
            console.log('数据请求完成，可以继续操作');
        }
        const ite = main();
        ite.next();
        function request(url) {
            $.ajax({
                url,
                method: 'get',
                success(res) {
                    ite.next(res);
                }
            })
        } */
        // 加载loading...页面
        // 数据加载完成...（异步操作）
        // loading关闭掉
        function* load() {
            loadUI();
            yield showData();
            hideUI();
        }
        let itLoad = load();
        itLoad.next();
        function loadUI() {
            console.log('加载loading...页面');
        }
        function showData() {
            // 模拟异步操作
            setTimeout(() => {
                console.log('数据加载完成');
                itLoad.next();
            }, 1000);
        }
        function hideUI() {
            console.log('隐藏loading...页面');
        }
    </script>
</body>
</html>