ES6 生成器Generator
2022-05-05 本文已影响0人
生命里那束光
一、生成器函数声明与调用
概述：
生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同；
next方法返回结果是一个对象
二、生成器函数参数
哪些是异步操作：
异步编程：纯回调函数、 node、 fs 、 ajax 、mongodb、文件操作、 网络操作(ajax, request) 、数据库操作
三、生成器函数实例1
- 要实现的效果：1s 后控制台输出 111 2s后输出 222 3s后输出 333
方法一：回调地狱
<body>
<script>
setTimeout(() => {
console.log(111);
setTimeout(() => {
console.log(222);
setTimeout(() => {
console.log(333);
}, 3000);
}, 2000);
}, 1000);
</script>
</body>
方法二：生成器函数
<body>
<script>
//定义第一个异步任务
function one() {
setTimeout(() => {
console.log(111);
iterator.next();//移动指针，执行输出下一个
}, 1000)
}
//定义第二个异步任务
function two() {
setTimeout(() => {
console.log(222);
iterator.next();//移动指针，执行输出下一个行输出下一个
}, 2000)
}
//定义第三个异步任务
function three() {
setTimeout(() => {
console.log(333);
iterator.next();//移动指针，执行输出下一个
}, 3000)
}
//声明一个生成器
function* gen() {
//把三个异步函数的调用放入yield
yield one();
yield two();
yield three();
}
//调用生成器函数
let iterator = gen();//把gen()作为迭代器
iterator.next(); //执行迭代器的next方法，进行指针移动
</script>
</body>
四、生成器函数实例2
- 要实现的效果：模拟获取 用户数据 用户的订单数据 订单中的商品数据
方法一：
getUsers();
getOrders();
getGoods();能实现效果，但是不符合实际应用场景；
数据相互关联，要先获取到用户数据，在用户数据基础上，获取用户的订单信息；
忽略了数据之间的层级关联性
方法二：
<body>
<script>
//模拟获取 用户数据 订单数据 商品数据
//定义获取用户信息的异步函数
function getUsers() {
setTimeout(() => {
let data = '用户数据';
//调用 next 方法, 并且将数据传入
iterator.next(data);//移动指针，执行输出下一个
}, 1000);
}
//定义获取订单信息的异步函数
function getOrders() {
setTimeout(() => {
let data = '订单数据';
iterator.next(data);//移动指针，执行输出下一个
}, 1000)
}
//定义获取商品信息的异步函数
function getGoods() {
setTimeout(() => {
let data = '商品数据';
iterator.next(data);//移动指针，执行输出下一个
}, 1000)
}
//声明一个生成器
function* gen() {
//把三个异步函数的调用放入yield，形成依次关系
let users = yield getUsers();
let orders = yield getOrders();
let goods = yield getGoods();
}
//调用生成器函数
let iterator = gen();//把gen()作为迭代器
iterator.next();//执行迭代器的next方法，进行指针移动
</script>
</body>
