【决战Koa之巅-3】编写你的第一个Koa中间件

402 阅读2分钟

一、洋葱模型

image.png

image.png

简单来说,就是从请求到响应之间会进行一层层的处理,而这些处理是由中间件执行的

二、Koa 中间件

1. Express 及 Koa 对比

  • 先看看 Express(Koa的上一代),从 4.X 开始,默认集成了三个中间件

image.png

  • 再来看看 Koa 介绍,其实 Koa 并没有捆绑任何中间件,相当于绿色版的 Express

image.png

2. Koa 中间件选取原则

Koa 绿色的模式其实有利有弊,好处就是没有任何依赖,清爽;坏处就是搭建一个可以生产的架子更麻烦且考验开发者的三方选型能力,一般选择三方中间件秉承以下几点:

1. 功能能否覆盖需求

该中间件提供的功能是否能够覆盖你的需求,核心条件没有之一

2. 社区活跃度

通常越活越的社区,关注度越高且 bug 修复更高,版本发布频繁

3. 文档及 Demo 是否齐全

通常 2 比较活跃的,该项得分也不会低

4. 中间件体积

1、2、3 同等时,考虑下体积

三、实战演练

1. 编写一个中间件

在我们第一期的文章中其实已经用到了中间件,如下:

const koa=require('koa');
const app=new koa();

// 此处也是中间件,只是该中间件终结了请求
app.use( async (ctx)=>{
  ctx.body='Hello Koa world'
})

app.listen(3000,()=>{
  console.log('启动成功!http://localhost:3000')
});

为了更好体现洋葱模型,我们在这之前再添加一个带 next 传递中间件。

const koa=require('koa');
const app=new koa();
// 前置中间件,带 next 传递
app.use( async (ctx, next)=>{
  console.log('我是前置中间件')
  await next()
})

// 配置中间件
app.use( async (ctx)=>{
  ctx.body='Hello Koa world'
})

app.listen(3000,()=>{
  console.log('启动成功!http://localhost:3000')
});

请求:

image.png

后台输出:

image.png

2. 再加点料

刚刚的例子,体验了洋葱的左边,那右边呢?去哪里了?

image.png

我们把例子做如下修改

const koa=require('koa');
const app=new koa();

// 前置中间件
app.use( async (ctx, next)=>{
  console.log('我是前置中间件-request') // <<=== add
  await next()
  console.log('我是前置中间件-response') // <<=== add
})

app.use( async (ctx)=>{
  console.log('Hello') // <<=== add
  ctx.body='Hello Koa world'
})

app.listen(3000,()=>{
  console.log('启动成功!http://localhost:3000')
});

查看运行结果:

image.png

多个中间件会形成一个栈结构(middle stack),以"先进后出"(first-in-last-out)的顺序执行。

  1. 最外层的中间件首先执行。
  2. 调用next函数,把执行权交给下一个中间件。
  3. ...
  4. 最内层的中间件最后执行。
  5. 执行结束后,把执行权交回上一层的中间件。
  6. ...
  7. 最外层的中间件收回执行权之后,执行next函数后面的代码。 引自阮一峰老师的博客