专栏首页FECodingco 源码精读

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 开发人员不再因为这门语言独特的单线程特性而深陷异步编程带来的困扰。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 「持续更新中」JavaScript 设计模式精简代码实现

    逆葵
  • 基于浏览器客户端的流式渲染技术难点一览

    流式渲染技术,不同于传统意义上前端领域的服务端渲染(即 SSR),指的是云端性能强劲的机器进行画面渲染,将渲染完成的数据传送至客户端,客户端只负责播放及处理和上...

    逆葵
  • 微信小程序的出现给前端带来了什么

    这是一个前端飞速发展的时代,我比较喜欢将其类比为欧洲列强疯狂殖民扩张的那段历史。JavaScript,得益于所有平台都必须具有浏览器这一特点,已经成为了事实上目...

    逆葵
  • 我国大陆地区的手机号正则匹配

    大数据工程师-公子
  • 我国大陆地区的手机号正则匹配

    大数据工程师-公子
  • Chrome扩展程序之编码&时间戳小工具

    Chrome扩展程序之编码&时间戳小工具 作为一个前端小白,对于chrome扩展程序久闻大名,实际动手头一次;前天晚上到前端哪里串门看到小伙伴在搞这个,要了份...

    一灰灰blog
  • 程序员应该知道的13个设计技巧

    我是一个程序员,不是设计师。我没有受过设计师的训练。我也没有读过关于设计的书籍。尽管如此,在数年的开发过程中,我学会了让自己的网站和应用看起来很专业。

    疯狂的技术宅
  • toString()和valueOf()函数调用和优先级

    简单了说就是链式调用,链式调用的方法有很多,jQuery的,underscore的和lodash这三个库采用了不同的方式。而上面这个就简单多了:

    wade
  • JavaScript设计模式学习(四)单件(Singleton Pattern)

    单件是JavaScript中最基本、最有用的设计模式,而你今后也会经常的使用这个模式。通过单件,我们可以把统一到一个逻辑单元中并且提供一个唯一的入口,这就保证你...

    大江小浪
  • 人类视觉研究员使用 Wolfram 校园版加速项目的开发

    使用 Mathematica 校园版和 gridMathematica,Phillips能够将完全相同过程的计算时间从1.5到2个月减少到仅需4到6个小时。

    WolframChina

扫码关注云+社区

领取腾讯云代金券