用过Koa的，肯定对 Middleware(中间件) 有所了解，那我们就用中间件从现象出发，理解洋葱模型

先自定义两个中间件：

logTime：打印时间戳

module.exports=function() {

returnasyncfunction(ctx, next) {

console.log("next前，打印时间戳:", newDate().getTime())

awaitnext()

console.log("next后，打印时间戳:", newDate().getTime())

}

}

logUrl：打印路由

module.exports=function() {

returnasyncfunction(ctx, next) {

console.log("next前，打印url:", ctx.url)

awaitnext()

console.log("next后，打印url:", ctx.url)

}

}

在 index.js 中use：

constKoa=require('koa')

constapp=newKoa()

​

constlogTime=require('./middleware/logTime')

constlogUrl=require('./middleware/logUrl')

​

// logTime

app.use(logTime())

​

// logUrl

app.use(logUrl())

​

// response

app.use(asyncctx=> {

ctx.body='Hello World'

})

​

app.listen(3000)

现在启动服务，然后我们随便访问一个路由，比如 /test，会发现这样一个现象：

两个现象：

• 中间件的执行了两次

• 执行顺序奇怪，以next函数为分界点：先use的中间件，next前的逻辑先执行，但next后的逻辑反而后执行

第一反应肯定就是：Koa为什么要这么设计？

正常不应该是中间件按顺序从开始到结束执行吗？

确实，如果说使用中间件的场景不存在前后依赖的情况，从头到尾按顺序链式调用完全没问题。但如果存在依赖的情况呢？如果只链式执行一次，怎么能保证前面的中间件能使用之后的中间件所添加的东西呢？

比如上面两个例子，我在 logUrl 的中间件里，对url进行了处理，加上了一个时间戳，然后我想在 logTime 的中间件里拿到这个时间戳并打印

如果只链式执行一次的话，显然无法实现

然后就是顺序的问题，为什么以next为分界线，先use的中间件 next 之后的逻辑反而后执行呢？

还是上面的例子，如果我们在logUrl 中间件里对url加上去的时间戳，是从数据库里取出来的，logTime 中间件肯定得等 logUrl 跑完了才能拿到对应时间戳。所以如果 logTime 之中的next完成的话，肯定是logUrl这个中间件已经跑完了

因此，上述现象1、2的原因就很清晰了

这样我们可以就确定中间件的执行流必定是如下的一个流程：

• 外层中间件进行前期处理（next 前的逻辑）

• 调用next，将控制流交给下个中间件，并await其完成，直到后面没有中间件或者没有next函数执行为止

• 完成后一层层回溯执行各个中间件的后期处理（next 后的逻辑）

这就是洋葱模型

再放出那两张很经典的图：

Koa中，外层中间件称为上游，内层中间件称为下游，现在我们再回头看官网的描述：

先用我们自己的方式理解之后，官方描述就不会太晦涩了

知道了原因，我们肯定得手动来实现一下洋葱模型，加深理解

实现之前肯定得先看一波源码：

koa

koa-compose

来，一步步分析一波：

首先，先看看middleware在源码里是什么数据类型：

然后按流程看，肯定先进app的listen函数:

创建服务的时候，传入了callback函数的返回值，去看看callback函数：

重点就是这里了，我们上面的分析说明想要实现洋葱模型，下面两点缺一不可：

• 要把上下文ctx对象和下一个中间件next传给当前的中间件

• 必须要等待下一个中间件执行完，再执行当前中间件的后续逻辑

而这就是compose函数所做的事情，来自于 koa-compose，这里先暂时不贴源码，有一说一很绕，强行看有点难受

所以，我们可以先按自己的思路来试试：

应该不需要解释吧，这样肯定会报错：

因为执行mw2的时候（也就是mw1里的next），并没有把ctx 和 mw3传给它

那么问题来了：我们怎么才能在调用mw1的next时，把ctx 和 mw2给这个next呢？

那我们肯定就需要对middleware数组里的每个元素重新包装一下了，用什么包装呢？

看个例子：

bind会将当时的参数保留下来，这正是我们所需要的，因此，加上一点小小的改动：

这个时候我们再跑一下代码：

这不就实现了吗？刚刚我留了一个坑就是没放 koa-compose 的源码，下面是源码：

红框的部分就是核心代码，大家可以自己看看，如果感觉很绕，可以对比我上面的例子先理解的，贴一下我简化版的代码：

constmiddleware= []

letmw1=asyncfunction (ctx, next) {

console.log("next前，第一个中间件")

awaitnext()

console.log("next后，第一个中间件")

}

letmw2=asyncfunction (ctx, next) {

console.log("next前，第二个中间件")

awaitnext()

console.log("next后，第二个中间件")

}

letmw3=asyncfunction (ctx, next) {

console.log("第三个中间件，没有next了")

}

​

​

functionuse(mw) {

middleware.push(mw)

}

​

use(mw1)

use(mw2)

use(mw3)

​

letfn=function (ctx) {

returndispatch(0)

​

functiondispatch(i) {

letcurrentMW=middleware[i]

if(!currentMW) {

return

}

returncurrentMW(ctx, dispatch.bind(null, i+1))

}

}

​

fn()

OK啦，这样就大工告成了

总结一下吧：一开始通过现象和场景反推，明白了什么时洋葱模型，以及为什么Koa需要使用洋葱模型，最后就是利用源码，简化实现了一下洋葱模型