手写co模块！co模块源码学习（详）
近期在看阮一峰老师的《ES6 入门教程》中 ”Generator 函数的异步应用“这一章节时，看到了对co模块的介绍。刚好趁这个机会通过博客的方式，来加强对co模块的学习。也希望能帮助同行的学习者在看完这篇文章后也可以手写co模块。
（学习以下内容之前，建议对异步，生成器，Promise的知识进行一定的学习。可以参考《ES6 入门教程》的生成器和Promise的教程）
co模块源码放在文末
co模块需要实现什么样的功能
第一步，我们需要知道co模块需要实现什么样的功能
// 这是一段普通的同步代码
console.log(1)
let p1 = new Promise(resolve=>{
setTimeout(()=>{
console.log(2)
resolve('r1')
}, 500)
})
console.log(3)
console.log('p1', p1)
let p2 = new Promise(resolve=>resolve('r2')).then(v=>{
console.log(4)
return v
})
console.log(5)
console.log('p2', p2)
// 打印结果
// 1
// 3
// p1 Promise { }
// 5
// p2 Promise { }
// 4
// 2
// 这是一段使用了生成器的co模块代码
const co = require('co')
function *generator(){
console.log(1)
let p1 = yield new Promise(resolve=>{
setTimeout(()=>{
console.log(2)
resolve('r1')
}, 500)
})
console.log(3)
console.log('p1', p1)
let p2 = yield new Promise(resolve=>resolve('r2')).then(v=>{
console.log(4)
return v
})
console.log(5)
console.log('p2', p2)
}
co(generator)
// 打印结果
// 1
// 2
// 3
// p1 r1
// 4
// 5
// p2 r2
对比以上输出结果，我们可以清楚看见两个差别
1.在co模块中，包括promise和setTimout中，所有的console.log是同步执行的。在普通函数中，就是按同步，微任务，宏任务的顺序打印的
2.在co模块中，p1，p2可以直接获取promise实例的value。在普通函数，p1，2就只能获取到promise的实例
总而言之，知道目标结果是什么样子，我们就知道从何起手。接下来，就要对其原理进行剖析
实现co核心方法
首先，我们要明确，co函数的关键在哪里
从上述例子可以看出，co函数最大的特点是从promise的实例中取值，以及等待promise的状态完成。所以这两点就是面对作为co函数入参的生成器函数，我们所需要处理的事情。接下来，在实现co核心功能的该过程中，我们也将会反复强调这一点
（一定要先掌握生成器函数的使用再来看下面源码的实现）
- 基础原理
我们从最简单的开始，即只有一个yield
function myCo(gen){
// 获取生成器函数的遍历器对象
let g = gen()
// 开始执行生成器函数
let result = g.next()
// 如果done为false，说明生成器函数停在yield，未执行结束
if(!result.done){
// 取出第一个yield产出值。这里先默认为promise实例
// 至于不是promise实例的情况，会在后面进行说明
result.value.then((v)=>{
// 获取promise实例的value，传回生成器函数暂停的地方
// 这里就是等待promise去同步执行以及直接取出promise中value的关键！！！
g.next(v)
})
}
}
myCo(function *(){
let p1 = yield new Promise(resolve=>{
setTimeout(()=>{
resolve(1)
}, 100)
})
console.log(p1)
})
// 1
这样我们便实现了从promise取值以及同步等待promise异步任务结束的两个功能。这也是co函数的核心方法。然后，我们开始在其基础上进行完善
- 多次执行
实现了只有一个yield的情况。下来写多个yield时的执行
首先，是要让co能自己检测生成器函数是否执行完毕，所以我们把每次yield产出值赋给result并且检测result.done来观察是否执行完毕。然后可以得到以下的代码
function myCo(gen){
// 获取生成器函数的遍历器对象
let g = gen()
// 开始执行生成器函数
next(g.next())
function next(result){
// 如果done为false，说明生成器函数停在yield，未执行结束
if(!result.done){
// yield产出值。这里先默认为promise实例
// 至于不是promise实例的情况，会在后面进行说明
result.value.then((v)=>{
// 获取promise实例的value，传回生成器函数暂停的地方
// 继续执行生成器函数，并或取下一个yield的产出值
next(g.next(v))
})
}
}
}
以上，就是该模块最核心的逻辑了
接下来，我们要对其逻辑进行丰富。包括丰富yield产出值类型，错误处理等等。这不是co模块的核心逻辑并不代表不重要，更弱的专用性意味着更强的泛用性。所以如果我们在这里学会后，还可以将其用于自己模块的开发
co模块功能完善
- 生成器函数的错误处理
function myCo(gen){
// 获取生成器函数的遍历器对象
let g = gen()
// 获取生成器函数入参
let args = arguments.slice(1)
// 开始执行生成器函数
// 返回Promise
return new Promise((resolve, reject)=>{
onFulfilled(args)
function onFulfilled(v){
let result
// 捕获生成器函数执行错误
try{
result = g.next(v)
}catch(e){
reject(e)
}
next(result)
}
function next(result){
// 如果done为false，说明生成器函数停在yield，未执行结束
if(!result.done){
// yield产出值。这里先默认为promise实例
// 至于不是promise实例的情况，会在后面进行说明
result.value.then((v)=>{
// 获取promise实例的value，传回生成器函数暂停的地方
// 继续执行生成器函数，并或取下一个yield的产出值
onFulfilled(v)
})
} else {
resolve(result.value)
}
}
})
}
2.对于yield产出值类型处理，以及生成器函数类型校验
function myCo(gen) {
let _this = this
// // 获取生成器函数的遍历器对象
// let g = gen()
// 获取生成器函数入参
let args = Array.prototype.slice.call(arguments, 1)
// 开始执行生成器函数
return new Promise((resolve, reject) => {
// 验证是否可以获取遍历器对象
if (typeof gen === 'function') {
gen = gen.apply(_this, args)
}
if (!gen || typeof gen.next !== 'function') {
resolve(gen)
return
}
onFulfilled()
function onFulfilled(v) {
let result;
try {
result = gen.next(v)
} catch (e) {
reject(e)
return
}
next(result)
}
function onRejected(e) {
let result;
try {
// 遍历器中抛出错误，终止遍历器
// throw是让生成器内部也可以捕获错误
result = gen.throw(e)
} catch (e) {
reject(e)
return
}
next(result)
}
function next(result) {
// 如果done为false，说明生成器函数停在yield，未执行结束
if (!result.done) {
// yield产出值转Promise
// toPromise和isPromise会在下一部分解释
var value = toPromise.apply(_this, result.value)
if(value && isPromise(value)){
// 获取promise实例的value，传回生成器函数暂停的地方
// 继续执行生成器函数，并或取下一个yield的产出值
return value.then(onFulfilled, onRejected)
}
// 转Promise失败
return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
+ 'but the following object was passed: "' + String(ret.value) + '"'))
} else {
resolve(result.value)
}
}
})
}
- yield产出值转Promise，判断Promise类型
// 按类型处理
function toPromise(v){
if(!v){
return v
}
if(isPromise(v)){
return v
}
if(isGenerator(v) || isGenerateFunction(v)){
return myCo.call(this, v)
}
if(typeof v === 'function'){
return thunkToPromise.call(this, v)
}
if(Array.isArray(v)){
return arrayToPromise.call(this, v)
}
if(isObject(v)){
return objectToPromise.call(this, v)
}
return v
}
function isPromise(p){
// 这里只判断then，是为了兼容其他类似写法。比如jQuery的延迟对象
return typeof p.then === 'function'
}
// 判断遍历器对象
function isGenerator(g){
return typeof g.next === 'function' && typeof g.throw === 'function'
}
function isGenerateFunction(fn){
let constructor = fn.constructor
if(!constructor){
return false
}
// 判断生成器函数
if(constructor.name === 'GeneratorFunction'){
return true
}
// 判断遍历器对象的原型
return isGenerator(constructor.prototype)
}
// thunk函数转Promise，关于thunk函数的写法，在阮一峰老师的《ECMAScript 6 入门教程》"Generator 函数的异步应用"这一章有详细说明
// 简单举个例子的话，把fs.readFile(file, cb)改造出来的thunk函数，调用格式就是readFileThunk(file)(cb)
function thunkToPromise(thunk){
return new Promise((resolve, reject)=>{
thunk.call(this, function (err, ...res){
if(err){
return reject(err)
}
return resolve(res)
})
})
}
// 数组内容全部转为Promise
function arrayToPromise(arr){
return Promise.all(arr.map(toPromise, this))
}
// 检查普通对象
function isObject(obj){
return obj.constructor === Object
}
function objectToPromise(obj){
let result = {}, promises = []
let keys = Object.keys(obj)
for(let key of keys){
let promise = toPromise(obj[key])
if(isPromise(promise)){
// 如果为promise，则等待异步任务结束，将promise的value挂给该对象属性
defer(key, promise)
} else {
result[key] = promise
}
}
function defer(key, promise) {
// push进去的promise要包含给result赋值这一步。保证赋值这一步在 Promise.all().then(cb) cb之前执行
promises.push(
promise.then(v => {
result[key] = v
})
)
}
return Promise.all(promises).then(()=>{
return result
})
}
- co.wrap
用于将生成器函数转为普通函数
myCo.wrap = function (gen){
createPromise.__generatorFunction__ = gen;
return createPromise
function createPromise(){
// 返回myCo的执行结果
// gen.apply就是生成器函数产生的可遍历对象
return myCo.call(this, gen.apply(this, arguments))
}
}
综上所述，co模块的学习就结束了。总量很小，源码带注释一共就只有237行，只有一个核心方法co
·希望这样的说明可以对大家的理解起到提升作用
co模块源码
/**
* 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
*/
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);
onFulfilled();
/**
* @param {Mixed} res
* @return {Promise}
* @api private
*/
function onFulfilled(res) {
var ret;
try {
ret = gen.next(res);
} catch (e) {
return reject(e);
}
next(ret);
}
/**
* @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);
var value = toPromise.call(ctx, 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) {
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;
}
/**
* Convert a thunk to a promise.
*
* @param {Function}
* @return {Promise}
* @api private
*/
function thunkToPromise(fn) {
var ctx = this;
return new Promise(function (resolve, reject) {
fn.call(ctx, function (err, res) {
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;
}
《ECMAScript 6 入门教程》（阮一峰）Generator 函数的语法
《ECMAScript 6 入门教程》（阮一峰）Generator 函数的异步应用