源码学习目录

1. 前言

1.1 环境

  1. 操作系统: macOS 11.5.2
  2. 浏览器: Chrome 94.0.4606.81
  3. co 4.6.0

    1.2 阅读该文章可以get以下知识点

  • 了解 co 是用来做什么呢
  • promise 、generator、async await 三者区别和联系
  • 熟悉巩固 Promise、generator、async await 的用法

  • 熟悉 co 的实现原理

    2. 开始

    2.1 如何使用

    1. co(function* () {
    2. var result = yield Promise.resolve(true);
    3. return result;
    4. }).then(function (value) {
    5. console.log(value);
    6. }, function (err) {
    7. console.error(err.stack);
    8. });

    写法类似于async await,原理是通过Generator yield的方式来实现的

    2.2 源码

    1. function co(gen) {
    2. var ctx = this;
    3. var args = slice.call(arguments, 1);
    5. // we wrap everything in a promise to avoid promise chaining,
    6. // which leads to memory leak errors.
    7. // see https://github.com/tj/co/issues/180
    8. return new Promise(function(resolve, reject) {
    9.   // gen 是一个generator函数,apply添加上下文,并执行函数
    10.   if (typeof gen === 'function') gen = gen.apply(ctx, args);
    11.   // generator函数或者.next不存在,直接返回resolve
    12.   if (!gen || typeof gen.next !== 'function') return resolve(gen);
    13.       // 调用full
    14.   onFulfilled();
    16.   /**
    17.    * @param {Mixed} res
    18.    * @return {Promise}
    19.    * @api private
    20.    */
    22.   function onFulfilled(res) {
    23.     var ret;
    24.     try {
    25.       ret = gen.next(res);
    26.     } catch (e) {
    27.       return reject(e);
    28.     }
    29.     // 执行next,吧当前值传进去
    30.     next(ret);
    31.     return null;
    32.   }
    34.   /**
    35.    * @param {Error} err
    36.    * @return {Promise}
    37.    * @api private
    38.    */
    40.   function onRejected(err) {
    41.     var ret;
    42.     try {
    43.       // 抛出错误
    44.       ret = gen.throw(err);
    45.     } catch (e) {
    46.       return reject(e);
    47.     }
    48.     next(ret);
    49.   }
    51.   /**
    52.    * Get the next value in the generator,
    53.    * return a promise.
    54.    *
    55.    * @param {Object} ret
    56.    * @return {Promise}
    57.    * @api private
    58.    */
    59.       // next函数
    60.   function next(ret) {
    61.     // 如果generate执行完毕会返回一个done和value
    62.     if (ret.done) return resolve(ret.value);
    63.     // 将value的值尝试转换成promise
    64.     var value = toPromise.call(ctx, ret.value);
    65.     // 如果是promise,执行.then
    66.     if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
    67.     return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
    68.       + 'but the following object was passed: "' + String(ret.value) + '"'));
    69.   }
    70. });
    71. }
    72. // 判断是不是promise,如果有.then就是promise对象
    73. function isPromise(obj) {
    74. return 'function' == typeof obj.then;
    75. }

    3. 总结

  1. co库使用es2015的写法,通过generator和yeild,来阻塞异步代码,执行完毕后才会执行下一步

  2. 类似于后面async await的写法

    4. 参考文档

  3. https://github.com/tj/co

  4. https://juejin.cn/post/6844904088220467213#heading-11