本文将解说 koa 的洋葱模型，咱们为什么要应用洋葱模型，以及它的原理实现。把握洋葱模型对于了解 koa 至关重要，心愿本文对你有所帮忙~
什么是洋葱模型
先来看一个 demo
const Koa = require('koa');const app = new Koa();// 中间件1app.use((ctx, next) => { console.log(1); next(); console.log(2);});// 中间件 2 app.use((ctx, next) => { console.log(3); next(); console.log(4);});app.listen(8000, '0.0.0.0', () => { console.log(`Server is starting`);});输入的后果是：
1342在 koa 中，中间件被 next() 办法分成了两局部。next() 办法下面局部会先执行，上面部门会在后续中间件执行全副完结之后再执行。能够通过下图直观看出：
在洋葱模型中，每一层相当于一个中间件，用来解决特定的性能，比方错误处理、Session 解决等等。其解决程序先是 next() 前申请（Request，从外层到内层）而后执行 next() 函数，最初是 next() 后响应（Response，从内层到外层），也就是说每一个中间件都有两次解决机会。
为什么 Koa 应用洋葱模型
如果不是洋葱模型，咱们中间件依赖于其余中间件的逻辑的话，咱们要怎么解决？
比方，咱们须要晓得一个申请或者操作 db 的耗时是多少，而且想获取其余中间件的信息。在 koa 中，咱们能够应用 async await 的形式联合洋葱模型做到。
app.use(async(ctx, next) => { const start = new Date(); await next(); const delta = new Date() - start; console.log (`申请耗时: ${delta} MS`); console.log('拿到上一次申请的后果：', ctx.state.baiduHTML);})app.use(async(ctx, next) => { // 解决 db 或者进行 HTTP 申请 ctx.state.baiduHTML = await axios.get('http://baidu.com');})而如果没有洋葱模型，这是做不到的。
深刻 Koa 洋葱模型
咱们以文章开始时候的 demo 来剖析一下 koa 外部的实现。
const Koa = require('koa');//Applicationsconst app = new Koa();// 中间件1app.use((ctx, next) => { console.log(1); next(); console.log(2);});// 中间件 2 app.use((ctx, next) => { console.log(3); next(); console.log(4);});app.listen(9000, '0.0.0.0', () => { console.log(`Server is starting`);});use 办法
use 办法就是做了一件事，保护失去 middleware 中间件数组
use(fn) { // ... // 保护中间件数组——middleware this.middleware.push(fn); return this; }listen 办法 和 callback 办法
执行 app.listen 办法的时候，其实是 Node.js 原生 http 模块 createServer 办法创立了一个服务，其回调为 callback 办法。callback 办法中就有咱们明天的重点 compose 函数，它的返回是一个 Promise 函数。
listen(...args) { debug('listen'); // node http 创立一个服务 const server = http.createServer(this.callback()); return server.listen(...args); } callback() { // 返回值是一个函数 const fn = compose(this.middleware); const handleRequest = (req, res) => { // 创立 ctx 上下文环境 const ctx = this.createContext(req, res); return this.handleRequest(ctx, fn); }; return handleRequest; }handleRequest 中会执行 compose 函数中返回的 Promise 函数并返回后果。
handleRequest(ctx, fnMiddleware) { const res = ctx.res; res.statusCode = 404; const onerror = err => ctx.onerror(err); const handleResponse = () => respond(ctx); onFinished(res, onerror); // 执行 compose 中返回的函数，将后果返回 return fnMiddleware(ctx).then(handleResponse).catch(onerror); }koa-compose
compose 函数援用的是 koa-compose 这个库。其实现如下所示：
function compose (middleware) { // ... return function (context, next) { // last called middleware # let index = -1 // 一开始的时候传入为 0，后续会递增 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 // 当 fn 为空的时候，就会开始执行 next() 前面局部的代码 if (!fn) return Promise.resolve() try { // 执行中间件，注意这两个参数，都是中间件的传参，第一个是上下文，第二个是 next 函数 // 也就是说执行 next 的时候也就是调用 dispatch 函数的时候 return Promise.resolve(fn(context, dispatch.bind(null, i + 1))); } catch (err) { return Promise.reject(err) } } }}代码很简略，咱们来看看具体的执行流程是怎么的：
当咱们执行第一次的时候，调用的是 dispatch(0)，这个时候 i 为 0，fn 为第一个中间件函数。并执行中间件，注意这两个参数，都是中间件的传参，第一个是上下文，第二个是 next 函数。也就是说中间件执行 next 的时候也就是调用 dispatch 函数的时候，这就是为什么执行 next 逻辑的时候就会执行下一个中间件的起因：
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));当第二、第三次执行 dispatch 的时候，跟第一次一样，别离开始执行第二、第三个中间件，执行 next() 的时候开始执行下一个中间件。
当执行到第三个中间件的时候，执行到 next() 的时候，dispatch 函数传入的参数是 3，fn 为 undefined。这个时候就会执行
if (!fn) return Promise.resolve()这个时候就会执行第三个中间件 next() 之后的代码，而后是第二个、第一个，从而造成了洋葱模型。
其过程如下所示：
简易版 compose
典范 koa 的逻辑，咱们能够写一个简易版的 compose。不便大家的了解：
const middleware = []let mw1 = async function (ctx, next) { console.log("next前，第一个中间件") await next() console.log("next后，第一个中间件")}let mw2 = async function (ctx, next) { console.log("next前，第二个中间件") await next() console.log("next后，第二个中间件")}let mw3 = async function (ctx, next) { console.log("第三个中间件，没有next了")}function use(mw) { middleware.push(mw);}function compose(middleware) { return (ctx, next) => { return dispatch(0); function dispatch(i) { const fn = middleware[i]; if (!fn) return; return fn(ctx, dispatch.bind(null, i+1)); } }}use(mw1);use(mw2);use(mw3);const fn = compose(middleware);fn();总结
Koa 的洋葱模型指的是以 next() 函数为宰割点，先由外到内执行 Request 的逻辑，再由内到外执行 Response 的逻辑。通过洋葱模型，将多个中间件之间通信等变得更加可行和简略。其实现的原理并不是很简单，次要是 compose 办法。
参考
- Talk about koa’s onion model
- 如何更好地了解中间件和洋葱模型