生成器 (Generator)
什么是生成器?
- 生成器是一个通过构造函数Generator创建的对象,生成器既是一个迭代器,同时又是一个可迭代对象
如何创建生成器?
- 生成器的创建,必须使用生成器函数(Generator Function)
如何书写一个生成器函数呢?
- //这是一个生成器函数,该函数一定返回一个生成器
function* method(){
}
生成器函数内部是如何执行的?
- 生成器函数内部是为了给生成器的每次迭代提供的数据
- 每次调用生成器的next方法,将导致生成器函数运行到下一个yield关键字位置
- yield是一个关键字,该关键字只能在生成器函数内部使用,表达“产生”一个迭代数据。
有哪些需要注意的细节?
- 生成器函数可以有返回值,返回值出现在第一次done为true时的value属性中
- 调用生成器的next方法时,可以传递参数,传递的参数会交给yield表达式的返回值
- 第一次调用next方法时,传参没有任何意义
- 在生成器函数内部,可以调用其他生成器函数,但是要注意加上*号
生成器的其他API
- return方法:调用该方法,可以提前结束生成器函数,从而提前让整个迭代过程结束
- throw方法:调用该方法,可以在生成器中产生一个错误
实例与控制台输出:
function* getGrry1() {
console.log('第一次运行了');
yield 1;
console.log('第二次运行了');
yield 2;
console.log('第三次运行了');
yield 3;
console.log('第四次运行了');
yield 4;
console.log('第五次运行了');
return 5;
}
const arry2 = getGrry1();
/**控制台...
arry2.next()
es6-2.html:16 第一次运行了
{value: 1, done: false}
arry2.next()
es6-2.html:18 第二次运行了
{value: 2, done: false}
arry2.next()
es6-2.html:20 第三次运行了
{value: 3, done: false}
arry2.next()
es6-2.html:22 第四次运行了
{value: 4, done: false}
arry2.next()
es6-2.html:24 第五次运行了
{value: 5, done: true}
arry2.next()
{value: undefined, done: true}
*/
function* test() {
let info = yield 1;
console.log(info);
info = yield 2 + info;
console.log(info);
}
const test1 = test();
/** 控制台...
test1.next(2)
{value: 1, done: false}
test1.next(2)
es6-2.html:30 2
{value: 4, done: false}
test1.next(2)
es6-2.html:32 2
{value: undefined, done: true}
*/
function* test4() {
yield 1;
yield 2;
}
function* test5() {
yield* test4();
yield "a";
yield "b";
yield "c";
}
const test3 = test5();
/** 控制台输出...
test3.next()
{value: 1, done: false}
test3.next()
{value: 2, done: false}
test3.next()
{value: "a", done: false}
test3.next()
{value: "b", done: false}
test3.next()
{value: "c", done: false}
test3.next()
{value: undefined, done: true}
*/
生成器应用-异步任务控制
function* task() {
const d = yield 1;
console.log(d);
//d:1
// const a = yield 'abc';
// console.log(a);
const resp = yield fetch("https://zhidao.baidu.com/api/comment?method=get_new_comment_count&app=qb&thread_id=146408949");
const result = yield resp.json();
console.log(result);
}
run(task)
function run(generatorFunc) {
const generator = generatorFunc();
let result = generator.next();//启动任务(开始迭代),得到数据
handleResult();
//对Result处理
function handleResult() {
if (result.done) {
return;//迭代完成
}
//迭代没有完成,分两种情况
//1.迭代的数据是一个Promise
//2.迭代的数据是其他数据
if (typeof result.value.then === "function") {
//1.迭代的数据是一个Promise
result.value.then(data => {
result = generator.next(data)
handleResult();
}), err => {
generator.throw(err);
}
} else {
//2.迭代的数据是其他数据,直接进行下一代迭代
result = generator.next(result.value);
handleResult();
}
}
}