生成器-复习

生成器 (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();
        }
      }
    }