什么是洋葱模型？

web框架

说到洋葱模型，就必须聊一聊中间件，中间件这个概念，我们并不陌生，比如平时我们用的 redux、express 、koa 这些库里，都离不开中间件。

那 koa 里面的中间件是什么样的呢？其本质上是一个函数，这个函数有着特定，单一的功能，koa将一个个中间件注册进来，通过组合实现强大的功能。

先看 demo ：

// index.js
const Koa = require("koa")
const app = new Koa();

// 中间件1
app.use(async (ctx, next) => {
    console.log("1")
    await next()
    console.log("2")
});
// 中间件2
app.use(async (ctx, next) => {
    console.log("3")
    await next()
    console.log("4")
});
// 中间件3
app.use(async (ctx, next) => {
    console.log("5")
    await next()
    console.log("6")
});
app.listen(8002);

先后注册了三个中间件，运行一下index.js ，可以看到输出结果为：

1
3
5
6
4
2

没接触过洋葱模型的人第一眼可能会疑惑，为什么调用了一个 next 之后，直接从1 跳到了 3 ，而不是先输出1 ，再输出2呢。 其实这就是洋葱模型特点，下图是它的执行过程：

image.png 一开始我们先后注册了三个中间件，分别是中间件1，中间件2，中间件3，调用listen方法，打开对应端口的页面，触发了中间件的执行。

首先会先执行第一个中间件的 next 的前置语句，相当于 demo 里面的 console.log('1') ，当调用 next() 之后，会直接进入第二个中间件，继续重复上述逻辑，直至最后一个中间件，就会执行 next 的后置语句，然后继续上一个中间件的后置语句，继续重复上述逻辑，直至执行第一个中间件的后置语句，最后输出。

image.png 正是因为它这种执行机制，才被称为洋葱模型。