走一步再走一步，揭开co的神奇面纱

媒介

原文地点

源码地点

相识co的前提是已晓得generator是什么，可以看软大神的Generator 函数的语法,
co是TJ大神写的可以使generator自动实行的函数库，而我们熟知的koa也用到了它治理异步流程掌握，将异步使命誊写同步化，爽的飞起，也摆脱了一直以来的回调地狱题目。

怎样运用

起首我们依据co的官方文档来稍做转变看下，究竟怎样运用co，再一步步举行源码剖析事情(这篇文章剖析的co版本是4.6.0)。

yield 背面罕见的可以跟的范例

1. promises

2. array (parallel execution)

3. objects (parallel execution)

4. generator functions (delegation)

promises

let co = require('co')
let genTimeoutFun = (delay) => {
return () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`delayTime: ${delay}`)
}, delay)
})
}
}
let timeout1 = genTimeoutFun(1000)
let timeout2 = genTimeoutFun(200)
co(function * () {
let a = yield timeout1()
console.log(a) // delayTime: 1000
let b = yield timeout2()
console.log(b) // delayTime: 200
return 'end'
}).then((res) => {
console.log(res)
})


array

let co = require('co')
let genTimeoutFun = (delay) => {
return () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`delayTime: ${delay}`)
}, delay)
})
}
}
let timeout1 = genTimeoutFun(1000)
let timeout2 = genTimeoutFun(200)
co(function * () {
let a = yield [timeout1(), timeout2()]
console.log(a) // [ 'delayTime: 1000', 'delayTime: 200' ]
return 'end'
}).then((res) => {
console.log(res) // end
})


objects

let co = require('co')
let genTimeoutFun = (delay) => {
return () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`delayTime: ${delay}`)
}, delay)
})
}
}
let timeout1 = genTimeoutFun(1000)
let timeout2 = genTimeoutFun(200)
co(function * () {
let a = yield {
timeout1: timeout1(),
timeout2: timeout2()
}
console.log(a) // { timeout1: 'delayTime: 1000',timeout2: 'delayTime: 200' }
return 'end'
}).then((res) => {
console.log(res) // end
})


generator functions

let co = require('co')
let genTimeoutFun = (delay) => {
return () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`delayTime: ${delay}`)
}, delay)
})
}
}
let timeout1 = genTimeoutFun(1000)
let timeout2 = genTimeoutFun(200)
function * gen () {
let a = yield timeout1()
console.log(a) // delayTime: 1000
let b = yield timeout2()
console.log(b) // delayTime: 200
}
co(function * () {
yield gen()
return 'end'
}).then((res) => {
console.log(res) // end
})


末了说一下，关于实行传入的generator函数吸收参数的题目

let co = require('co')
co(function * (name) {
console.log(name) // qianlongo
}, 'qianlongo')


从co函数的第二个参数最先，就是传入的generator函数可以吸收的实参

最先剖析源码

你可以把以上代码拷贝至当地测试一番看看效果，接下来我们一步步最先剖析co的源码

起首经由上面的例子可以发明，co函数自身吸收一个generator函数，而且co实行后返回的是Promise

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) {
if (typeof gen === 'function') gen = gen.apply(ctx, args);
if (!gen || typeof gen.next !== 'function') return resolve(gen);
// xxx
});
}


在Promise的内部，先实行了外部传入的gen,实行的效果假如不具备next属性(且如果一个函数)，就直接返回，并将实行胜利回调resolve(gen),不然获得的是一个指针对象。

接下来继承看&＃8230;


onFulfilled();
/**
* @param {Mixed} res
* @return {Promise}
* @api private
*/
function onFulfilled(res) {
var ret;
try {
ret = gen.next(res); // 用上面实行gen以后的generator生成器将指针指向下一个位置
} catch (e) {
return reject(e);
}
next(ret); // 紧接着实行next，恰是它完成了重复挪用本身，自动流程掌握，注重ret(即上一次gen.next实行后返回的对象{value: xxx, done: true or false})
}
/**
* @param {Error} err
* @return {Promise}
* @api private
*/
function onRejected(err) {
var ret;
try {
ret = gen.throw(err);
} catch (e) {
return reject(e);
}
next(ret);
}


我以为可以把 onFulfilled 和 onRejected 看成是返回的Promise的resolve和reject。

而onFulfilled也是将原生的generator生成器的next要领包装了一遍，也许是为了抓取毛病吧(看到内部的try catch了吗)

好，我们看到了co内部将指针挪动到了第一个位置以后，接着实行了内部的next要领，接下来聚焦在该函数上


function next(ret) {
// 假如全部generator函数的内部状况已示意走完，便将Promise的状况设置为胜利状况，并实行resolve
if (ret.done) return resolve(ret.value);
// 这一步是将ret的value转换为Promise情势
var value = toPromise.call(ctx, ret.value);
// 这里异常症结，是co完成本身挪用本身，完成流程自动化的症结
// 注重这里运用value.then，即为返回值增加胜利和失利的回调，在胜利的回调内里再去实行onFulfilled，紧接着就是挪用内部的next函数
// 那不是就保证了流程完整根据你写的递次来了？
if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
// 抛出毛病，yield后只能随着指定的以下这几种范例
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是怎样将异步流程自动治理起来了

然则我对next函数中的toPromise函数另有疑问，他究竟做了什么事？使得co(generatorFun)中yield可以支撑数组、对象、generator函数等情势。

一步步来看


function toPromise(obj) {
// obj不存在，直接返回
if (!obj) return obj;
// 假如obj已是Promise，则也是直接返回
if (isPromise(obj)) return obj;
// 假如是个generator函数或许generator生成器，那就像你本身挪用co函数一样，手动传到co内里去实行
if (isGeneratorFunction(obj) || isGenerator(obj)) return co.call(this, obj);
// 假如obj既不是Promise，也不是isGeneratorFunction和isGenerator，如果一个一般的函数（须要相符thunk函数范例），就将该函数包装成Promise的情势
if ('function' == typeof obj) return thunkToPromise.call(this, obj);
// 假如是一个数组的情势，就去arrayToPromise包装一番
if (Array.isArray(obj)) return arrayToPromise.call(this, obj);
if (isObject(obj)) return objectToPromise.call(this, obj);
return obj;
}


起首假如obj不存在，就直接返回，你想啊，co原本就是依靠上一次指针返回的value是Promise或许其他，这个时刻假如返回

{
value: false,
done: false
}

那就没有必要再给一个false值转成Promise情势了吧。

接着，假如obj自身就是个Promise也是直接返回，用了内部的isPromise函数举行推断，我们看下他怎样完成的。


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

实在就是推断了obj的then属性是不是是个函数

再接着，假如是个generator函数或许generator生成器，那就像你本身挪用co函数一样，手动传到co内里去实行。

isGeneratorFunction


function isGeneratorFunction(obj) {
var cOnstructor= obj.constructor;
if (!constructor) return false;
if ('GeneratorFunction' === constructor.name || 'GeneratorFunction' === constructor.displayName) return true;
return isGenerator(constructor.prototype);
}


经由过程obj的constructor属性去推断其是不是属于GeneratorFunction,末了假如constructor属性没推断出来，再去用isGenerator，推断obj的原型是不是是generator生成器

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

推断的前提也比较直接，须要相符两个前提，一个是obj.next如果一个函数，一个是obj.throw如果一个函数

接下来继承看

假如obj既不是Promise，也不是isGeneratorFunction和isGenerator，如果一个一般的函数，就将该函数包装成Promise的情势，这里我们重要须要看thunkToPromise

function thunkToPromise(fn) {
var ctx = this;
// 将thunk函数包装成Promise
return new Promise(function (resolve, reject) {
// 实行这个thunk函数
fn.call(ctx, function (err, res) {
// 注重thunk函数内部吸收的回调函数中传入的第一个参数是err，涌现了err，固然须要走reject了
if (err) return reject(err);
// 参数是两个以上的情况下，将参数整成一个数组
if (arguments.length > 2) res = slice.call(arguments, 1);
// 末了实行胜利的回调
resolve(res);
});
});
}


接下来是重头戏了，co中假如处置惩罚yield背面跟一个数组呢？主如果arrayToPromise函数的作用

function arrayToPromise(obj) {
// 运用到了Promise.all，将obj中多个promise实例(固然你也可以在数组中填thunk函数，generator函数等)从新包装成一个。末了返回一个新的Promise
return Promise.all(obj.map(toPromise, this));
}


另有末了一个推断，假如obj是个对象怎样办？

function objectToPromise(obj){
// 组织一个和传入对象有雷同组织器的对象, results也是
var results = new obj.constructor();
// 猎取obj的keys
var keys = Object.keys(obj);
// 存储obj中是Promise的属性
var promises = [];
for (var i = 0; i var key = keys[i];
var promise = toPromise.call(this, obj[key]);
// 假如是效果是Promise，则用defer函数对results举行修正
if (promise && isPromise(promise)) defer(promise, key);
// 假如黑白Promise就按原样返回
else results[key] = obj[key];
}
// 末了 运用到了Promise.all，将obj中多个promise实例
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
results[key] = res;
}));
}
}


末端

到这里，co源码剖析就告一段落了。总觉得有些没有说到位，迎接人人拍砖，晚安。