Express.js Middleware Tutorial
来源:互联网 发布:php网络验证源码 编辑:程序博客网 时间:2024/04/30 08:25
http://qnimate.com/express-js-middleware-tutorial/
Developers who are new to Express often get confused with the difference between route handler and middleware. Therefore they also get confused with the difference betweenapp.use()
, app.all()
, app.get()
, app.post()
, app.delete()
and app.put()
methods.
In this tutorial I will explain the exact difference between a middleware and route handler. And also how to use the app.use()
, app.all()
, app.get()
, app.post()
,app.delete()
and app.put()
methods correctly.
Route Handler
app.all()
, app.get()
, app.post()
, app.delete()
and app.put()
methods are all used to define routes. A route is used to handle a HTTP request. A route is a combination of a path and callback, which is executed when a request’s path is matches. The callback is called as the route handler.
The difference between app.all()
, app.get()
, app.post()
, app.delete()
andapp.put()
methods is that they handle different types of HTTP requests. For example:app.get()
handlers only GET requests whereas app.all()
can handle GET, POST and so on.
Here is an example of how to define a route:
app.get("/", function(httpRequest, httpResponse, next){
httpResponse.send("Hello World!!!!");
});
app.listen(8080);
Every route handler get a reference to the request and response object of the HTTP request that is currently being served.
There can be multiple route handlers executed for a single HTTP request. Here is an example:
app.get("/", function(httpRequest, httpResponse, next){
httpResponse.write("Hello");
next();
});
app.get("/", function(httpRequest, httpResponse, next){
httpResponse.write(" World !!!");
httpResponse.end();
});
app.listen(8080);
Here the first handle writes some response and then calls next(). The next() method is used to call the next route handler match the route path.
A route handler must end the request or call the next route handler.
We can also pass multiple route handlers to a single call to app.all()
, app.get()
,app.post()
, app.delete()
and app.put()
methods. Here is an example to demonstrate this:
app.get("/", function(httpRequest, httpResponse, next){
httpResponse.write("Hello");
next();
}, function(httpRequest, httpResponse, next){
httpResponse.write(" World !!!");
httpResponse.end();
});
app.listen(8080);
Middleware
A Middleware is a callback that sits on top of the actual request handlers. It takes the same parameters as a route handler.
To understand middleware let’s take an example site which has a dashboard and profile page. To visit these pages the user must login. Requests to these pages are also logged. Here is how the route handler for these pages would look like:
function checkLogin()
{
return false;
}
function logRequest()
{
console.log("New request");
}
app.get("/dashboard", function(httpRequest, httpResponse, next){
logRequest();
if(checkLogin())
{
httpResponse.send("This is the dashboard page");
}
else
{
httpResponse.send("You are not logged in!!!");
}
});
app.get("/profile", function(httpRequest, httpResponse, next){
logRequest();
if(checkLogin())
{
httpResponse.send("This is the dashboard page");
}
else
{
httpResponse.send("You are not logged in!!!");
}
});
app.listen(8080);
Here the problem is that there is a lot of repeating code i.e., we had to logRequest()
andcheckLogin()
function calls multiple time. This also makes it difficult to update code. So to deal with this problem we can write a common route for these two paths. Here is the rewritten code:
function checkLogin()
{
return false;
}
function logRequest()
{
console.log("New request");
}
app.get("/*", function(httpRequest, httpResponse, next){
logRequest();
next();
})
app.get("/*", function(httpRequest, httpResponse, next){
if(checkLogin())
{
next();
}
else
{
httpResponse.send("You are not logged in!!!");
}
})
app.get("/dashboard", function(httpRequest, httpResponse, next){
httpResponse.send("This is the dashboard page");
});
app.get("/profile", function(httpRequest, httpResponse, next){
httpResponse.send("This is the dashboard page");
});
app.listen(8080);
Here is the code looks a lot cleaner and is easier to maintain and update. Here the first two defined route handler are called as middleware because they are not handling the request rather responsible for pre-processing of the request.
Express provides us app.use()
method which is specifically used to define middlewares.app.use()
method may seem similar to app.all()
but there are a lot of differences between them which makes app.use()
perfect for declaring middlewares. Let’s see howapp.use()
method works:
app.use()
Here are the difference between app.use()
and app.all()
:
CALLBACK
app.use()
takes only one callback whereas app.all()
can take multiple callbacks.
PATH
app.use()
only see whether url starts with specified path where app.all()
will match complete path.
Here is an example to demonstrate this:
// will match /product
// will match /product/cool
// will match /product/foo
app.all( "/product" , handler);
// will match /product
// won't match /product/cool <-- important
// won't match /product/foo <-- important
app.all( "/product/*" , handler);
// won't match /product <-- Important
// will match /product/cool
// will match /product/foo
NEXT()
next()
call inside a middleware invokes the next middleware or route handler depending on whichever is declared next. But next()
call inside a route handler invokes the next route handler only. If there is a middleware next then it’s skipped. Therefore middlewares must be declared above all route handlers.
Here is an example to demonstrate this:
var app = express();
app.use(function frontControllerMiddlewareExecuted(req, res, next){
console.log('(1) this frontControllerMiddlewareExecuted is executed');
next();
});
app.all('*', function(req, res, next){
console.log('(2) route middleware for all method and path pattern "*", executed first and can do stuff before going next');
next();
});
app.all('/hello', function(req, res, next){
console.log('(3) route middleware for all method and path pattern "/hello", executed second and can do stuff before going next');
next();
});
app.use(function frontControllerMiddlewareNotExecuted(req, res, next){
console.log('(4) this frontControllerMiddlewareNotExecuted is not executed');
next();
});
app.get('/hello', function(req, res){
console.log('(5) route middleware for method GET and path patter "/hello", executed last and I do my stuff sending response');
res.send('Hello World');
});
app.listen(80);
Now we saw the the uniqueness of the app.use()
method and why it is used to declare middlewares. Let’s rewrite our example site code:
function checkLogin()
{
return false;
}
function logRequest()
{
console.log("New request");
}
app.use(function(httpRequest, httpResponse, next){
logRequest();
next();
})
app.use(function(httpRequest, httpResponse, next){
if(checkLogin())
{
next();
}
else
{
httpResponse.send("You are not logged in!!!");
}
})
app.get("/dashboard", function(httpRequest, httpResponse, next){
httpResponse.send("This is the dashboard page");
});
app.get("/profile", function(httpRequest, httpResponse, next){
httpResponse.send("This is the dashboard page");
});
app.listen(8080);
- Express.js Middleware Tutorial
- Express.js Tutorial
- express middleware
- Express的Middleware
- Express中善用middleware
- express之middleware
- [JavaScript/JQuery] express 的 middleware 设计
- node+express+http-proxy-middleware代理转发
- Node.js Express Tutorial(简单入门) 前提已经安装Node.js
- setting-up-webpack-dev-middleware-in-your-express-application
- Most middleware (like bodyParser) is no longer bundled with Express
- Express (Routing、Middleware、托管静态文件、view engine 等等)
- Express.js
- node Error: Most middleware (like session) is no longer bundled with Express and must be installed
- Express 学习笔记纯干货(Routing、Middleware、托管静态文件、view engine 等等)
- Node.js Async Tutorial
- express.js初体验
- Node.js express路由
- 大型分布式C++框架《一:框架简介》
- Java 对象和类
- 用递归实现字符数组的反转
- 游戏与算法的必经之路
- 设计模式学习之七大原则
- Express.js Middleware Tutorial
- ECMALL创建模板
- 隐藏excel分组框中的边框
- 认识光源
- java maven项目常用 build配置及启动脚本
- 我的GIT使用笔记
- Unique Paths
- Centos6.5安装zabbix2.4
- 强大的SpannableStringBuilder