这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战
首先感谢若川大佬组织的这次源码阅读
CO是什么
可能很多小伙伴都还不知道co是什么。
co是著名程序员 TJ Holowaychuk 于2013年6月发布的一个小工具，用于 Generator 函数的自动执行。
Generator 函数
Generator 又叫迭代器函数。
function* gen() {
yield 1;
yield 2;
yield 3;
}
let g = gen();
// "Generator { }"
g.next()
{value: 1, done: false}
g.next()
{value: 2, done: false}
g.next()
{value: 3, done: false}
g.next()
{value: undefined, done: true}
Generator是一个迭代器函数，不会自动执行，需要调用next方法执行。返回值是第一个对象，包含value和done，done来表示 是否执行完成
co函数库的目的就是为了解决需要调用next的麻烦。
co(function* () {
var result = yield Promise.resolve(true);
return result;
}).then(function (value) {
console.log(value);
}, function (err) {
console.error(err.stack);
});
结果返回一个primise
co模拟
第一版
1.首先接受一个迭代器函数
2.返回一个promise结果是value
function co(fn) {
const gen = fn()
return New Promise(resolve => {
resolve(gen.next().value)
})
}
function* gen() {
yield 1
}
co(gen).then(res => {console.log(res)}) => 1
问题：细心的同学已经发现了，如果有多个yield怎么办，我要传递参数怎么办？
第二版
为了解决上面的问题。
我们改良一下：
function co(fn) {
// 解决传参问题
const ctx = this
const args = Array.prototype.slice.call(arguments, 1)
const gen = fn.apply(ctx, args)
return new Promise(resolve => {
onFulfilled()
function onFulfilled(res){
const ret = gen.next(res)
next(ret)
}
function next(ret) {
let promise = ret.value
if (typeof promise !== 'function' || (typeof promise === 'function' && !promise.then)) {
promise = resolve(promise)
}
promise && promise.then(onFulfilled)
}
})
}
看一下源码
主函数
/**
* slice() reference.
*/
var slice = Array.prototype.slice;
/**
* Expose `co`.
*/
// `支持commonjs`
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
// 返回一个promise
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...catch捕获错误
try {
ret = gen.next(res);
} catch (e) {
return reject(e);
}
next(ret);
return null;
}
/**
* @param {Error} err
* @return {Promise}
* @api private
*/
// 执行错误使用 genertor函数的throw方法
// # Generator包含 next return throw三个方法
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) {
// # Generator 返回状态，如果为done 就 return resolve(ret.value)
// 如果还没有结束就转换成promise
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) + '"'));
}
});
}
工具函数
toPromise
转换成promise
1.如果obj为空直接返回
2.如果是promise直接返回
3.如果是 isGeneratorFunction 或 isGenerator 就返回执行结果
4.如果是一个函数，就执行thunkToPromise
5.如果是数组，就执行arrayToPromise
6.如果是对象，就执行objectToPromise
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;
}
arrayToPromise
这段很简单。就是使用promise.all的方法
function arrayToPromise(obj) {
return Promise.all(obj.map(toPromise, this));
}
objectToPromise
思路是这样的：
对对象每个属性的值进行 promise转换，然后将结果存入到
results中
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;
}));
}
}
isPromise
判断是否是 promise，这里通过obj.then是不是函数来判断而不用Object.prototype.toString.call，原因是因为可能有自定义的 promise
function isPromise(obj) {
return 'function' == typeof obj.then;
}
isGenerator
判断是否是 Generator
function isGenerator(obj) {
return 'function' == typeof obj.next && 'function' == typeof obj.throw;
}
isGeneratorFunction
判断是否是 GeneratorFunction
function isGeneratorFunction(obj) {
var constructor = obj.constructor;
if (!constructor) return false;
if ('GeneratorFunction' === constructor.name || 'GeneratorFunction' === constructor.displayName) return true;
return isGenerator(constructor.prototype);
}
thunkToPromise
thunk函数，下次单独写一篇文章来说。
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);
});
});
}
总结
通过学习co的源码，有一次熟悉了 GeneratorFunction，知晓它的特性，于此同时，我们是不是也能够猜到 asyn await异步代码是如何同步运行的了？关注我下一期我们学习一下thunk函数和async await , promise以及 GeneratorFunction三者之间的联系。
求个赞呀～
