koa与express的中间件机制揭秘
TJ大神开发完express和koa后毅然决然的离开了nodejs转向了go，但这两个web开发框架依然是用nodejs做web开发应用最多的。
koa和express这两个web开发框架都有自己的中间件机制，那这两个机制有什么不同呢？
koa这里我们以koa2为例，koa在问世以来大有席卷express的势头，下面来看一段koa的运行代码：
const Koa = require('koa')
const app = new Koa()
app.use(async function m1 (ctx, next) {
console.log('m1')
await next()
console.log('m1 end')
})
app.use(async function m2 (ctx, next) {
console.log('m2')
await next()
console.log('m2 end')
})
app.use(async function m3 (ctx) {
console.log('m3')
ctx.body = 'hello'
})
app.listen(8080)执行结果为：
m1
m2
m3
m2 end
m1 end根据这段代码的运行结果于是有人得出结论，Koa的中间件模型: 洋葱形，如图所示：
而对于express有些人说express的中间件是线性执行的，从上到下依次执行，仔细分析这句话好像啥也没说。
接着咱们看一下一段express中间件执行的代码：
const connect = require('express')
const app = connect()
app.use(function m1 (req, res, next) {
console.log('m1')
next()
console.log('m1 end')
})
app.use(function m2 (req, res, next) {
console.log('m2')
next()
console.log('m2 end')
})
app.use(function m3 (req, res, next) {
console.log('m3')
res.end('hello')
})
app.listen(8080)执行结果如下：
m1
m2
m3
m2 end
m1 end什么情况，彻底懵逼状态，这和koa好像没哈区别吗，express按照这个结果也是洋葱型啊。
先别急，再仔细看一下两段代码，先来看express，按照开发者的思路，在m3中间件中调用了res.send之后，请求-处理-响应这个流程就结束了，但是程序还在执行，为什么会是这个样子呢？这需要了解一下express中间的实现原理，express调用中间件的原理最终运行时是这个样子的，伪代码如下：
app.use(function middleware1(req, res, next) {
console.log('middleware1 开始')
// next()
(function (req, res, next) {
console.log('middleware2 开始')
// next()
(function (req, res, next) {
console.log('middleware3 开始')
// next()
(function handler(req, res, next) {
res.send("end")
console.log('123456')
})()
console.log('middleware3 结束')
})()
console.log('middleware2 结束')
})()
console.log('middleware1 结束')
})可以看到express的中间件的原理就是一层层函数的嵌套，虽然最内部的函数调用res.send结束的请求，但是程序依然在运行。并且这个运行的结果也类似koa的洋葱。这里面有一点需要注意，express结束请求是在最内部函数。这很重要。
koa的实现主要依赖compose这个函数，接下来咱们看一下这个函数的代码：
// 完整版
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
const fn = middleware[i] || next
if (!fn) return Promise.resolve()
try {
return Promise.resolve(fn(context, function next () {
return dispatch(i + 1)
}))
} catch (err) {
return Promise.reject(err)
}}}
}有点长不好看懂，简化之后如下：
// 简化版
function compose(middleware) {
return function(context, next) {
let index = -1
return dispatch(0)
function dispatch(i) {
index = i
const fn = middleware[i] || next
if (!fn) return Promise.resolve()
return Promise.resolve(fn(context, function next() {
return dispatch(i + 1)
}))
}
}
}一个递归调用，连续调用中间件，以三次为例：代码如下：
第一次，此时第一个中间件被调用，dispatch(0)，展开：
Promise.resolve(function(context, next){
//中间件一第一部分代码
await/yield next()；
//中间件一第二部分代码
}());很明显这里的next指向dispatch(1)，那么就进入了第二个中间件；
第二次，此时第二个中间件被调用，dispatch(1)，展开：
Promise.resolve(function(context, 中间件2){
//中间件一第一部分代码
await/yield Promise.resolve(function(context, next){
//中间件二第一部分代码
await/yield next();
//中间件二第二部分代码
}())
//中间件一第二部分代码
}());很明显这里的next指向dispatch(2)，那么就进入了第三个中间件；
第三次，此时第二个中间件被调用，dispatch(2)，展开：
Promise.resolve(function(context, 中间件2){
//中间件一第一部分代码
await/yield Promise.resolve(function(context, 中间件3){
//中间件二第一部分代码
await/yield Promise(function(context){
//中间件三代码
}());
//中间件二第二部分代码
})
//中间件一第二部分代码
}());此时中间件三代码执行完毕，开始执行中间件二第二部分代码，执行完毕，开始执行中间一第二部分代码，执行完毕，所有中间件加载完毕。
可以看到，Koa2的中间件机制和express没啥区别，都是回调函数的嵌套，遇到next或者 await next就中断本中间件的代码执行，跳转到对应的下一个中间件执行期内的代码…一直到最后一个中间件，然后逆序回退到倒数第二个中间件await next 或者next下部分的代码执行，完成后继续回退…一直回退到第一个中间件await next或者next下部分的代码执行完成，中间件全部执行结束。
仔细看一下koa除了调用next的时候前面加了一个await好像和express没有任何区别，都是函数嵌套，都是洋葱模型。但是咱们回过头再仔细看一下文章最上面koa的运行代码，koa是在哪里响应的用户请求呢？koa中好型并没有cxt.send这样的函数，只有cxt.body，但是调用cxt.body并不是直接结束请求返回响应啊，和express的res.send有着本质上的不同。下面引用一段其他网友总结的express和koa中间件机制的不同，我个人感觉总结的很到位：
其实中间件执行逻辑没有什么特别的不同，都是依赖函数调用栈的执行顺序，抬杠一点讲都可以叫做洋葱模型。Koa 依靠 async/await（generator + co）让异步操作可以变成同步写法，更好理解。最关键的不是这些中间的执行顺序，而是响应的时机，Express 使用 res.end() 是立即返回，这样想要做出些响应前的操作变得比较麻烦；而 Koa 是在所有中间件中使用 ctx.body 设置响应数据，但是并不立即响应，而是在所有中间件执行结束后，再调用 res.end(ctx.body) 进行响应，这样就为响应前的操作预留了空间，所以是请求与响应都在最外层，中间件处理是一层层进行，所以被理解成洋葱模型，个人拙见。
这个流程可以从源码 compse(middlewares) 后形成的函数执行处看到，这个合并的函数执行后有个 .then((ctx) => { res.end(ctx.body) }) 的操作，我们也可以通过在不同中间件中都设置 ctx.body，会发现响应数据被一次次覆盖。
核心就是请求的响应的时机不同，express是在调用res.send就结束响应了，而koa则是在中间件调用完成之后，在洋葱的最外层，由koa调用res.send方法。
以上便是koa与express中间件机制的不同了，写了很多，好辛苦，感觉有收获的话就鼓励下小编吧。
每天进步一点点，大家共勉。