一：简介
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 #
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)
}
}
}
}
源码精简
function compose (middleware) {
return function (context, next) {
// last called middleware #
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)
}
}
}
}
源码中的重要逻辑：
- 返回值为一个中间件A
- 中间件数组的执行，是从第一个开始的
- 执行某中间件时，同时传入了下一个中间件（赋值为next），并通过调用next来执行该中间件
- 数组中中间件执行完毕后，执行A的下一个中间件
三：next与洋葱模型
上回说到，next是用来执行下一个中间件的，那么在某中间件中，next的执行可能有以下情况
3.1 在最开始调用
let md1 = async function (ctx, next) {
await next();
console.log(1);
console.log(2);
}
let md2 = async function (ctx, next) {
await next();
console.log(3);
console.log(4);
}
let mds = compose([md1, md2]);
mds({}, null).then(() => {
console.log('all finished');
}).catch(e => {
console.error(e);
});
输出：
3
4
1
2
all finished
3.2 在中间调用
let md1 = async function (ctx, next) {
console.log(1);
await next();
console.log(2);
}
let md2 = async function (ctx, next) {
console.log(3);
await next();
console.log(4);
}
let mds = compose([md1, md2]);
mds({}, null).then(() => {
console.log('all finished');
}).catch(e => {
console.error(e);
});
输出：
1
3
4
2
all finished
3.3 在末尾调用
let md1 = async function (ctx, next) {
console.log(1);
console.log(2);
await next();
}
let md2 = async function (ctx, next) {
console.log(3);
console.log(4);
await next();
}
let mds = compose([md1, md2]);
mds({}, null).then(() => {
console.log('all finished');
}).catch(e => {
console.error(e);
});
输出：
1
2
3
4
all finished
3.4 总结
由于以下两条显而易见的规则：
- 在某中间件内，next之前的代码先于next之后的代码执行
- 对某中间件来说，next执行完毕的标志，是其后所有的中间件均执行完毕
故而中间件执行的过程有以下特征：
- 先执行各个中间件next之前的代码，再执行各个中间件next之后的代码
- 各中间件next之前的代码，执行顺序为按照中间件顺序，从前向后
- 各中间件next之后的代码，执行顺序为按照中间件顺序，从后向前
最后祭出那颗著名的葱：
2892151181-5ab48de7b5013_articlex.png
