玩转Generator、迭代器、执行器、async_await

一、Generator函数

1. 基本概念及用法

Generator函数是ES6提出的一种新的异步解决方案，它不同于一般的函数。Generator函数前面必须有*, 表明这是一个Generator函数。在Generator函数中使用yield可以生成一个Generator对象。Generator对象是一个迭代器，它可以被for...of循环遍历。

例如：

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const generatorObject = generator();

for (const value of generatorObject) {
  console.log(value); // 输出：1, 2, 3
}

2. Generator函数的优势

Generator函数的优势在于它可以很方便地处理异步操作。在Generator函数中，可以使用yield关键字暂停函数的执行，然后再使用next()方法继续执行函数。这样，就可以将异步操作分割成多个小块，然后逐个执行。

例如：

function* fetchUserData() {
  const response = yield fetch('https://example.com/user-data');
  const data = yield response.json();
  return data;
}

const userData = fetchUserData();

userData.next().then((result) => {
  const { value, done } = result;
  if (!done) {
    value.next().then((result) => {
      const { value, done } = result;
      if (!done) {
        console.log(value); // 输出：用户数据
      }
    });
  }
});

在上面的例子中，fetchUserData()是一个Generator函数，它使用yield关键字暂停函数的执行，等待fetch('https://example.com/user-data')请求完成。然后，它使用next()方法继续执行函数，获取请求的响应数据。最后，它使用yield关键字暂停函数的执行，等待response.json()方法完成。然后，它使用next()方法继续执行函数，获取用户数据。

二、迭代器

迭代器是一个对象，它可以被for...of循环遍历。迭代器有三个基本方法：next()、return()和throw()。

• next()方法 ：返回一个包含value和done两个属性的对象。value属性是迭代器当前指向的元素，done属性是一个布尔值，表示迭代器是否已经完成遍历。
• return()方法 ：终止迭代器的遍历并返回一个包含value属性的对象。value属性是迭代器最后一次指向的元素。
• throw()方法 ：抛出一个异常并终止迭代器的遍历。

三、执行器

执行器是一个对象，它可以将Generator函数转换为一个可调用的函数。执行器有三个基本方法：next()、return()和throw()。

• next()方法 ：返回一个包含value和done两个属性的对象。value属性是Generator函数当前指向的元素，done属性是一个布尔值，表示Generator函数是否已经执行完成。
• return()方法 ：终止Generator函数的执行并返回一个包含value属性的对象。value属性是Generator函数最后一次指向的元素。
• throw()方法 ：抛出一个异常并终止Generator函数的执行。

四、async和await

async和await是ES7中引入的两个关键字。async关键字用于声明一个异步函数，await关键字用于暂停异步函数的执行，等待异步操作完成。

例如：

async function fetchUserData() {
  const response = await fetch('https://example.com/user-data');
  const data = await response.json();
  return data;
}

fetchUserData().then((data) => {
  console.log(data); // 输出：用户数据
});

在上面的例子中，fetchUserData()是一个异步函数，它使用async关键字声明。在异步函数中，可以使用await关键字暂停函数的执行，等待fetch('https://example.com/user-data')请求完成。然后，它使用await关键字暂停函数的执行，等待response.json()方法完成。最后，它将用户数据返回给调用者。

五、总结

Generator函数、迭代器、执行器和async_await都是JavaScript中异步编程的重要工具。它们可以帮助你轻松地处理异步操作，让你的代码更易于理解和维护。