ES9 生成器组合器的实战应用及细节心得

前言

在 JavaScript 中，生成器是一种特殊的函数，它可以在执行过程中暂停并回传一个值，然后再从暂停的位置继续执行。ES9 中新增的生成器组合器语法，可以让我们更方便地组合生成器函数，实现更复杂的异步流程控制。

本文将介绍 ES9 生成器组合器的基本用法和实战应用，以及一些细节心得，希望能够帮助大家更好地理解和应用这一语法。

基本用法

ES9 中新增的生成器组合器语法，使用 yield* 关键字来调用另一个生成器函数，将生成器函数的控制权转移给另一个生成器函数，直到另一个生成器函数执行完毕或者遇到 return 语句，才会返回控制权。

下面是一个简单的示例代码，演示了如何使用生成器组合器来调用两个生成器函数：

function* generatorA() {
  yield 'A1';
  yield 'A2';
  yield 'A3';
}

function* generatorB() {
  yield 'B1';
  yield 'B2';
  yield 'B3';
}

function* generatorC() {
  yield* generatorA();
  yield* generatorB();
}

const generator = generatorC();
console.log(generator.next()); // { value: 'A1', done: false }
console.log(generator.next()); // { value: 'A2', done: false }
console.log(generator.next()); // { value: 'A3', done: false }
console.log(generator.next()); // { value: 'B1', done: false }
console.log(generator.next()); // { value: 'B2', done: false }
console.log(generator.next()); // { value: 'B3', done: false }
console.log(generator.next()); // { value: undefined, done: true }

在上面的示例代码中，我们定义了三个生成器函数 generatorA、generatorB 和 generatorC，其中 generatorC 使用 yield* 关键字来调用 generatorA 和 generatorB，将它们的值依次返回。

最后，我们创建了一个 generator 实例，并依次调用 next 方法，输出了所有的值。

实战应用

在实际开发中，我们可以使用生成器组合器来组合多个异步操作，实现更复杂的异步流程控制。

下面是一个示例代码，演示了如何使用生成器组合器来实现一个异步操作流程，依次执行两个异步函数，并在两个异步函数执行完毕后输出结果：

function sleep(duration) {
  return new Promise(resolve => setTimeout(resolve, duration));
}

async function asyncFunctionA() {
  await sleep(1000);
  return 'A';
}

async function asyncFunctionB() {
  await sleep(1000);
  return 'B';
}

function* generator() {
  const resultA = yield asyncFunctionA();
  const resultB = yield asyncFunctionB();
  return [resultA, resultB];
}

function run(generator) {
  const iterator = generator();

  function step(value) {
    const next = iterator.next(value);

    if (next.done) {
      return Promise.resolve(next.value);
    }

    return Promise.resolve(next.value).then(step);
  }

  return step();
}

run(generator).then(result => {
  console.log(result); // ['A', 'B']
});

在上面的示例代码中，我们定义了两个异步函数 asyncFunctionA 和 asyncFunctionB，它们都返回一个 Promise 对象，表示异步操作的结果。然后，我们定义了一个生成器函数 generator，它依次调用了 asyncFunctionA 和 asyncFunctionB。

最后，我们定义了一个 run 函数，它接受一个生成器函数作为参数，并递归调用生成器函数，直到生成器函数执行完毕。在递归调用过程中，我们使用 Promise 对象来处理异步操作的结果，并传递给下一个生成器函数。

细节心得

在使用生成器组合器的过程中，需要注意一些细节问题，以确保代码的正确性和可读性。

1. 错误处理

在异步操作中，可能会出现一些错误，需要对这些错误进行处理。如果使用 Promise 对象进行异步操作，可以使用 catch 方法来捕获错误。但是，在使用生成器组合器时，需要注意将错误传递给生成器函数的调用者。

下面是一个示例代码，演示了如何在生成器函数中处理错误：

async function asyncFunctionA() {
  await sleep(1000);
  throw new Error('Error in asyncFunctionA');
}

async function asyncFunctionB() {
  await sleep(1000);
  return 'B';
}

function* generator() {
  try {
    const resultA = yield asyncFunctionA();
  } catch (error) {
    return error;
  }
  const resultB = yield asyncFunctionB();
  return [resultA, resultB];
}

function run(generator) {
  const iterator = generator();

  function step(value) {
    let next;

    try {
      next = iterator.next(value);
    } catch (error) {
      return Promise.reject(error);
    }

    if (next.done) {
      return Promise.resolve(next.value);
    }

    return Promise.resolve(next.value).then(step).catch(error => {
      iterator.throw(error);
    });
  }

  return step();
}

run(generator).then(result => {
  console.log(result); // Error: Error in asyncFunctionA
});

在上面的示例代码中，我们在 asyncFunctionA 中抛出了一个错误，然后在生成器函数 generator 中使用 try...catch 语句来捕获错误。如果捕获到错误，我们将错误直接返回给调用者。

在 run 函数中，我们在调用 iterator.next 方法时，使用 try...catch 语句来捕获错误。如果捕获到错误，我们将错误直接抛出。在递归调用过程中，如果捕获到错误，我们使用 iterator.throw 方法来将错误传递给生成器函数的调用者。

2. 生成器函数的返回值

在生成器函数中，可以使用 return 语句来返回一个值。但是，在使用生成器组合器时，需要注意生成器函数的返回值是由生成器函数的调用者返回的，而不是由生成器函数本身返回的。

下面是一个示例代码，演示了生成器函数的返回值是由生成器函数的调用者返回的：

function* generatorA() {
  yield 'A1';
  yield 'A2';
  yield 'A3';
}

function* generatorB() {
  yield 'B1';
  yield 'B2';
  yield 'B3';
  return 'B4';
}

function* generatorC() {
  yield* generatorA();
  const resultB = yield* generatorB();
  yield resultB;
}

const generator = generatorC();
console.log(generator.next()); // { value: 'A1', done: false }
console.log(generator.next()); // { value: 'A2', done: false }
console.log(generator.next()); // { value: 'A3', done: false }
console.log(generator.next()); // { value: 'B1', done: false }
console.log(generator.next()); // { value: 'B2', done: false }
console.log(generator.next()); // { value: 'B3', done: false }
console.log(generator.next()); // { value: 'B4', done: false }
console.log(generator.next()); // { value: undefined, done: true }

在上面的示例代码中，我们定义了三个生成器函数 generatorA、generatorB 和 generatorC，其中 generatorB 使用 return 语句返回了一个值。在 generatorC 中，我们使用 yield* 关键字来调用 generatorA 和 generatorB，然后使用 yield 关键字将 generatorB 的返回值返回给调用者。

在调用 generator.next 方法时，我们可以看到 generatorB 的返回值是由生成器函数的调用者返回的，而不是由 generatorB 本身返回的。

总结

ES9 生成器组合器语法是一种非常强大的语法，可以让我们更方便地组合生成器函数，实现更复杂的异步流程控制。在使用生成器组合器时，需要注意错误处理和生成器函数的返回值，以确保代码的正确性和可读性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658dbb6feb4cecbf2d3b0148