nodejs理解Express中router.use app.use 拦截器 next方法 结合实例新手向

时间:2024-03-16 10:54:47

在接触express项目的时候,大家会不会经常遇到这样一个问题。这个app.use,router.use有什么区别,这个next又是做什么的?

如果你对这几个概念不清楚。请好好看下面的例子

一.app.use和router.use

nodejs理解Express中router.use app.use 拦截器 next方法 结合实例新手向
如果你的代码只是上面这样写,是错误的写法。只有/app这个接口会生效,/router不会。你只需要记住这样一句话:路由器的行为就像中间件本身,因此您可以将其用作app.use()的参数或作为另一路由器的use()方法的参数

我们用都没有用这个路由器,那它怎么生效呢?何为路由?对应着我们平时生活中使用的路由器,一个路由器有多个接口,这里的Router的概念应该就取自于此
nodejs理解Express中router.use app.use 拦截器 next方法 结合实例新手向
你可能见过这样的代码,但如果这样实现起来会不会更加优雅呢?
nodejs理解Express中router.use app.use 拦截器 next方法 结合实例新手向nodejs理解Express中router.use app.use 拦截器 next方法 结合实例新手向
我们可以把app看作根router,一个app里面有多个接口。比如这个test接口,而/test就是父路径,在这个testRouter中定义的router.use()都是子路径。在这个testRouter中也可以使用router.use(’/test2’,test2Router),设置子路径的子路径

app.use()和router.use()都可以第一个参数为path,第二个参数可以填一个函数(代表访问到该接口需要干什么)或者一个router。注意:router一定要被use之后才会生效,不管是被app.use还是另一个router.use

二.拦截器的概念

在实际的开发中,我们经常会使用到拦截器。
比如说一个购物网站,有很多页面必须要登录之后才有权限访问。登录之后,浏览器存一个session_id放在cookies里面。当每次你需要访问其他接口时,都会将其作为参数传递过去。
而作为服务端,进来一个请求。都会去判断有没有session_id,以及是否有效。而这段代码肯定是一个公共部分,当每次进来请求时,就会先将其拦截。通过则让它访问真正的接口
nodejs理解Express中router.use app.use 拦截器 next方法 结合实例新手向
在express中,app.use(’*’,(req,res,next)=>{

//todo

}),就配置好了一个拦截器。*代表所有路径,但是需要注意一点:

一定要将拦截器放在中间件或静态资源的后面,路由定义的前面,以至于无法加载白名单中的public中的文件,js、css、image和中间件

三.next()

在express中,清楚next()的作用是尤为重要的。它决定了整个请求所经历的步骤。先看这样一段代码,当我们访问:localhost:3000/test/a 你认为控制台会打印出什么?
nodejs理解Express中router.use app.use 拦截器 next方法 结合实例新手向
结果是先打印 this is test,再接着打印出 aaaaaaaa

总结:
这里的/test不是指路径只有是/test时候会执行函数。而是含有/test的路径都会执行,然后通过next(),继续执行后面匹配的路径。 如果我们在/test中加next(),就根本就不会打印aaaaaaaa了。
js是单线程的。它会依次从上至下的去执行匹配路径的接口。当遇到一个没有next()的接口,就完成了这次请求,开始响应。
这就是为什么error handler时都需要放在app.js最下面定义。看这样一个例子:
nodejs理解Express中router.use app.use 拦截器 next方法 结合实例新手向
当我们访问localhost:3000/test/a的时候,它依旧会报404错误。但是也会将aaaaaa打印出来,我们知道404一般是找不到服务器资源才报的错。但是明明找到了,它依旧报错。这时你应该懂得了next()的用法

四.其他

1./ 只会匹配根路径
2./匹配所有。
3.app.use和app.get,router.use和router.get的区别:
.use的第二个参数可以传递一个对象或者是一个函数,可以匹配所有的请求方式。 而.get或者.post第二个参数都只能时一个函数。

这是最近我在使用express时的总结,如有不正,欢迎指正。如果你想自己也实践一下,可以安装一个express的脚手架

 

npm i express-generator -g // 全局安装 express-generator express 项目文件夹的名字 -e //快速从创建一个项目目录

转自http://percywang.top/#/article/39