Promise - （十一）co思想，以及co4.0.0源码分析

阳光穿透心脏的1/2处 2023-10-01 08:40 18阅读 0赞

[co/index.js at master · tj/co · GitHub][co_index.js at master _ tj_co _ GitHub]

附上tj大神co函数源码地址，源码下载npm i co

## 基础知识储备 ##

先看下readme.md关于co介绍

> Generator based control flow goodness for nodejs and the browser, using promises, letting you write non-blocking code in a nice-ish way.

基于控制流的生成器，在node环境和浏览器环境下使用友好，使用了promise ，让你可以写出更加漂亮的异步代码。

### 怎么理解这段话呢？什么叫基于控制流的生成器呢？ ###

我们首先需要知道生成器表现为一个函数，但是它函数体的执行不是函数调用触发的，而通过函数调用的返回值iterator迭代器对象来调用next方法来触发的。

function* gen(){ // 生成器函数与普通函数定义上的区别是，function和函数名之间有个*
        console.log(1)
    }
    
    const iterator = gen() // 生成器函数调用，不会触发函数执行，即此时console.log(1)不执行
    // 但是生成器函数调用会返回一个迭代器对象iterator，迭代器对象的特点是有一个next方法
    
    iterator.next() // 只有iterator.next()调用才会触发生成器函数执行，此时打印1

通过以上代码，我们可以发现，生成器函数与普通函数的区别是，生成器函数体的执行不依赖于函数调用，而是依赖于next。

所以生成器函数实现了可控的函数执行。

相对的，普通函数就是不可控的函数执行，即只要发生函数调用就会一股脑执行到函数体结束位置。

如果说生成器函数通过next方法实现函数执行，那么其实和普通函数没啥本质区别，反而更加繁琐了，因为生成器函数需要先调用返回迭代器，再通过迭代器调用next，将生成器函数一股脑执行到底。

而为了增强生成器函数的可控执行特性，在生成器函数内部可以使用yield来暂停执行，即next触发生成器函数执行，如果执行过程中遇到yield则暂停执行，需要再次iterator.next()才能恢复生成器函数的执行。

function* fn() {
        console.log(1)
        yield
        console.log(2)
    }
    
    const iterator = fn()
    
    iterator.next() // 此处触发生成器函数执行，然后打印1，之后遇到yield导致生成器函数暂停执行了，所以2不打印
    
    // iterator.next() // 如果此处再次调用，则会恢复生成器函数执行，之后就会打印2

基于迭代器的next和生成器的yield就可以实现函数的可控执行。

但是我们发现每次都要手动去写next才能推动生成器执行，就像挤牙膏一样，那么有没有办法，让牙膏自动挤呢？

而让生成器函数自动执行的方式就是控制流，我们可以实现一个简单的控制流

function* gen() {
        console.log(1)
        yield
        console.log(2)
    }
    
    function co(gen){
        const iterator = gen()
    
        iterator.next()
        iterator.next()
    }
    
    co(gen)

上面的co函数就是一个控制流，但是实现的很垃圾，因为里面还是硬编码了两次next，如果生成器有两个yield的话，那就要硬编码三次next调用，那么有没有一个判断调用几次next的标准呢？

此时我们需要知道iterator.next的一些知识：

iterator.next() 会返回一个结果对象，这个对象有两个属性value,done，其中value是指本次迭代到的数据，done是指迭代是否完成，完成了就是true，未完成就是false。

我们可以简单实现下数组的迭代器对象的next方法，来体验一下结果对象的value，done属性在next调用过程中的变化

Array.prototype[Symbol.iterator] = function(){ // [Symbol.iterator]是一个工厂函数，用于生产迭代器对象
        const that = this // 被迭代的数组
        return { // 迭代器对象
            next(){ // 迭代器对象的next方法
                let cursor = 0 // 迭代指针
                return {
                    value: that[cursor++], // 获取当前指针指向的元素作为被迭代的数据后，将指针后移一位
                    done: cursor > that.length-1 // 如果指针此时已经超出了数组范围则表示已经迭代结束
                }
            }
        }
    }

那么生成器函数的迭代器对象是可以预知yield的数量吗？我们知道生成器返回的迭代器对象调用next会触发生成器函数代码的执行，遇到yield则会暂停执行，此时done一定为false，因为可能yield后面还有需要执行的代码，那么什么时候next返回结果对象的done为true呢？

答案是遇到了return或执行到了生成器函数底部，即没有yield了，此时next返回的结果对象的done为true。

说完了next返回结果对象的done的逻辑，我们再来谈谈结果对象的value取值是啥？

我们可以使用翻译软件翻译下yield的中文意思，你会发现一个有意思的东西

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16][]

yield在java多线程里面就有暂停线程执行，并让出cpu执行权的作用，而在js的生成器函数中也有暂停生成器函数执行的功能。

但是js的生成器函数中的yield还有另一个功能：产出值给next

即yield后面的值，可以作为被他暂停的iterator.next()的返回结果对象的value值

function* gen(){
        yield '我是谁，我在哪'
    }
    
    const iterator = gen()
    
    const resultSet = iterator.next()
    
    console.log(resultSet )

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_16_color_FFFFFF_t_70_g_se_x_16][]

所以，我们到现在终于有了写控制流的基础，可以开写了

function* gen(){
        yield 1
        console.log(1)
        yield 2
        console.log(2)
        yield 3
        console.log(3)
        yield 4
        console.log(4)
    }
    
    function co(gen){
        const iterator = gen()
    
        function next() {
            let {value, done} = iterator.next()
            if(!done) {
                next()
            }
        }
    
        next()
    }
    
    co(gen)

在co中写了一个递归函数next，该递归函数会不停调用iterator.next()来推动生成器函数执行，只有当done为true时，递归结束。

所以可以看出这里的co函数就是一个控制流，它实现了生成器函数的自动调用。

> Generator based control flow goodness for nodejs and the browser, using promises, letting you write non-blocking code in a nice-ish way.

这句话后半句：

### 控制流中还使用了promises，让你的异步代码更加优雅。 ###

这里有个重要的隐含意思，基于控制流的生产器函数最终是要用来写异步代码的，并且基于控制流的生成器函数+promise会让异步编程更加优雅。我们知道promise本身就是为了解决“传统的基于回调函数的异步串行产生的回调地狱式代码书写“的问题而被创造出来。promise采用的then链式调用解决了传统异步串行的回调地狱问题。

那么这里基于控制流的生成器+promise的异步编程方案，至少要比promise.then链式实现异步串行要更加优雅，才能体现它的存在价值。

那么如何做到比promise.then链式实现异步串行更加优雅呢？

那么我们需要知道promise.then链式实现异步串行的缺点：

1、then链式书写方式的耦合性太强，虽然可以体现串行特点，但是整体是一坨链式，且包含一大堆模板化代码，显得很冗余

promise.then((data)=>{
        // do something
    }).then((data)=>{
        // do something
    }).then((data)=>{
        // do something
    }).then((data)=>{
        // do something
    }).catch((err)=>{
        // handle err
    })

2、异步任务结果只能在then指定的回调函数中使用，或通过return传递给下一级then，但是无法越级给下下一级使用

promise.then((data1)=>{
        return data1
    }).then((data1)=>{
        // use data1
        return data2
    }).then((data2)=>{    
        // 无法获取到data1
    })

在很多场景中都需要越级获取数据，比如

promise.then((水)=>{
        // 烧水
        return 热水
    }).then((热水)=>{
        // 煮饭
        return 饭
    }).then((饭)=>{
        // 吃饭
        // 这里我还想喝热水，发现获取不到热水
    })

下面介绍下TJ大神的CO基本用法

## Co v4介绍 ##

> `co@4.0.0` has been released, which now relies on promises.

co4.00已经发布了，它依赖于promise

> It is a stepping stone towards [ES7 async/await][ES7 async_await].

co4.00是你学习es7 async await的前提，基石

> The primary API change is how `co()` is invoked.

co4.00主要接口变化是 co函数如何调用

> Before, `co` returned a "thunk", which you then called with a callback and optional arguments.

以前的版本中，co函数返回一个thunk，你可以给thunk指定回调函数和其他可选参数

> Now, `co()` returns a promise.

当前4.0.0版本，co函数调用返回一个promise对象

co(function* () {
      var result = yield Promise.resolve(true);
      return result;
    })
    
    .then(function (value) {
      console.log(value);
    }, function (err) {
      console.error(err.stack);
    });

> If you want to convert a `co`\-generator-function into a regular function that returns a promise, you now use `co.wrap(fn*)`.

如果你想把基于控制流的生成器函数 转化为 一个返回promise对象的常规函数，你现在可以使用co.wrap(生成器函数)

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

通过以上简介，我们可以知道，co函数接收一个生成器函数作为参数，返回一个promise对象

## co4.0.0源码分析 ##

这里就分析一下co主体代码，其他部分代码不涉及co思想，只是做一些边角工作

/**
     * Execute the generator function or a generator
     * and return a promise.
     *
     * @param {Function} fn
     * @return {Promise}
     * @api public
     */
    
    function co(gen) { // co函数入参一个gen生成器函数
      var ctx = this; // 保存co函数调用者到ctx
      var args = slice.call(arguments, 1) // 保存除了入参gen函数外的其他参数到args，以数组形式
    
      // we wrap everything in a promise to avoid promise chaining,
      // which leads to memory leak errors.
      // see https://github.com/tj/co/issues/180
      return new Promise(function(resolve, reject) { // co函数返回一个promise对象
        if (typeof gen === 'function') gen = gen.apply(ctx, args); // 这里相当于 ctx.gen(args)，即调用生成器函数，最终会得到一个迭代器对象，这里也赋值给了gen本身
        if (!gen || typeof gen.next !== 'function') return resolve(gen); // 如果入参gen生成器函数没传，或者传了但是gen生成器函数调用返回值不是迭代器对象，则返回一个成功态的promise对象，且结果为undefiend(gen没传)或者 gen函数返回值（gen传了）
    
        onFulfilled(); // 开始执行生成器函数co，原因是onFulfilled内部调用了gen.next
    
        /**
         * @param {Mixed} res
         * @return {Promise}
         * @api private
         */
    
        function onFulfilled(res) { 
          var ret;
          try {
            ret = gen.next(res); // 首次gen.next(res)的res为undefined，ret为执行器中第一个yield的产出值 {value:yield value, done: false}，或没有yield时，即return指定指 { value: return value, done: true}
          } catch (e) {
            return reject(e); // 如果生成器函数执行过程中抛出异常，则co函数返回一个失败态的promise对象，结果为异常信息
          }
          next(ret); // 继续下一次gen.next，但是将上一次next的结果传递过去，用作next函数递归结束的判断标准
        }
    
        /**
         * @param {Error} err
         * @return {Promise}
         * @api private
         */
    
        function onRejected(err) {
          var ret;
          try {
            ret = gen.throw(err);
          } catch (e) {
            return reject(e);
          }
          next(ret);
        }
    
        /**
         * Get the next value in the generator,
         * return a promise.
         *
         * @param {Object} ret
         * @return {Promise}
         * @api private
         */
    
        function next(ret) {
          if (ret.done) return resolve(ret.value); // 如果done为true，表示迭代结束，终止next函数递归，注意此时必然走到了生成器函数的return value 或者 隐式的 return undefined，所以此时ret.value就是生成器函数的return值
          var value = toPromise.call(ctx, ret.value); // 如果done为false, 表示迭代未结束，还需要继续递归next函数，此时ret.value一定是yield产出值，这里将yield产出值转成了Promise对象
          if (value && isPromise(value)) return value.then(onFulfilled, onRejected); // 对上一步封装了ret.value的promise对象指定成功和失败回调，产生微任务，达到暂停生成器函数代码继续执行的效果，本质是微任务阻塞了onFulfilled和onRejected函数中next的递归调用，即阻塞了gen.next的调用
          return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
            + 'but the following object was passed: "' + String(ret.value) + '"'));
        }
      });
    }

[co_index.js at master _ tj_co _ GitHub]: https://github.com/tj/co/blob/master/index.js
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/43d966a7a10e45eca4b3648a7e6b5e18.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/cc272e8988cd4e578a6632427f18c089.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_16,color_FFFFFF,t_70,g_se,x_16
[ES7 async_await]: https://github.com/lukehoban/ecmascript-asyncawait