(四)co库源码(generator)

580 阅读5分钟

anime-girl-raining-umbrella-animal-ears-blue-eyes-nekomimi-anime.jpeg

参考

V8是如何实现async/await的?

www.yuque.com/ruochuan12/…

promise 、generator、async await 三者区别和联系

  • callback 不易阅读
  • promise then太多,语义化差
  • generator 需要next来触发函数或者靠co来执行,麻烦
  • async/await 由await得到resolve状态的promise来触发继续执行代码,爽
  • generator +(co) + promise = async/await

generator

es6.ruanyifeng.com/#docs/gener…

核心原理是协程

比线程更轻量级的存在,一个进程多个线程,一个线程多个协程,但线程由操作系统内核控制,协程由程序代码控制,性能更好。

一个线程同时只能执行一个协程。 遍历器对象的next方法的运行逻辑如下。 (1)遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。 (2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。 (3)如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。 (4)如果该函数没有return语句,则返回的对象的value属性值为undefined。 从语义上讲,第一个next方法用来启动遍历器对象,所以不用带有参数。 ​

第一个next传参无效,但是可以拿到yield表达式的值,第二个next可以将参数替换第一个yield表达式

# 第一个yield需要两次next才能继续执行完毕
function* getResult() {
3
yield 'getUserID'//2.5
5
yield 'getUserName'
7
return 'name'

}
1
let result = getResult()
2
console.log(result.next().value)
4
console.log(result.next().value)
6
console.log(result.next().value) //name

getResult函数不是一次执行完的,而是全局代码和函数交替执行。

带星号的函数为生成器函数,当遇到yield时,v8会返回关键词后面的内容给外部函数,并暂停生成器函数的执行,控制器交给外部代码,在外部代码执行到生成器函数的next方法时,控制器再转交给生成器函数。

co

个人理解就是递归执行生成器函数的next方法,直到无法执行为止,顺便传递value值

github1s.com/tj/co/blob/…

# generator的done和value概念
function* getResult() {
    yield 'getUserID'
    return 'name'
}

let result = getResult()
console.log(result.next().value)
//
其中result.next().value为getUserID,
result.next().done为一个判断生成器函数里是否完成的布尔类型判断
例子:https://www.jianshu.com/p/651922749334

let a = yield x
result.next(100)//参数可以代替yield和后面的内容
得到a=100
可以将参数通过next传入生成器函数,动态调整里面的逻辑
# https://www.cnblogs.com/mengff/p/12787981.html
/**
 * slice() reference.
 */

var slice = Array.prototype.slice;

/**
 * Expose `co`.
 */

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

/**
 * 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 = function (fn) {
  createPromise.__generatorFunction__ = fn;
  return createPromise;
  function createPromise() {
    return co.call(this, fn.apply(this, arguments));
  }
};

/**
 * Execute the generator function or a generator
 * and return a promise.
 *
 * @param {Function} fn
 * @return {Promise}
 * @api public
 */
//co(generatorFunc, '哎呀');
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
  return new Promise(function(resolve, reject) {
          //执行生成器函数且带参数generatorFunc('哎呀')
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
  
    if (!gen || typeof gen.next !== 'function') return resolve(gen);//非generator,返回
	//先generatorFunc('哎呀').next一次
    onFulfilled();

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

    function onFulfilled(res) {
      var ret;
      try {
        ret = gen.next(res);//generatorFunc('哎呀').next()的结果
      } catch (e) {
        return reject(e);
      }
      next(ret);//generatorFunc('哎呀').next()的结果 在next函数里执行
      return null;
    }

    /**
     * @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) {
        //如果生成器函数没yield了,返回resolve(ret.value)
      if (ret.done) return resolve(ret.value);
        //将generatorFunc('哎呀').next()的结果的value值封装成promise
      var value = toPromise.call(ctx, ret.value);
        //套娃开始,直到生成器函数没yield了,返回resolve(ret.value)
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
        + 'but the following object was passed: "' + String(ret.value) + '"'));
    }
  });
}

/**
 * Convert a `yield`ed value into a promise.
 *
 * @param {Mixed} obj
 * @return {Promise}
 * @api private
 */

function toPromise(obj) {
    //obj为字符串时,报错,要求用其他类型,有时候不去试一下真不知道为什么这里不判断字符串
  if (!obj) return obj;
  if (isPromise(obj)) return obj;
  if (isGeneratorFunction(obj) || isGenerator(obj)) return co.call(this, obj);
  if ('function' == typeof obj) return thunkToPromise.call(this, obj);
  if (Array.isArray(obj)) return arrayToPromise.call(this, obj);
  if (isObject(obj)) return objectToPromise.call(this, obj);
  return obj;
}
// 当你yield一个字符串时,由于不是promise且co没做字符串的转化,会触发reject
// let fn = function (cb) {
//     console.log('fnxx')
//     cb && cb(null, '123', '2', '3')
//     return 'fn'
// }
// let genera = function* () {
//     yield 'err'
//     let value = yield fn
//     return value
// }
// co(genera)
//UnhandledPromiseRejectionWarning: TypeError: You may only yield a function, promise,
//generator, array, or object, but the following object was passed: "err"

/**
 * Convert a thunk to a promise.
 *
 * @param {Function}
 * @return {Promise}
 * @api private
 */
//fn需为fn=(cb)=》{cb(null,'res')}这样的才能触发下面的2函数

function thunkToPromise(fn) {
  var ctx = this;
  return new Promise(function (resolve, reject) {
      //http://qiutianaimeili.com/html/page/2019/05/54g0vvxycyg.html 涉及thunk
    fn.call(ctx, function (err, res) {
        //2
      if (err) return reject(err);
      if (arguments.length > 2) res = slice.call(arguments, 1);
      resolve(res);
    });
  });
}

/**
 * Convert an array of "yieldables" to a promise.
 * Uses `Promise.all()` internally.
 *
 * @param {Array} obj
 * @return {Promise}
 * @api private
 */

function arrayToPromise(obj) {
  return Promise.all(obj.map(toPromise, this));
}

/**
 * Convert an object of "yieldables" to a promise.
 * Uses `Promise.all()` internally.
 *
 * @param {Object} obj
 * @return {Promise}
 * @api private
 */

function objectToPromise(obj){
  var results = new obj.constructor();
  var keys = Object.keys(obj);
  var promises = [];
  for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    var promise = toPromise.call(this, obj[key]);
    if (promise && isPromise(promise)) defer(promise, key);
    else results[key] = obj[key];
  }
  return Promise.all(promises).then(function () {
    return results;
  });

  function defer(promise, key) {
    // predefine the key in the result
    results[key] = undefined;
    promises.push(promise.then(function (res) {
      results[key] = res;
    }));
  }
}

/**
 * Check if `obj` is a promise.
 *
 * @param {Object} obj
 * @return {Boolean}
 * @api private
 */

function isPromise(obj) {
  return 'function' == typeof obj.then;
}

/**
 * Check if `obj` is a generator.
 *
 * @param {Mixed} obj
 * @return {Boolean}
 * @api private
 */

function isGenerator(obj) {
  return 'function' == typeof obj.next && 'function' == typeof obj.throw;
}

/**
 * Check if `obj` is a generator function.
 *
 * @param {Mixed} obj
 * @return {Boolean}
 * @api private
 */
 
function isGeneratorFunction(obj) {
  var constructor = obj.constructor;
  if (!constructor) return false;
  if ('GeneratorFunction' === constructor.name || 'GeneratorFunction' === constructor.displayName) return true;
  return isGenerator(constructor.prototype);
}

/**
 * Check for plain object.
 *
 * @param {Mixed} val
 * @return {Boolean}
 * @api private
 */

function isObject(val) {
  return Object == val.constructor;
}
next函数的内部代码,一共只有四行命令。

第一行,检查当前是否为 Generator 函数的最后一步,如果是就返回。

第二行,确保每一步的返回值,是 Promise 对象。

第三行,使用then方法,为返回值加上回调函数,然后通过onFulfilled函数再次调用next函数。

第四行,在参数不符合要求的情况下(参数非 Thunk 函数和 Promise 对象),将 Promise 对象的状态改为rejected,从而终止执行。

简易实现版

co(generatorFun,'params')
function co(gen){
    let ctx = this
    let params = Array.prototype.slice.call(argumengt,1)
    return new Promise((resolve,reject)=>{
        gen = gen.apply(ctx,params)
        onFulfilled()
        function onFulfilled(res){
            let ret = gen.next(res)
            next(ret)
        }
        function next(ret){
          let {value,done} = ret
            if(done){
                return resolve(value)
            }else{
                return Promise.resolve(value).then(onFulfilled)
            }  
        }
    })
}

川哥版

# https://github1s.com/lxchuan12/koa-analysis/blob/master/koa/examples/co-generator/co-simple-3.html
function coSimple(gen){
    const ctx = this;
    const args = Array.prototype.slice.call(arguments, 1);
    gen = gen.apply(ctx, args);
    console.log(gen, 'gen');

    return new Promise((resolve, reject) => {

      onFulfilled();

      function onFulfilled(res){
        const ret = gen.next(res);
        next(ret);
      }

      function next(ret) {
        const promise = ret.value;
        promise && promise.then(onFulfilled);
      }

    });
  }

阿君版

#https://www.yuque.com/ruochuan12/bssbzg/ci77ui
const co = gen => new Promise((resolve, reject) => {
	function next(data) {
        let { value, done } = gen.next(data);
        if (done) {
            resolve(value);
        } else {
            Promise.resolve(value).then(next, reject);
        }
    }
    next(); // 这里需要自执行一次,然后不断递归调用
})