co 源码精读

co 是著名的 TJ 于 2013 年推出的一个利用 ES6 的 Generator 函数来解决异步操作的开源项目，也是后来 JavaScript 异步操作的终极解决方案—— async/await 的先驱。时至今日，co 版本号已经来到了 4.x，不过其代码仍然只有寥寥数百行，十分适合阅读与学习。下面我们就来看一下 co 是如何对异步操作进行处理的。

首先先来看一下 co 的基本用法。co 使用起来十分方便，只需要将一个 Generator 函数作为参数传给 co()，就能在该函数中像同步代码一样编写异步代码。看一下官方示例：

var co = require('co');

co(function *(){
  // yield any promise
  var result = yield Promise.resolve(true);
}).catch(onerror);

// focus on this
co(function *(){
  // resolve multiple promises in parallel
  var a = Promise.resolve(1);
  var b = Promise.resolve(2);
  var c = Promise.resolve(3);
  var res = yield [a, b, c];
  console.log(res);
  // => [1, 2, 3]
}).catch(onerror);

// errors can be try/catched
co(function *(){
  try {
    yield Promise.reject(new Error('boom'));
  } catch (err) {
    console.error(err.message); // "boom"
 }
}).catch(onerror);

function onerror(err) {
  // log any uncaught errors
  // co will not throw any errors you do not handle!!!
  // HANDLE ALL YOUR ERRORS!!!
  console.error(err.stack);
}

第 9 行的函数体中，a、b、c 的值都是异步返回的，但是却可以像同步一样调用。这便是 co 的魔力。

除此之外，co 还提供了一个 API—— co.wrap() ，用于将被 co 包裹的 generator 函数转换成为一个返回 promise 的普通函数，示例如下：

var fn = co.wrap(function* (val) {
  return yield Promise.resolve(val);
});

fn(true).then(function (val) {
});

了解完了 API，我们就可以来看一下 co 内部的实现原理。下面是经过笔者注解（中文注释）的源码：

/**
 * slice() reference.
 */

var slice = Array.prototype.slice;

/**
 * Expose `co`.
 */

module.exports = co['default'] = co.co = co;

/**
 * Execute the generator function or a generator
 * and return a promise.
 *
 * @param {Function} fn
 * @return {Promise}
 * @api public
 */

// 这里是核心代码
function co(gen) {
  // 缓存上下文
  var ctx = this;
  var args = slice.call(arguments, 1)

  // we wrap everything in a promise to avoid promise chaining,
  // which leads to memory leak errors.
  // see https://github.com/tj/co/issues/180
  
  // co() 返回值为 promise
  return new Promise(function(resolve, reject) {
    // 执行一次 generator 函数以获取遍历器
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    // 启动执行
    onFulfilled();

    /**
     * @param {Mixed} res
     * @return {Promise}
     * @api private
     */

    function onFulfilled(res) {
      var ret;
      // 执行 generator 函数的 next 方法，如出错则 reject
      try {
        ret = gen.next(res);
      } catch (e) {
        return reject(e);
      }
      
      // 继续执行 next 函数
      next(ret);
    }

    /**
     * @param {Error} err
     * @return {Promise}
     * @api private
     */

    function onRejected(err) {
      var ret;
      // 执行 generator 函数的 throw 方法（用于抛出错误，由 generator 函数内部进行错误处理），如出错则 reject
      try {
        ret = gen.throw(err);
      } catch (e) {
        return reject(e);
      }
      
      // 继续执行 next 函数
      next(ret);
    }

    /**
     * Get the next value in the generator,
     * return a promise.
     *
     * @param {Object} ret
     * @return {Promise}
     * @api private
     */
	
    // 关键所在，自动连续执行 next()
    function next(ret) {
      // generator 函数执行完毕，返回
      if (ret.done) return resolve(ret.value);
      // 每次均将 yield 返回的 value 转换为 promise 
      var value = toPromise.call(ctx, ret.value);
      // 使用 Promise.then 递归连续执行
      // onFulfilled 和 onRejected 函数中会继续调用 next 函数自身
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      // yield 返回的 value 无法转换为 promise 时进行错误处理
      return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
        + 'but the following object was passed: "' + String(ret.value) + '"'));
    }
  });
}

/**
 * Wrap the given generator `fn` into a
 * function that returns a promise.
 * This is a separate function so that
 * every `co()` call doesn't create a new,
 * unnecessary closure.
 *
 * @param {GeneratorFunction} fn
 * @return {Function}
 * @api public
 */

// 单看代码可能略为有点晦涩，结合上面 co.wrap 的使用示例比较容易理解
// 实际上这里只是作了一层简单的封装，方便传参
co.wrap = function (fn) {
  createPromise.__generatorFunction__ = fn;
  return createPromise;
  function createPromise() {
    // 传入的参数通过 apply 方式作为 fn 的参数执行
    // 然后仍然是调用 co 函数，回到上面的逻辑
    return co.call(this, fn.apply(this, arguments));
  }
};


// 下面是一些功能性的 utils 函数，根据注释便可知晓其用法，此处省略函数具体实现，不作过多赘述

/**
 * Convert a `yield`ed value into a promise.
 */
function toPromise(obj) {}

/**
 * Convert a thunk to a promise.
 */
function thunkToPromise(fn) {}

/**
 * Convert an array of "yieldables" to a promise.
 * Uses `Promise.all()` internally.
 */
function arrayToPromise(obj) {}

/**
 * Convert an object of "yieldables" to a promise.
 * Uses `Promise.all()` internally.
 */
function objectToPromise(obj){}

/**
 * Check if `obj` is a promise.
 */
function isPromise(obj) {}

/**
 * Check if `obj` is a generator.
 */
function isGenerator(obj) {}

/**
 * Check if `obj` is a generator function.
 */
function isGeneratorFunction(obj) {}

/**
 * Check for plain object.
 */
function isObject(val) {}

我们可以看到，co 的核心逻辑在于第 90 行的 next 函数，这里将每一次 yield 的返回值包装成 Promise 对象，在 Promise 的 onFulfilled 和 onRejected 状态中继续递归调用 next 函数，保证链式调用自动执行，使得异步的代码能够以同步的方式运行。

可能还有读者有疑问，如果不借助 Promise，这样的链式自动执行是否还可以实现。事实上，在 co 的 4.0.0 版本以前，其底层实现就没有借助 Promise，而是采用了 Thunk 函数的方式。感兴趣的读者可以切换到 3.1.0 版本学习源码。

注：如有关于什么是 Thunk 函数的疑问，点击这里。

阮一峰老师在《ECMAScript 6 入门》一书中对于 Generator 函数自动执行的原理有一个精准的结论：“自动执行的关键是，必须有一种机制，自动控制 Generator 函数的流程，接收和交还程序的执行权。回调函数可以做到这一点，Promise 对象也可以做到这一点。”我们还是以 Promise 对象为例解释一下这句话：将通过 yield 返回的对象的 value 保持为一个 Promise 对象，执行之，即可拿到程序的执行权。然后通过 Promise.then 和 Promise.reject 方法中调用 generator 的 next 方法，可以交还程序执行权。如此达到自动执行 generator 函数的效果。

最后，感谢 co 这样的优秀项目作为开拓者，才有了后来的 async/await ，让 JavaScript 开发人员不再因为这门语言独特的单线程特性而深陷异步编程带来的困扰。