ES6 Generator的作用及代码实现

用处：
1.状态机(有限状态交替变化)有限状态自动机，每运行一次改变一次状态
Generator 函数实现的状态机：
状态维护在generator函数内部，外部无法修改

function* generator_clock(){
		    while(true){
		        console.log("开")
		yield;
		console.log("关")
		yield;
 }
		}
var gclock=generator_clock();
		gclock.next();
		gclock.next();
		gclock.next();
		gclock.next();

返回结果：
在这里插入图片描述
2.为不具备迭代器功能的object对象提供一个遍历方法

function* objEntries(obj){
		const propKeys=Reflect.ownKeys(obj);
		for(const propKey of propKeys){
		yield [propKey,obj[propKey]]
			}
		}
		const obj={one:"larry",two:"Jane",three:"Tom"}
		for(const [key,value] of objEntries(obj)){
		console.log(key+":"+value);
		}

返回结果:
在这里插入图片描述

3.异步操作同步化

function* main(){
		var result =yield request("http://47.106.244.1:8099/manager/user/findAllUser");
		console.log(result)
        }
        function request(url){
            axios.get(url).then((response)=>{
                it.next(response)
            })
        }
        var it = main()
        it.next()

将其代码转换到网页实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步同步化</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
</head>
<body>
    <script>
    function* main(){
		var result =yield request("http://47.106.244.1:8099/manager/user/findAllUser");
		console.log(result)
        }
        function request(url){
            axios.get(url).then((response)=>{
                it.next(response)
            })
        }
        var it = main()
        it.next()

    </script>
</body>
</html>

返回结果：
在这里插入图片描述

ES6 Generator的作用及代码实现

猜你喜欢