唯品秀前端博客
当前位置: 前端开发 > Node+Koa > 深入浅出理解koa2中的洋葱模型机制koa中间件

在koa中一个核心概念就是叫“洋葱模型”,如果你不去很清晰的了解,那在写koa项目代码过程中肯定得吃亏,因为你完全无法理解koa那些中间件具体执行顺序,拿到的结果和预想中可能会不一样。所谓洋葱模型其实就是代码在执行过程中先入后出,具体理解看后面示例

图解

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const Koa = require('koa');
const app = new Koa();

// #1
app.use(async (ctx, next) => {
  console.log('第一层洋葱 - 开始')
  await next();
  const rt = ctx.response.get('X-Response-Time');
  console.log(`${ctx.method} ${ctx.url} - ${rt}`);
  console.log('第一层洋葱 - 结束')
});

// #2
app.use(async (ctx, next) => {
  console.log('第二层洋葱 - 开始')
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  ctx.set('X-Response-Time', `${ms}ms`);
  console.log('第二层洋葱 - 结束')
});

app.use(async ctx => {
  console.log('第三层洋葱 - 开始')
  ctx.body = 'Hello World';
  console.log('第三层洋葱 - 结束')
});

app.listen(8000);
1
2
3
4
5
6
7
// 执行结果
第一层洋葱 - 开始
第二层洋葱 - 开始
第三层洋葱 - 开始
第三层洋葱 - 结束
第二层洋葱 - 结束
第一层洋葱 - 结束

通过上面这篇代码我们能清晰的看清,当程序运行到await next()的时候就会暂停当前程序,进入下一个中间件,处理完之后才会仔回过头来继续处理。也就是说,当一个请求进入,#1会最开始执行,但同时它也是最后结束,#2则是被第二和倒数第二执行,规则依次类推你懂得。

重点next()

await next()使每个middleware(中间件)分成,前置操作,等待其他中间件操作可以观察到中间件的特性有:

  • 上下文ctx
  • await next()控制前后置操作
  • 后置操作类似于数据解构-栈,先进后出

意义

谈到洋葱模型就要说中间件,说到中间件就要说上下文Context。Koa 的 Context 把 node 的 request, response 对象封装进一个单独对象, 并提供许多开发 web 应用和 APIs 有用的方法. 那些在 HTTP server 开发中使用非常频繁操作, 直接在 Koa 里实现, 而不是放在更高层次的框架, 这样中间件就不需要重复实现这些通用的功能。个人认为,这个做法是有跨时代意义的。

小结

洋葱模型本身理解起来很简单,重点要知道其执行过程是通过next来驱动管控的,但毕竟算是一种和我们平时写js代码不一样的执行原理,所以还是需要格外注意,否则写着写着就迷糊了,回头一看原来又是这个问题。

至于怎么去更好的牢记这个概念避免采坑,除了平时有机会尽可能多写多理解,我们可以从图解着手,现在假想,你手里有一支牙签,横向穿过一个洋葱,是不是会层层穿透?从第一层进去、到第二层、第三次...然后到中间层后,再层层穿透的出,从第三层出、第二层、第一层...

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"深入浅出理解koa2中的洋葱模型机制koa中间件"

最新评论

    暂无留言哦~~

博客简介

一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,梦想一旦被付诸行动,就会变得神圣,愿景:成为宇宙中最具有代表性的前端技术类博客。主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 290 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 7 个
  • 评论总数: 981 条
  • 链接总数: 12 个
  • 标签总数: 483 个
  • 注册用户: 2 人
  • 访问总量: 8,826,242 次
  • 最近更新: 2021年1月25日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线