Express中間件工作原理介紹

• 中間件是Express框架學(xué)習(xí)中最難的部分，同時(shí)也是最為核心的技術(shù)，我們的學(xué)習(xí)路線如下
  • 1.什么是中間件
  • 2.Express中間件的本質(zhì)及工作原理
  • 3.自定義解析post請(qǐng)求參數(shù)的中間件
  • 4.第三方中間件使用

1.1-什么是中間件

• 下圖是一個(gè)自來(lái)水凈化的過(guò)程，這張圖可以更好的理解什么是中間件
• 水庫(kù)的水并不是直接取出來(lái)就送到用戶的家中使用，而是經(jīng)過(guò)一些凈化過(guò)濾處理之后才送到用戶的家中，在這個(gè)過(guò)程中水還是水，本質(zhì)上還是同一個(gè)東西，但是卻多了一些東西
  • 水庫(kù)中原始的水可以理解為是瀏覽器的原始請(qǐng)求request
  • 最終用戶喝到的水可以理解為是express最終獲取的請(qǐng)求request
  • 而過(guò)濾中的一些加絮凝劑、過(guò)濾池等操作就是中間件，可以理解為給我們?cè)嫉恼?qǐng)求request添加了一些屬性或者方法（如post參數(shù)解析之后的對(duì)象等）

1.2-中間件的本質(zhì)及工作原理

• 1.中間件其實(shí)就是一個(gè)函數(shù)

  • function(req,res,next){ req:請(qǐng)求對(duì)象 res：響應(yīng)對(duì)象 next：下一個(gè)中間件 }

• 2.Express如何使用中間件?:三種方式

  ? app.use('pathname',中間件) : ? pathname不寫(xiě): 任何請(qǐng)求路徑都會(huì)執(zhí)行這個(gè)中間件 ? pathname寫(xiě)了：任何以pathname開(kāi)頭的請(qǐng)求路徑都會(huì)執(zhí)行這個(gè)中間件 ? app.get('pathname',中間件) : 請(qǐng)求路徑為pathname的get請(qǐng)求會(huì)執(zhí)行這個(gè)中間件 ? app.post('pathname',中間件) : 請(qǐng)求路徑為pathname的post請(qǐng)求會(huì)執(zhí)行這個(gè)中間件

• 3.中間件工作流程（Express處理網(wǎng)絡(luò)請(qǐng)求流程）

? a.從上往下依次匹配請(qǐng)求路徑，如果匹配成功則執(zhí)行該中間件 ? b.如果這個(gè)中間件中調(diào)用了：next() ，則會(huì)繼續(xù)往下匹配 ? c.如果所有的中間件都無(wú)法匹配，則會(huì)自動(dòng)進(jìn)入一個(gè)兜底的中間件響應(yīng)返回404 not found錯(cuò)誤

//導(dǎo)入模塊 const express = require('express'); //創(chuàng)建服務(wù)器 let app = express();/*1.什么是express中間件？： 其實(shí)就是一個(gè)函數(shù)（這個(gè)函數(shù)有三個(gè)參數(shù)）function(req,res,next){ req:請(qǐng)求對(duì)象 res：響應(yīng)對(duì)象 next：下一個(gè)中間件 } *//*2.express如何使用中間件?: 三種方式 app.use('pathname',中間件) :pathname不寫(xiě): 任何請(qǐng)求路徑都會(huì)執(zhí)行這個(gè)中間件pathname寫(xiě)了：任何以pathname開(kāi)頭的請(qǐng)求路徑都會(huì)執(zhí)行這個(gè)中間件app.get('pathname',中間件) : 請(qǐng)求路徑為pathname的get請(qǐng)求會(huì)執(zhí)行這個(gè)中間件app.post('pathname',中間件) : 請(qǐng)求路徑為pathname的post請(qǐng)求會(huì)執(zhí)行這個(gè)中間件 *//* 3.express處理網(wǎng)絡(luò)請(qǐng)求的流程a.從上往下依次匹配請(qǐng)求路徑，如果匹配成功則執(zhí)行該中間件b.如果這個(gè)中間件中調(diào)用了：next() ，則會(huì)繼續(xù)往下匹配c.如果所有的中間件都無(wú)法匹配，則會(huì)自動(dòng)進(jìn)入一個(gè)兜底的中間件響應(yīng)返回404 not found錯(cuò)誤 */app.use('/abc',(req,res,next)=>{//污水凈化第一步：添加絮凝劑console.log(11111);req.a = '添加了絮凝劑';next(); });app.use('/abc',(req,res,next)=>{//污水凈化第二步：添加活性炭console.log(22222);req.b = '添加活性炭';next(); });app.post('/abc',(req,res,next)=>{console.log(33333);next(); });app.get('/abc',(req,res,next)=>{console.log(44444);//看下污水凈化到這一步加了什么console.log(req.a);console.log(req.b);res.send('hello'); });//express底層有一個(gè)默認(rèn)的兜底中間件，如果上面所有的中間件都無(wú)法匹配或者沒(méi)有結(jié)束響應(yīng)，則會(huì)進(jìn)入這個(gè)中間件 //自定義一個(gè)兜底中間件，覆蓋默認(rèn)的 app.use((req,res)=>{console.log(55555);res.send('你的路徑是不是寫(xiě)錯(cuò)啦'); });//開(kāi)啟服務(wù)器 app.listen(3000, () => {console.log('success'); });

1.3-自定義解析post請(qǐng)求參數(shù)中間件

• 使用postman測(cè)試

• bodyParse

const querystring = require('querystring');/* 導(dǎo)出中間件(函數(shù))第一個(gè)參數(shù)：請(qǐng)求對(duì)象第二個(gè)參數(shù)：完成回調(diào)* postObject:post請(qǐng)求參數(shù)對(duì)象 */ module.exports = (req, res, next) => {/*如果本次請(qǐng)求是post請(qǐng)求，則解析post請(qǐng)求參數(shù)，并且將解析好的參數(shù)對(duì)象作為req的屬性傳遞給下一個(gè)中間件*/if (req.method == 'POST') {//1.1 給req注冊(cè)一個(gè)data事件let postData = "";req.on('data', function (chuck) {postData += chuck;});//1.2給req注冊(cè)一個(gè)end事件req.on('end', function () {//1.3 使用 querystring模塊解析post參數(shù)let postObjc = querystring.parse(postData);//將解析好的參數(shù)對(duì)象添加到req的屬性中req.body = postObjc;//執(zhí)行下一個(gè)中間件next();});}}

• index.js

//導(dǎo)入模塊 const express = require('express'); //創(chuàng)建服務(wù)器 let app = express();//使用中間件 //任何請(qǐng)求都會(huì)進(jìn)入我們自己寫(xiě)的中間件，并且只要是post請(qǐng)求就會(huì)幫你解析好參數(shù)放入req.body中 app.use(require('./bodyParse.js'));app.post('/abc',(req,res,next)=>{console.log(req.body);//告訴客戶端我收到的參數(shù)res.send(req.body); });app.post('/efg',(req,res,next)=>{console.log(req.body);//告訴客戶端我收到的參數(shù)res.send(req.body); });//開(kāi)啟服務(wù)器 app.listen(3000, () => {console.log('success'); });

總結(jié)

以上是生活随笔為你收集整理的Express中间件工作原理介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。