基于Koa2搭建Node.js实战(含视频)☞ 中间件用法

中间件用法——讲解 Koa2 中间件的用法及如何开发中间件

文章

middleware 中间件

正是因为中间件的扩展性才使得 Koa 的代码简单灵活。

app.js 中,有这样一段代码:

app.use(async (ctx, next)=>{
  await next()
  ctx.response.type = 'text/html'
  ctx.response.body = '<h1>Hello World</h1>'  
})

它的作用是:每收到一个 http 请求,Koa 都会调用通过 app.use() 注册的 async 函数,同时为该函数传入 ctxnext 两个参数。而这个 async 函数就是我们所说的中间件。

下面我们简单介绍一下传入中间件的两个参数。

ctx

ctx 作为上下文使用,包含了基本的 ctx.requestctx.response。另外,还对 Koa 内部对一些常用的属性或者方法做了代理操作,使得我们可以直接通过 ctx 获取。比如,ctx.request.url 可以写成 ctx.url

除此之外,Koa 还约定了一个中间件的存储空间 ctx.state。通过 state 可以存储一些数据,比如用户数据,版本信息等。如果你使用 webpack 打包的话,可以使用中间件,将加载资源的方法作为 ctx.state 的属性传入到 view 层,方便获取资源路径。

next

next 参数的作用是将处理的控制权转交给下一个中间件,而 next() 后面的代码,将会在下一个中间件及后面的中间件(如果有的话)执行结束后再执行。

注意: 中间件的顺序很重要!

我们重写 app.js 来解释下中间件的流转过程:

// 按照官方示例
const Koa = require('koa')
const app = new Koa()

// 记录执行的时间
app.use(async (ctx, next) => {
  let stime = new Date().getTime()
  await next()
  let etime = new Date().getTime()
  ctx.response.type = 'text/html'
  ctx.response.body = '<h1>Hello World</h1>'
  console.log(`请求地址: ${ctx.path},响应时间:${etime - stime}ms`)
});

app.use(async (ctx, next) => {
  console.log('中间件1 doSoming')
  await next();
  console.log('中间件1 end')
})

app.use(async (ctx, next) => {
  console.log('中间件2 doSoming')
  await next();
  console.log('中间件2 end')
})

app.use(async (ctx, next) => {
  console.log('中间件3 doSoming')
  await next();
  console.log('中间件3 end')
})

app.listen(3000, () => {
  console.log('server is running at http://localhost:3000')
})

运行起来后,控制台显示:

server is running at http://localhost:3000

然后打开浏览器,访问 http://localhost:3000,控制台显示内容更新为:

server is running at http://localhost:3000
中间件1 doSoming
中间件2 doSoming
中间件3 doSoming
中间件3 end
中间件2 end
中间件1 end
请求地址: /,响应时间:2ms

从结果上可以看到,流程是一层层的打开,然后一层层的闭合,像是剥洋葱一样 —— 洋葱模型。

此外,如果一个中间件没有调用 await next(),会怎样呢?答案是『后面的中间件将不会执行』。

修改 app.js 如下,我们去掉了第三个中间件里面的 await

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

// 记录执行的时间
app.use(async (ctx, next)=>{
  let stime = new Date().getTime()
  await next()
  let etime = new Date().getTime()
  ctx.response.type = 'text/html'
  ctx.response.body = '<h1>Hello World</h1>'
  console.log(`请求地址: ${ctx.path},响应时间:${etime - stime}ms`)
});

app.use(async (ctx, next) => {
  console.log('中间件1 doSoming')
  await next();
  console.log('中间件1 end')
})

app.use(async (ctx, next) => {
  console.log('中间件2 doSoming')
  // 注意,这里我们删掉了 next
  // await next()
  console.log('中间件2 end')
})

app.use(async (ctx, next) => {
  console.log('中间件3 doSoming')
  await next();
  console.log('中间件3 end')
})

app.listen(3000, () => {
  console.log('server is running at http://localhost:3000')
})

重新运行代码后,控制台显示如下:

server is running at http://localhost:3000
中间件1 doSoming
中间件2 doSoming
中间件2 end
中间件1 end
请求地址: /,响应时间:1ms

与我们的预期结果『后面的中间件将不会执行』是一致的。

下一篇:我们将学习下如何响应浏览器的各种请求。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博文

HTTP协议详解

引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。它于1990年提出,经过几年的使用与发展,得到不断地完善...

4439
来自专栏后端技术探索

两种Nginx日志切分方案,狼厂主要在用第1种

所谓的定时任务切分,是指通过定时任务(比如crontab),发送信号给nginx,让其重新打开文件。该方法也是nginx官网上面比较推荐的,原文说明比较清楚,这...

662
来自专栏玩转JavaEE

elasticsearch文档索引API(一)

上篇文章向读者介绍了Elasticsearch中文档的基本读写操作流程,以及分片、副本等的工作流程,本文我们来看看Elasticsearch文档索引API。

644
来自专栏微服务生态

性能分析系列-小命令保证大性能

最近在工作中经常和性能压测工作打交道,积累了一些性能分析经验,我觉得这些经验对每一个开发者都有帮助的,能开发出性能高的代码也是我们的最终目标。

775
来自专栏程序员互动联盟

【专业技术】Windows里面如何玩转线程?

我们在编写程序的时候,常常会需要一些线程的delay函数。这个问题说简单也简单,说复杂也复杂。比如很多人读知道delay直接用Windows的API函数Slee...

3304
来自专栏逸鹏说道

小解Redis 系列

官网:http://redis.io/ 推荐一个开源组件:StackExchange.Redis https://github.com/StackExchang...

2819
来自专栏禅林阆苑

memcache学习笔记

下载稳定版的memcache包,http://pecl.php.net/package/memcache

1162
来自专栏程序员互动联盟

【专业技术】Windows编程技巧小结

我们在编写程序的时候,常常会需要一些线程的delay函数。这个问题说简单也简单,说复杂也复杂。比如很多人读知道delay直接用Windows的API函数Slee...

3435
来自专栏蓝天

获取cpu频率的代码

taskset是linux自带的一个命令,可用来将进程绑定到指定CPU 相关的函数有: sched_setaffinity, CPU_CLR, CPU_ISS...

712
来自专栏Flutter&Dart

DartVM服务器开发(第八天)--http服务端框架

Aqueduct是一个HTTP Web服务器框架,用于构建用Dart编写的REST应用程序。

1384

扫码关注云+社区