什么是生成器

• 生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等；

• 平时我们会编写很多的函数，这些函数终止的条件通常是返回值或者发生了异常；

• 生成器函数也是一个函数，但是和普通的函数有一些区别：

  1. 首先，生成器函数需要在function的后面加一个符号：*；
  2. 其次，生成器函数可以通过yield关键字来控制函数的执行流程；
  3. 最后，生成器函数的返回值是一个Generator（生成器）

生成器其实是一种特殊的迭代器；

MDN: Instead, they return a special type of iterator, called a Generator.

生成器函数执行

生成器函数被调用后，它的函数体并不会立刻被执行，而是返回一个生成器对象；

而生成器其实是一种特殊的迭代器，因此它有next方法，并且会返回一个{done: true/false, value: xxx/undefined}这样的对象，当next()方法被首次（后续）调用时，它开始执行生成器函数中代码到首次（后续）出现yield的位置为止；

我们可以通过yield语句来返回结果作为value，yield语句后面可以写一个表达式或者一个值；

function* bar() {
  console.log("bar start");
  console.log("bar chunk1");
  yield;
  console.log("bar chunk2");
  yield;
  console.log("bar chunk3");
  yield;
  console.log("bar end");
}
const barResult = bar();
barResult.next();
// bar start
// bar chunk1
barResult.next();
// bar chunk2
barResult.next();
// bar chunk3
barResult.next();
// bar end
barResult.next();

function* bar() {
  console.log("bar start");
  console.log("bar chunk1");
  yield "result1";
  console.log("bar chunk2");
  yield "result2";
  console.log("bar chunk3");
  yield "result3";
  console.log("bar end");
}
const barResult = bar();
console.log(barResult.next()); // { value: 'result1', done: false }
console.log(barResult.next()); // { value: 'result2', done: false }
console.log(barResult.next()); // { value: 'result3', done: false }
console.log(barResult.next()); // { value: undefined, done: true }

生成器传递参数-next函数

函数既然可以暂停来分段执行，那么函数应该是可以传递参数的，我们是否可以给每个分段来传递参数呢？

• 答案是可以的 ；
• 我们在调用next函数的时候，可以给它传递参数，这个参数会作为上一个yield语句的返回值；
• 注意：也就是说我们是为本次的函数代码块执行提供了一个值；

function* foo(initial) {
  console.log("foo start");
  const value1 = yield initial + "aaa";
  const value2 = yield value1 + "bbb";
  const value3 = yield value2 + "ccc";
}

const generator = foo("sss");
const result1 = generator.next();
console.log("result1:", result1);
// foo start
// result1: { value: 'sssaaa', done: false }
const result2 = generator.next(result1.value);
console.log("result2:", result2);
// result2: { value: 'sssaaabbb', done: false }
const result3 = generator.next(result2.value);
console.log("result3:", result3);
// result3: { value: 'sssaaabbbccc', done: false }

生成器提前结束-return函数

还有一个可以给生成器函数传递参数的方法是通过return函数；

return传值后这个生成器函数就会结束，之后调用next不会继续生成值了；

function* bar() {
  const value1 = yield "lzh";
  console.log("value1:", value1);
  const value2 = yield value1;
  const value3 = yield value2;
}

const generator = bar();
console.log(generator.next());
// { value: 'lzh', done: false }

// 第二段代码的执行, 使用了return
// 那么就意味着相当于在第一段代码的后面加上return, 就会提前终端生成器函数代码继续执行
console.log(generator.return(123));
// { value: 123, done: true }
console.log(generator.next());
// { value: undefined, done: true }

生成器抛出异常-throw函数

除了给生成器函数内部传递参数之外，也可以给生成器函数内部抛出异常：

• 抛出异常后我们可以在生成器函数中捕获异常；
• 但是在catch语句中不能继续yield新的值了，但是可以在catch语句外使用yield继续中断函数的执行；

function* foo() {
  console.log("代码开始执行~");

  const value1 = 100;
  try {
    yield value1;
  } catch (error) {
    console.log("捕获到异常情况:", error);

    yield "abc";
  }

  console.log("第二段代码继续执行");
  const value2 = 200;
  yield value2;

  console.log("代码执行结束~");
}

const generator = foo();

const result = generator.next();
console.log(result);
//{ value: 100, done: false }
generator.throw("error message");
// 捕获到异常情况: error message
console.log(generator.next());
// 第二段代码继续执行
// { value: 200, done: false }

生成器替代迭代器

既然生成器是一种特殊的迭代器，那么在某些情况下我们可以使用生成器来替代迭代器：

// 不使用生成器来实现
function createArrayIterator(array) {
  let index = 0;
  return {
    next() {
      if (index < array.length) {
        return { done: false, value: array[index++] };
      } else {
        return { done: true, value: undefined };
      }
    },
  };
}
const names = ["wws", "cck", "hsq"];
const namesIterator = createArrayIterator(names);
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());

// 使用生成器来实现
function* createArrayIterator(array) {
  // for (const index in array) {
  //   yield array[index];
  // }
  yield* array; // 相当于上面语句的操作
}

注意到上面我们使用了yield* array这种写法，它用于委托给另一个generator或者可迭代对象。

自定义类迭代-生成器实现

// ClassRoom案例
class ClassRoom {
  constructor(address, name) {
    this.address = address;
    this.name = name;
    this.students = [];
  }
  entry(...students) {
    this.students.push(...students);
  }
  // [Symbol.iterator]() {
  //   let index = 0;
  //   return {
  //     next: () => {
  //       if (index < this.students.length) {
  //         return { done: false, value: this.students[index++] };
  //       } else {
  //         return { done: true, value: undefined };
  //       }
  //     },
  //   };
  // }
  [Symbol.iterator] = function* () {
 // for (const index in array) {
  //   yield array[index];
  // }
  yield* array;
  };
}

const classroom = new ClassRoom("广州天河", "js高级课程");
classroom.entry("lzh", "coder1", "coder2");
for (const student of classroom) {
  console.log(student);
}

对生成器的操作

既然生成器是一个迭代器，那么也就意味着迭代器支持的操作它都支持：

• for...of语法；
• Promise.all/allSettled/race/any方法调用；
• 展开语法；
• 解构赋值；
• Set/Map构造函数调用...

异步代码的处理方案

目前为止，我们已经学习了Promise，生成器，迭代器了，那么，让我们来看一下异步代码的最终处理方案；

案例

假设我们需要向服务器发送网络请求来获取数据，一共需要发送三次请求，并且第二次请求的URL依赖于第一次的结果，第三次请求的URL依赖于第二次的结果。

function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(url);
    });
  }, 1000);
}

方案一：通过多次回调

requestData("aaa").then((value) => {
  requestData(`${value}bbb`).then((value) => {
    requestData(`${value}ccc`).then((value) => {
      console.log("finally result:", value);
    });
  });
});
// finally result: aaabbbccc

采用回调函数的方式会造成回调地狱

方案二：使用promise对象的then方法返回值

requestData("aaa")
  .then((value) => requestData(`${value}bbb`))
  .then((value) => requestData(`${value}ccc`))
  .then((value) => {
    console.log("finally result:", value);
  });

这种方法虽然解决了回调地狱，但是代码的可读性比较低

方案三：使用Promise加generator

function* getData(url) {
  const value1 = yield requestData(url);
  const value2 = yield requestData(`${value1}bbb`);
  const value3 = yield requestData(`${value2}ccc`);
  console.log("finally result:", value3);
}
// 3.1执行代码的方案：每次都手动执行
// const generator = getData("aaa");
// generator.next().value.then((value) => {
//   generator.next(value).value.then((value) =>
//     generator.next(value).value.then((value) => {
//       return generator.next(value).value;
//     })
//   );
// });
// 3.2封装一个函数来执行生成器函数
function execGenerator(generatorFn, arg) {
  const generator = generatorFn(arg);
  function _exec(generator, arg) {
    const result = generator.next(arg);
    if (result.done) {
      return result.value;
    } else {
      result.value.then((value) => {
        _exec(generator, value);
      });
    }
  }
  _exec(generator);
}
// execGenerator(getData, "aaa");
// 3.3使用第三方库：co
const co = require("co");
co(getData, "aaa");

我们通过Promise+generator封装了一个包含我们请求逻辑的生成器函数，并编写了一个工具函数来执行这样的生成器函数（也可以使用第三方库co）；

方案四：使用async/await

在ES8中新增的async和await能够很好地帮助我们编写执行这样类似于方案三中的代码：

async function getData(url) {
  const value1 = await requestData(url);
  const value2 = await requestData(`${value1}bbb`);
  const value3 = await requestData(`${value2}ccc`);
  console.log("finally result:", value3);
}
getData("aaa");

async/await的目的为了简化使用基于 promise 的 API 时所需的语法。async/await的行为就好像搭配使用了生成器和 promise。