接上篇分析，今天分析koa-compose这个库的源码，这个库的思想就是一个复合函数的思想，是将多个中间件函数合并到一个中间件函数执行。
先来看看其核心代码
function compose (middleware) {
if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
for (const fn of middleware) {
if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
}
/**
* @param {Object} context
* @return {Promise}
* @api public
*/
return function (context, next) {
// last called middleware #
console.log(context);
let index = -1
return dispatch(0)
function dispatch (i) {
if (i <= index) return Promise.reject(new Error('next() called multiple times'))
index = i
let fn = middleware[i]
if (i === middleware.length) fn = next
if (!fn) return Promise.resolve()
try {
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
} catch (err) {
return Promise.reject(err)
}
}
}
}
其实从代码可以看出，这个思想在上篇中的思想基本上一致，都是调用了compose函数，这个函数出入的middleware参数，这个参数代表一个数组。
我们来按照此方法一步一步来解析它的构成。
新建立一个test.js文件
function a(args) {
return function() {
}
}
function one(){
console.log('第一个');
}
function two(){
console.log('第二个');
}
function three(){
console.log('第三个');
}
let news = a([one, two, three])
在上面文件中，我们可以看到a()函数调用后，我们其实返回的是一个function。
现在我们继续完善a()
function a(args) {
return function() {
let index =-1; //定义一个索引值
return dispath(0) //返回调用的方法
//定义要调用的方法
function dispath (i) {
index = i; //将当前调用的索引值赋值给定义的索引值
let fn = args[i] //获取args的数组索引值的方法
//返回的是一个Promise
try {
return Promise.resolve(fn())
} catch (e) {
return Promise.reject(e)
}
}
}
}
我们运行上面的代码后，可以看到我们返回的是第一个函数执行后的返回的数据，也就是输出“第一个”。
那么我们怎么来实现Koa中的洋葱模型呢，继续完善a()的代码：
function a(args) {
return function() {
let index =-1; //定义一个索引值
return dispath(0) //返回调用的方法
//定义要调用的方法
function dispath (i) {
index = i; //将当前调用的索引值赋值给定义的索引值
let fn = args[i] //获取args的数组索引值的方法
//返回的是一个Promise
try {
//重点看fn里面的方法，可以看到fn第二个参数就是next()，执行next()方法就是调用下一个中间件函数，这就是为啥子我们每个中间件方法中智能有一个next()的原因
return Promise.resolve(fn(content, function next() {
return dispath(i + 1)
}))
} catch (e) {
return Promise.reject(e)
}
}
}
}
分析完前面三段代码后，我们运行这个文件，就可以看到输出
第一个
第二个
第三个
当然我们可以在每个中间件执行完后，也可以执行回调函数，先补充第一个中间件函数：
function one(ctx,next){
console.log('第一个');
next().then(()=> {
console.log("我是第一个回调函数")
});
}
再次运行这个文件，执行结果就变成了：
第一个
第二个
第三个
我是第一个回调函数
这就是实现了所谓的“洋葱模型”。
