JS `Generator` 用于异步流控制：实现 `co` 风格的协程 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱不聊风花雪月，聊聊JS里一个比较“骚气”的东西：Generator。

今天要讲的，是它在异步流控制中的应用，特别是怎么用它实现传说中的 co 风格的协程。放心，我会尽量讲得简单易懂，让你们听完感觉自己也能手撕一个co。

开胃小菜：什么是Generator？

首先，得搞清楚Generator是个啥。你可以把它想象成一个函数，但它不是一口气执行完的，而是可以暂停和恢复的。

function* myGenerator() {
  console.log("First!");
  yield 1;
  console.log("Second!");
  yield 2;
  console.log("Third!");
  return 3;
}

const gen = myGenerator();

console.log(gen.next()); // 输出: First! { value: 1, done: false }
console.log(gen.next()); // 输出: Second! { value: 2, done: false }
console.log(gen.next()); // 输出: Third! { value: 3, done: true }
console.log(gen.next()); // 输出: { value: undefined, done: true }

解释一下：

function*：定义一个Generator函数。
yield：暂停执行，并返回一个值。
gen.next()：恢复执行，并返回一个对象，包含value（yield返回的值）和done（是否执行完毕）。

简单来说，Generator就像一个可以分段执行的函数，每次调用next()就执行一段，直到遇到yield或者return。

主角登场：Generator与异步编程

Generator本身并没有什么异步能力，但它可以很好地配合Promise，来实现异步流程的控制。

传统的回调地狱，相信大家都深有体会：

// 回调地狱的噩梦
getData1(function(data1) {
  getData2(data1, function(data2) {
    getData3(data2, function(data3) {
      console.log("Final data:", data3);
    });
  });
});

代码层层嵌套，可读性极差，维护起来简直要命。Promise的出现，让异步编程稍微优雅了一些，但还是需要.then()链式调用。

而Generator + Promise，可以把异步代码写得像同步代码一样，简直是魔法！

function getData1() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data 1");
    }, 100);
  });
}

function getData2(data1) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(data1 + " Data 2");
    }, 100);
  });
}

function getData3(data2) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(data2 + " Data 3");
    }, 100);
  });
}

function* main() {
  const data1 = yield getData1();
  const data2 = yield getData2(data1);
  const data3 = yield getData3(data2);
  console.log("Final data:", data3);
}

const gen = main();

function run(gen) {
  function next(value) {
    const result = gen.next(value);
    if (result.done) {
      return;
    }
    if (result.value instanceof Promise) {
      result.value.then(val => {
        next(val);
      });
    } else {
      next(result.value);
    }
  }
  next();
}

run(gen);

仔细观察main函数，是不是感觉就像同步代码？

yield getData1()：暂停执行，等待getData1()返回的Promise resolve。
当Promise resolve后，会将resolve的值作为next()的参数传递给Generator，赋值给data1。
后面的getData2和getData3同理。

关键在于run函数，它负责驱动Generator的执行，并处理Promise的resolve。

co 风格的协程：手动实现一个简化版 co

上面的run函数，其实就是一个简化版的co。co是一个著名的Generator流程控制库，它能自动处理Promise和Generator的执行，让异步代码更加简洁。

现在，咱们来手动实现一个简化版的co，加深理解：

function co(gen) {
  return new Promise((resolve, reject) => {
    function next(value) {
      try {
        const { value: result, done } = gen.next(value);
        if (done) {
          return resolve(result);
        }

        Promise.resolve(result).then(
          val => {
            next(val);
          },
          err => {
            gen.throw(err);
            reject(err);
          }
        );
      } catch (e) {
        reject(e);
      }
    }

    next();
  });
}

// 使用co
co(function*() {
  const data1 = yield getData1();
  const data2 = yield getData2(data1);
  const data3 = yield getData3(data2);
  console.log("Final data:", data3);
  return data3;
}).then(result => {
  console.log("Co result:", result);
}).catch(err => {
  console.error("Co error:", err);
});

这个co函数做了以下事情：

接受一个Generator函数作为参数。
返回一个Promise，用于处理Generator的最终结果。
内部的next函数负责驱动Generator的执行。
如果yield的值是一个Promise，就等待Promise resolve，并将resolve的值作为参数传递给next函数。
如果Generator执行完毕，就将最终结果resolve到外部的Promise。
处理Generator中抛出的错误，并将错误reject到外部的Promise。

可以看到，使用co之后，代码更加简洁了。我们只需要关注Generator函数内部的逻辑，而不需要手动处理Promise的resolve和reject。

Generator + co 的优势

特性	回调地狱	Promise	Generator + co
可读性	差	较好	很好
维护性	差	较好	很好
错误处理	困难	较好	很好
异步流程控制	复杂	复杂	简单

简单总结一下，Generator + co 的优势如下：

代码简洁： 将异步代码写得像同步代码一样，避免了回调地狱和.then()链式调用。
可读性高： 代码逻辑清晰，易于理解和维护。
错误处理方便： 可以使用try...catch语句捕获异步操作中的错误。
流程控制灵活： 可以使用yield语句控制异步流程的执行顺序。

一些需要注意的点

兼容性： Generator是ES6的特性，需要注意浏览器的兼容性。可以使用babel等工具进行转译。
错误处理： Generator中的错误需要使用try...catch语句捕获，否则可能会导致程序崩溃。
性能： Generator的性能比原生Promise略差，但在大多数情况下可以忽略不计。
async/await： async/await是ES8引入的语法糖，可以更简洁地实现异步流程控制。本质上，async/await 就是 Generator + co 的语法糖。

进阶用法：处理并发请求

co 不仅可以处理串行请求，还可以处理并发请求。只需要将多个 Promise 放到一个数组中，然后 yield 这个数组即可。

function* main() {
  const [data1, data2, data3] = yield [getData1(), getData2(""), getData3("")];
  console.log("All data:", data1, data2, data3);
}

co(main());

co 会并发执行数组中的所有 Promise，并在所有 Promise 都 resolve 后，将结果以数组的形式返回。

实战演练：使用 Generator + co 模拟文件上传

假设我们需要实现一个文件上传功能，需要分片上传，并显示上传进度。

function uploadChunk(chunk, chunkIndex, totalChunks) {
  return new Promise(resolve => {
    setTimeout(() => {
      const progress = Math.round((chunkIndex / totalChunks) * 100);
      console.log(`Chunk ${chunkIndex} uploaded, progress: ${progress}%`);
      resolve();
    }, 50); // 模拟上传延迟
  });
}

function* uploadFile(file, chunkSize = 1024) {
  const fileSize = file.size;
  const totalChunks = Math.ceil(fileSize / chunkSize);

  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(fileSize, start + chunkSize);
    const chunk = file.slice(start, end);
    yield uploadChunk(chunk, i + 1, totalChunks);
  }

  console.log("File uploaded successfully!");
}

// 模拟文件对象
const fakeFile = {
  size: 1024 * 5, // 5KB
  slice: (start, end) => ({ start, end }) // 模拟 slice 方法
};

co(uploadFile(fakeFile));

这个例子模拟了文件分片上传的过程，每次上传一个 chunk，并显示上传进度。 Generator 函数 uploadFile 负责控制上传流程，uploadChunk 函数负责上传单个 chunk。

总结

Generator 是一个强大的工具，可以用来简化异步编程。它配合 co 库，可以将异步代码写得像同步代码一样，提高代码的可读性和可维护性。虽然现在 async/await 更加流行，但理解 Generator + co 的原理，可以帮助你更好地理解 async/await 的本质。

希望今天的分享对大家有所帮助。记住，编程的道路没有捷径，只有不断学习和实践，才能成为真正的技术大牛。下课！

发表回复 取消回复

发表回复取消回复