- 可以看出通过yield的暂停是同步调用, 可以解决回调地狱, 但是不属于链式调用
- 返回值是一个generator封装返回的对象
- 若在yield的下一步用yield的返回值,需要在next调用时传入
- 第一阶段暂停前的用的参数, 也就是第一next调用时用到值,需要实例化的时候传入,不是在next的传入
- generator 产生的 iterator， 可以用next，在函数外部往 generator 里传数据， 又可以通过 throw 往里抛错, 需要捕捉catch捕捉处理
1. generator 传参:
function* gy() {
console.log("zero", zero, four)
let one = yield "first"
console.log("fisrt", one, five) // one若不再next中传入, 会没有值,是undefined
let two = yield "second"
console.log("second", two)
}
let zero = 0
let four = 4
let five = 5
let gen = gy(zero, four) // 第一阶段暂停前的用的参数, 也就是第一next调用时用到值,需要实例化的时候传入,不是在next的传入
// 定义generator自行函数
function autoGen(value) {
const a = gen.next(value)
console.log(a)
if (!a.done) {
autoGen(a.value, five)
}
}
autoGen()
2. generator 抛错 :
function* createGenerator() {
let first = yield 1;
let second;
try {
second = yield first + 2;
} catch (ex) {
second = 6;
}
yield second + 3;
}
let iterator = createGenerator();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next(4));
console.log(iterator.throw(new Error("Boom"))); // "{ value: 9, done: false }" 正常next不传值: "{ value: Nan, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
解析:
- 第三次调用 iterator.throw(new Error("Boom") 往generator 往抛入错误，函数内部在上次停止处即 yield first + 2 接收信息，抛出错误。但是被catch了
- 若不进行catch将会报错,影响下一步执行
- next() 和 throw() 都可以让 iterator 继续执行下去，不同的是后者会是以抛出错误的方式让 iterator 继续执行的,需要catch处理
3. generator return
function* createGenerator() {
yield 1;
return;
yield 2;
yield 3;
}
let returnGenertor = createGenerator();
console.log(returnGenertor.next()); // "{ value: 1, done: false }"
console.log(returnGenertor.next()); // "{ value: undefined, done: true }"
解析:
- return 语句， 功能上与一般函数的 return 没太大区别，都会阻止 return 之后的语句执行。
- return 后有值，会被计入本次迭代的结果中:
function* createGenerator() {
yield 1;
return 2;
yield 3;
}
let returnGenertor2 = createGenerator();
console.log(returnGenertor2.next()); // "{ value: 1, done: false }"
console.log(returnGenertor2.next()); // "{ value: 2, done: true }"
console.log(returnGenertor2.next()); // "{ value: undefined, done: true }"
解释:
- return 改变generator状态, 阻断yield的执行
- 本次return值会返回给value
4. gennerator 委托
function* createNumberIterator() {
yield 1;
yield 2;
}
function* createColorIterator() {
yield "red";
yield "green";
}
function* createCombinedIterator() {
yield* createNumberIterator();
yield* createColorIterator();
yield true;
}
var iterator = createCombinedIterator();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: "red", done: false }"
console.log(iterator.next()); // "{ value: "green", done: false }"
console.log(iterator.next()); // "{ value: true, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
解析:
// 1. 委托的语法, 用 yield* 类似 三点运算符 (...) 遍历展开 generator实例内部,以实现next的调用
5. Generator 委托 + return :
function* createNumberIterator() {
yield 1;
yield 2;
return 3;
}
function* createRepeatingIterator(count) {
for (let i = 0; i < count; i++) {
yield "repeat";
}
}
function* createCombinedIterator() {
let result = yield* createNumberIterator();
yield* createRepeatingIterator(result);
}
var iterator = createCombinedIterator();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: "repeat", done: false }"
console.log(iterator.next()); // "{ value: "repeat", done: false }"
console.log(iterator.next()); // "{ value: "repeat", done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
解释:
- 在委托里面, return不会改变委托主的generator的返回值
- 在委托里面, return的值将直接返回给什么变量,直接使用
let iterator = function *() {
yield *['a', 'b', 'c']
}
let gen = iterator()
console.log(gen.next())
console.log(gen.next())
console.log(gen.next())
for(let item of iterator()) {
console.log(item);
}
运行结果:
{ value: 'a', done: false }
{ value: 'b', done: false }
{ value: 'c', done: false }
a
b
c
解析:
// 1. 涉及iterator(对象迭代器)的遍历
// 2. for...in 遍历的可迭代对象的可迭代值
6. Genarator 与异步promise:
const asyncWork = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('asyncWorkPromise')
resolve(6)
}, 500)
})
run(function* () {
let value = yield asyncWork;
console.log(value)
value = yield value.then(res => { console.log(res) });
console.log(value)
});
// 自动运行generator函数
function run(taskDef) {
// 创建并保存 iterator，留到后面使用
let task = taskDef();
let result = task.next();
// 递归地执行 `next`
function step() {
// 如果没完的话
if (!result.done) {
result = task.next(result.value);
step();
}
}
// 开始处理
step();
}
运行结果:
Promise { <pending> }
Promise { <pending> }
asyncWorkPromise
6
解析:
// 1. generator是同步编译执行的, 但是promise的异步函数,还是回加入回调,晚于同步编译
一、 重点: generator 实现原理: (后续更新....)
二、没看懂 => 去看参考资料:
面试: 怎么往 Generator 里抛个错？ => jeyvie(掘金)
