源码解析

co@4.6版本不到240行代码，整体来说，还算比较简单。但并不容易阅读

  1. // 核心代码
  2. function co(gen) {
  3.   // 缓存this
  4.   var ctx = this;
  5.   var args = slice.call(arguments, 1)
  7.   // we wrap everything in a promise to avoid promise chaining,
  8.   // which leads to memory leak errors.
  9.   // see https://github.com/tj/co/issues/180
  10.   // 重点，co的返回值是Promise对象。为什么可以then和catch的根源
  11.   return new Promise(function(resolve, reject) {
  12.     // 如果你懂Promise规范，就知道这是解决状态回调，这是首次调用
  13.     onFulfilled();
  15.     /**
  16.      * @param {Mixed} res
  17.      * @return {Promise}
  18.      * @api private
  19.      */
  21.     function onFulfilled(res) {
  22.       var ret;
  23.       try {
  24.         ret = gen.next(res);
  25.       } catch (e) {
  26.         return reject(e);
  27.       }
  28.       next(ret);
  29.     }
  31.     /**
  32.      * @param {Error} err
  33.      * @return {Promise}
  34.      * @api private
  35.      */
  36.     // 如果你懂Promise规范，就知道这是拒绝状态回调
  37.     function onRejected(err) {
  38.       var ret;
  39.       try {
  40.         ret = gen.throw(err);
  41.       } catch (e) {
  42.         return reject(e);
  43.       }
  44.       next(ret);
  45.     }
  47.     // generator执行器
  48.     // 如果ret.done，返回ret.value
  49.     // 否则，
  50.     function next(ret) {
  51.       // 如果执行完成，直接调用resolve把promise置为成功状态
  52.       if (ret.done) return resolve(ret.value);
  53.       // 把yield的值转换成promise
  54.       // 支持 promise，generator，generatorFunction，array，object
  55.       // toPromise的实现可以先不管，只要知道是转换成promise就行了
  56.       var value = toPromise.call(ctx, ret.value);
  57.       // 成功转换就可以直接给新的promise添加onFulfilled, onRejected。当新的promise状态变成结束态（成功或失败）。就会调用对应的回调。整个next链路就执行下去了。
  58.       // 为什么generator可以无限的next下去呢？
  59.       // return value.then(onFulfilled, onRejected);意味着，又要执行onFulfilled了
  60.       // onFulfilled里调用next(ret);
  61.       if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
  63.       // 如果以上情况都没发生，报错
  64.       return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
  65.         + 'but the following object was passed: "' + String(ret.value) + '"'));
  66.     }
  67.   });
  68. }

读此源码要点

  • 必须深刻理解Promise实现，知道构造函数里的onFulfilled和onRejected是什么意思
  • 必须了解generator的执行机制，理解迭代器里的next以及next的返回对象{value:’’,done: true}

核心代码入口是onFulfilled，无论如何第一次的next(ret)是一定要执行的，因为generator必须要next()一下的。

所以next(ret)一定是重点，而且我们看onFulfilled和onRejected里都调用它，也就是所有的逻辑都会丢在这个next(ret)方法里。它实际上是一个状态机的简单实现。

  1. // generator执行器
  2. // 如果ret.done，返回ret.value
  3. // 否则，
  4. function next(ret) {
  5.   // 如果执行完成，直接调用resolve把promise置为成功状态
  6.   if (ret.done) return resolve(ret.value);
  7.   // 把yield的值转换成promise
  8.   // 支持 promise，generator，generatorFunction，array，object
  9.   // toPromise的实现可以先不管，只要知道是转换成promise就行了
  10.   var value = toPromise.call(ctx, ret.value);
  12.   // 成功转换就可以直接给新的promise添加onFulfilled, onRejected。当新的promise状态变成结束态（成功或失败）。就会调用对应的回调。整个next链路就执行下去了。
  13.   // 为什么generator可以无限的next下去呢？
  14.   // return value.then(onFulfilled, onRejected);意味着，又要执行onFulfilled了
  15.   // onFulfilled里调用next(ret);
  16.   if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
  18.   // 如果以上情况都没发生，报错
  19.   return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
  20.     + 'but the following object was passed: "' + String(ret.value) + '"'));
  21. }

情景1: 状态完成

  1.   // 如果执行完成，直接调用resolve把promise置为成功状态
  2.   if (ret.done) return resolve(ret.value);

情景2： next，跳回onFulfilled，递归

  1.   // 成功转换就可以直接给新的promise添加onFulfilled, onRejected。当新的promise状态变成结束态（成功或失败）。就会调用对应的回调。整个next链路就执行下去了。
  2.   // 为什么generator可以无限的next下去呢？
  3.   // return value.then(onFulfilled, onRejected);意味着，又要执行onFulfilled了
  4.   // onFulfilled里调用next(ret);
  5.   if (value && isPromise(value)) return value.then(onFulfilled, onRejected);

情景3: 捕获异常

  1.   // 如果以上情况都没发生，报错
  2.   return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
  3.     + 'but the following object was passed: "' + String(ret.value) + '"'));

以上是核心代码说明。之前我们讲了co实际有2种api，有参数和无参数的，很明显以上是无参数的generator执行器，那么有参数的wrap呢？

  1. // 为有参数的generator调用，提供简单包装
  2. co.wrap = function (fn) {
  3.   createPromise.__generatorFunction__ = fn;
  4.   return createPromise;
  5.   function createPromise() {
  6.     // 重点，把arguments给fn当参数。
  7.     // call和apply是常规js api
  8.     return co.call(this, fn.apply(this, arguments));
  9.   }
  10. };

通过call和apply组合使用，知识点比较简单，但这样用还是挺巧妙的。

其他的就基本是工具类了，其实也挺有意思的，自己看吧