本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。
源码地址：github1s.com/tj/co/blob/…
异步相关基础学习：yingwinwin.github.io/docs/FE/jav…
源码
/**
* 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; // 存了一下上下文
// 这截取，就为了可以这样使用co，第一个传入函数，后面的参数传函数的参数
/*
co(read, './1.txt').then(res => {
console.log(res)
})
*/
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(); // 返回成功的promise
/**
* @param {Mixed} res
* @return {Promise}
* @api private
*/
function onFulfilled(res) { // 成功回调
var ret;
try {
ret = gen.next(res);
} catch (e) {
return reject(e);
}
next(ret); // 初始递归
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) {
// 迭代器的 done 为 true 就直接返回最终的结果 {value: undefined, done: true}
if (ret.done) return resolve(ret.value);
var value = toPromise.call(ctx, ret.value); // 还没有结束。不管value是不是promise，都把能变成promise的变成promise
// 如果value有，且它还是一个promise，就调用then方法，继续递归
if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
// 上面if都没有进去，直接报错，告诉他传的不太对
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
*/
// 不管是什么都把他变成promise
function toPromise(obj) {
if (!obj) return obj; // 啥也没传
if (isPromise(obj)) return obj; // 是promise
// 如果传了的是gen，直接调用co
if (isGeneratorFunction(obj) || isGenerator(obj)) return co.call(this, obj);
if ('function' == typeof obj) return thunkToPromise.call(this, obj);
/* 因为可以这样写并发处理，所以要用下面的判断
// 数组的写法
co(function* () {
var res = yield [
Promise.resolve(1),
Promise.resolve(2)
];
console.log(res);
}).catch(onerror);
// 对象的写法
co(function* () {
var res = yield {
1: Promise.resolve(1),
2: Promise.resolve(2),
};
console.log(res);
}).catch(onerror);
*/
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
*/
// 是否是promise
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; // 要有构造器
// 且构造器的name 和 displayName是对的
if ('GeneratorFunction' === constructor.name || 'GeneratorFunction' === constructor.displayName) return true;
return isGenerator(constructor.prototype); // 原型上有next 和 throw方法
}
/**
* Check for plain object.
*
* @param {Mixed} val
* @return {Boolean}
* @api private
*/
function isObject(val) {
console.lg
return Object == val.constructor;
}
总结
1. co是什么？
用来自动调用Generator的函数, 传入一个迭代器，并使用递归来帮助用户获得多次异步任务的最后结果。这样就不用手动调用gen() 函数返回的next方法了。
\
后来浏览器为了把这个步骤也省略，就出现了 async await 的语法糖。
2. co.wrap
源码
/**
* 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
*/
// 将给定生成器' fn '包装到一个返回promise的函数中。这是一个单独的函数
// 每个' co() '调用不会创建一个新的，不必要的闭包。
co.wrap = function (fn) {
createPromise.__generatorFunction__ = fn;
return createPromise;
function createPromise() {
return co.call(this, fn.apply(this, arguments));
}
};
// 上面的wrap可能不太好理解。可以改造成下面这样
co.wrap = (read) => {
return (...arg) => {
return co(read(...arg)) // 其实就是在外面包了一层函数。把之前的那个co，当做闭包变量，重复使用
}
}
使用
const fs = require('fs').promises;
const path = require('path');
const co = require('co');
function* read (filename) {
return yield fs.readFile(path.resolve(__dirname, filename), 'utf-8')
}
var readFile = co.wrap(read) // 可以使上面的read函数复用,节约了内存
readFile('./1.txt').then(res => {
console.log(res)
})
co(read('./1.txt')).then(res => { // 这里每一次传入都是最新的
console.log(res)
})
3. 异步迭代
异步迭代的手段就是使用递归，for循环是不能精确的使某一个函数一定在另一个函数后面执行，递归才能
function co(gen) {
// 调用的时候显而易见，co是返回一个promise
return new Promise((resolve, reject) => {
function next(v) {
let { value, done } = gen.next(v); // 在这里接受next回调传入的值
if (!done) { // 没结束，value是promise需求.then，取出最新值
value.then(data => {
next(data) // 继续递归，传入值
}, reject)
} else { // 结束了，直接返回成功结果
resolve(value)
}
}
next() // 初始递归
})
}
co(read('./1.txt')).then(res => {
console.log(res)
})
4. thunk函数 (柯理化)
www.ruanyifeng.com/blog/2015/0…
看文章的意思，其实就是函数的柯理化。
看一下thunk函数的使用
const fs = require('fs');
const path = require('path');
const co = require('co')
// 进行thunk包装
function thunkRead(url) {
return (cb) => { // 返回一个函数
fs.readFile(path.resolve(__dirname, url), 'utf-8', cb)
}
}
function* gen() {
let content = yield thunkRead('./1.txt') // 这就只传入一个参数
return content
}
// co里面会走处理thunk函数的方法thunkToPromise
co(gen()).then(res => {
console.log(res) // 正确读出文件的内容
})
function thunkToPromise(fn) {
var ctx = this;
return new Promise(function (resolve, reject) {
/*
这里的 fn 就是
(cb) => {
fs.readFile(path.resolve(__dirname, url), 'utf-8', cb)
}
调用传入的cb，就是
function (err, res) {
if (err) return reject(err); // 处理错误逻辑
if (arguments.length > 2) res = slice.call(arguments, 1); // 取res
resolve(res); // promise.resolve()包一下，就变成promise了，然后继续co的处理
}
*/
fn.call(ctx, function (err, res) { // 传入的如果是一个thunk函数。
if (err) return reject(err);
if (arguments.length > 2) res = slice.call(arguments, 1);
resolve(res);
});
});
}
5. co并发处理
// 数组的写法
co(function* () {
var res = yield [
Promise.resolve(1),
Promise.resolve(2)
];
console.log(res);
}).catch(onerror);
// 对象的写法
co(function* () {
var res = yield {
1: Promise.resolve(1),
2: Promise.resolve(2),
};
console.log(res);
}).catch(onerror);
源码
/**
* Convert an array of "yieldables" to a promise.
* Uses `Promise.all()` internally.
*
* @param {Array} obj
* @return {Promise}
* @api private
*/
// 比较容易理解，直接就是用all，然后怕不是promise，又包了topromise
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); // 取出所有的key
var promises = []; // 用来存放并发的promise
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var promise = toPromise.call(this, obj[key]); // 先包一层promise
if (promise && isPromise(promise)) defer(promise, key); // 如果是，先放到promise数组里面
else results[key] = obj[key]; // 不是直接返回当前的key
}
// 拿到刚刚的promise数组，进行all请求。然后返回结果
return Promise.all(promises).then(function () {
return results;
});
function defer(promise, key) {
// predefine the key in the result
results[key] = undefined;
// 往promises数组里面推promise
promises.push(promise.then(function (res) {
results[key] = res;
}));
}
}
