ES6-----Generator

最新推荐文章于 2024-08-29 15:33:50 发布

桃子耶耶

最新推荐文章于 2024-08-29 15:33:50 发布

阅读量135

点赞数 2

文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/m0_46677484/article/details/126937526

版权

Generator函数是ES6提供的一种异步编程解决方法，

Generator函数的理解：

语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

形式上，Generator 函数是一个普通函数，但是有两个特征：

**1.function 和函数名之间必须有 * 号**

2.函数体内部使用`yield`表达式，定义不同的内部状态。

<!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>
	<!-- Generator函数返回一个迭代器对象
		next()方法 会执行yiled状态 
		一个yield就是一个状态 一个yield就是代码节点 
	-->
	<script>
		function* Generator(){
			// 内部使用yield表示式 
			yield '我是状态1';//返回值 对这个状态的描述
			yield '我是状态2';
			yield '我是状态3';
		}
		let res=Generator();//返回值 返回的是一个迭代器对象/generator对象
		console.log(res.next()); //执行第一个状态
		console.log(res.next()); //执行下一个状态
		console.log(res.next()); //执行下一个状态
		console.log(res.next()); 

	</script>

</body>
</html>

Generator的异步应用

模拟发起异步请求拿到第一个状态的返回结果再执行第二个状态，状态之间数据传递通过next

<!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/axios/0.27.2/axios.js"></script>
</head>
<body>
	<!-- Generator函数返回一个迭代器对象
		next()方法 会执行yiled状态 
		一个yield就是一个状态 一个yield就是代码节点 
	-->
	<script>
 // Generator函数 异步编程解决方案  异步代码 同步编写
		function* Generator(){
			let res=yield getData();
			console.log(res,'获取响应');
			yield '结束了';
		}
		let res=Generator();//返回值 返回的是一个迭代器对象/generator对象
		res.next();
		async function getData(){
			// 发起一个异步请求
			let result= await axios.get('http://xx.xxx.xxx.xx:xxx/index/article/findCategoryArticles');
			// 应该在第一个状态的异步请求中发起第二段程序/第二个状态的执行 
			// 上一个状态返回值作为下一个状态的入口
			// 第一个状态1方法里面发起第二个状态的执行 
			res.next(result);
		}

		
	</script>

</body>
</html>