初识洋葱模型，分析中间件执行过程，浅析koa中间件源码

前言

作为洋葱模型的第一篇文章，这里仅介绍了一些入门级知识，比如

• 了解洋葱模型执行顺序
• 分析部分 koa 中间件的源码来加深对中间件的认识

为第二篇文章：分析洋葱模型实现原理，在自己项目中接入洋葱模型打下基础

什么是洋葱模型

洋葱模型 一图胜前言

图中的一层一层的“方法”称为 中间件,比如 Cache Middleware ，Routers Middleware 就是一个个中间件

他们像流水线一样，按指定顺序执行中间件的方法

下面的案例都以 koa 作为演示的基础

搭建一个 koa 环境

由于只是简单的一个环境，所以就不用脚手架了，直接自己需要什么就安装什么

• 新建文件夹 koa-middleware（按自己喜好命名就好）
• 进入新建的文件夹，打开终端执行 npm init -y
• 再次运行 npm install koa koa-router nodemon
• 新建 src/app.js 文件
• 打开 package.json 文件，在 “script” 中添加一句启动命令 "dev": "nodemon src/app.js"

运行 npm run dev 看到上图的效果，就算是 OK 了

然后在 app.js 中写入 koa 开启服务的基础代码

const Koa = require('koa')
const Router = require('koa-router')
const app = new Koa()
const router = new Router()

router.get('/', async function(ctx) {
  ctx.body = 'hello world'
})

app.use(router.routes())

app.listen('3000', function() {
  console.log(`koa 服务已启动： http://localhost:3000`)
})

可以看到 nodemon 已经起作用了，我们无须重启终端也可以立刻看到代码修改后的运行效果~

由于 koa 开启的是一个网络服务，我们每次都得打开http://localhost:3000 才能触发相关的事件，太麻烦了

所以接下来在安装一个 axios 用于自动触发任务，方便我们探究中间件运行过程

• 安装 axios npm install axios
• 修改 app.js 代码如下：

const Koa = require('koa')
const axios = require('axios')
const Router = require('koa-router')
const app = new Koa()
const router = new Router()

router.get('/', async function(ctx) {
  ctx.body = 'hello world'
})

app.use(router.routes())

app.listen('3000', function() {
  console.log(`koa 服务已启动： http://localhost:3000`)

  axios('http://localhost:3000/')
    .then(res => {
      console.log('服务端返回的内容：', res.data)
    })
    .catch(res => {
      // catch 方法在这里是很有必要的，
      // 因为 node 程序如果有报错可能整个程序都会挂掉
      // 及时catch 住错误，不要影响主进程的运行
      console.log('服务端报错~', res.message)
    })
})

就这样一个简单的中间件探索运行环境都搭建好了

先了解中间件的写法

下面的写法仅针对 koa ，当然我也会介绍一下 express 的写法，不过都是大同小异的

• 相同的地方：

koa 和 express 都是通过 app.use() 方法传入回调函数来挂载中间件 都有 next 方法用于执行下一个中间件

• 不同的地方

在 use 方法中 koa 回调函数参数有 2 个 ctx 和 next,而 express 有 3 个 req,res,next

koa 的 ctx 可以理解为 req 和 res 的结合体了

• koa 写法

app.use(async function(ctx, next) {
  // ...
})

• express 写法

app.use(function(req, res, next) {
  // ...
})

很多中间件插件的写法，其实效果都是一样的，用一个闭合函数的目的是为了可以为中间件传入自己需要的参数

// 定义 log 中间件函数
function logMiddleare() {
  return async function(ctx, next) {
    // ...
  }
}

// 使用的时候
app.use(logMiddleare())

中间件执行顺序

以 app.use 调用顺序为准：越早调用执行越早，包尾越晚

怎么理解？

const Koa = require('koa')
const axios = require('axios')
const Router = require('koa-router')
const app = new Koa()
const router = new Router()

router.get('/', async function(ctx) {
  ctx.body = 'hello world'
})

app.use(async (ctx, next) => {
  console.log('1. 第一个执行')
  await next()
  console.log('1. 包尾执行')
})

app.use(async (ctx, next) => {
  console.log('2. 第2个执行')
  await next()
  console.log('2. 2执行结束')
})

app.use(router.routes())

app.listen('3000', function() {
  console.log(`koa 服务已启动： http://localhost:3000`)

  axios('http://localhost:3000/')
    .then(res => {
      console.log('服务端返回的内容：', res.data)
    })
    .catch(res => {
      console.log('服务端报错~', res.message)
    })
})

终端输出内容如下：

可以看到 1 方法最早执行，包尾结束。结合开头的洋葱图，能理解何为“洋葱模型”了把

如果留意到 router.get 方法，其实他也是一个中间件，也遵循上面说的规则，他是由 app.use(router.routes()) 位于第三位注册进去的，虽然没打印内容，不过可以试下他应该是第三个打印内容的中间件

中间件一定会执行吗？

不一定，这得看中间件 上家 给不给执行，如果上家一家独大包揽了，不调用 next 那“洋葱”就闭环结束了

如何理解？上代码(就是把 await next()注释掉)：

// ...
app.use(async (ctx, next) => {
  console.log('1. 第一个执行')
  // await next()
  console.log('1. 包尾执行')
})
// ...

看到返回值：

接口直接 404；方法 2 也没被执行了。为什么？

因为接口的路由注册app.use(router.routes()) 位于第三位才注册，方法 2 也位于第二位。只要有一个 app.use 的方法不调用 next 后面的方法都不能执行

同理，如果把 方法 1 中的 next 放开了，把方法 2 的注释掉，那么得到的结果就是：

中间件能相互传递数据吗？

在 koa 框架中，所有东西都挂载在 ctx/app 上，如果是公共的方法，参数，那就挂载在 app 上，如果只是和这次请求相关的内容，挂载在 ctx 上即可

当然也可以通过 return 来返回数据，不过前提是上一个中间件有接收你的值

比如下面的代码

1. 方法 1 中，挂载了一个 ctx.name；同时想获取 ctx.desc 拿到的是 undefined
2. 在方法 2 中才挂载 ctx.desc；并且接收 next 执行的返回值；方法 2 没有返回值
3. 在最后的方法中，成功拿到了 ${ctx.name} ${ctx.desc}，同时 return 了一个 {age:18} 回去

const Koa = require('koa')
const axios = require('axios')
const Router = require('koa-router')
const app = new Koa()
const router = new Router()

router.get('/', async function(ctx, next) {
  console.log(`${ctx.name} ${ctx.desc}`)
  ctx.body = 'hello world'
  await next()
  return { age: 18 }
})

app.use(async (ctx, next) => {
  console.log('1. 第一个执行')
  ctx.name = 'Jioho'
  console.log('方法1中获取desc：', ctx.desc)
  let res = await next()
  console.log('1. 包尾执行', res)
})

app.use(async (ctx, next) => {
  console.log('2. 第2个执行')
  ctx.desc = '前端小菜鸡'
  let res = await next()
  console.log('2. 2执行结束', res)
})

app.use(router.routes())

app.listen('3000', function() {
  console.log(`koa 服务已启动： http://localhost:3000`)

  axios('http://localhost:3000/')
    .then(res => {
      console.log('服务端返回的内容：', res.data)
    })
    .catch(res => {
      console.log('服务端报错~', res.message)
    })
})

执行结果如下：

这也说明了，中间件之间传递参数，最好还是通过 ctx 挂载，因为如果单纯的靠 return 来返回内容，万一中间某一个中间件没返回，那参数就丢失了

koa 节选中间件源码分析

前面也有说到，koa 中间件写法有 2 种，上面一直都是简单的 console 代码观察中间件运行顺序，下面来几个实际的中间件看看中间件到底能做些什么~

下面的均为 koajs 官方的中间库，我挑了几个一个简单的库来分析源码（实在是找不到简单，又有代表性的库了）

koa-response-time

koa-response-time 统计接口响应时间的中间件

用法和简单的描述：

这是一个统计接口响应时间的库。最下面还有一句没截图到就是

Best to .use() at the top before any other middleware, to wrap all subsequent middleware. 最好在任何其他中间件之前的顶部 .use() ，以包装所有后续中间件。

这样才能更好的统计接口整个响应的时间

可以看到这个库源码非常简短 github.com/koajs/respo…

/**
 * Expose `responseTime()`.
 */

module.exports = responseTime

/**
 * Add X-Response-Time header field.
 * @param {Dictionary} options options dictionary. { hrtime }
 *
 *        hrtime: boolean.
 *          `true` to use time in nanoseconds.
 *          `false` to use time in milliseconds.
 *          Default is `false` to keep back compatible.
 * @return {Function}
 * @api public
 */

function responseTime(options) {
  let hrtime = options && options.hrtime
  return function responseTime(ctx, next) {
    let start = ctx[Symbol.for('request-received.startAt')]
      ? ctx[Symbol.for('request-received.startAt')]
      : process.hrtime()
    return next().then(() => {
      let delta = process.hrtime(start)

      // Format to high resolution time with nano time
      delta = delta[0] * 1000 + delta[1] / 1000000
      if (!hrtime) {
        // truncate to milliseconds.
        delta = Math.round(delta)
      }
      ctx.set('X-Response-Time', delta + 'ms')
    })
  }
}

可以看到 responseTime 函数里面接收了 options 参数，就是为了接收 hrtime ,用于判断时候要输入小数时间

闭包方法和我们写的一样

唯一的区别就是他并没有用 async 关键字，因为他在 next() 方法后面使用了 .then() 完全使用 Promise 的方式，就不需要 async 和 await 了。

剩下的代码就是

1. 先记录请求开始时间
2. 然后调用 next 方法，执行后面所有的中间件
3. 执行完成后在记录一次时间，并且设置到到返回值的 header 的 'X-Response-Time' 中

小结

1. 中间件执行顺序取决于 app.use 调用时间
2. 越早调用，执行越早，收尾越晚
3. 传参得靠 ctx
4. 必须调用 next 方法后面的方法才会执行，否则洋葱模型就结束了

摸清楚中间件挂载和执行顺序后，就可以继续下一篇：分析洋葱模型实现原理，在自己项目中接入洋葱模型