後端框架與API 開發(五) - Middleware-設定與管理

更新於 發佈於 閱讀時間約 4 分鐘

※ 什麼是Middleware (中介層)?

Middleware 一般翻譯作「中間件」或是「中介軟體」,其實 Express 應用程式就是由一連串的 middleware 串連而成:

  • 從 request 進來到 response 回去會經過一系列的流程。
  • 這個流程會按照路由清單由上而下執行。
  • 可以用 app.use 來對所有的 request 進行前置處理;也可以用 app.get 或 app.post 等方法來篩選用特定 HTTP method 發送的請求。
  • 只要是會發生在這個 request-response 流程裡的程序,都叫做 middleware。
raw-image

※ Middleware (中介層)舉例說明:

你可以把 middleware 的運作想像成一個加工生產線:

raw-image

生產線上的員工協力把輸送進來的「原料」(request) 一步步處理加工,完成最後的「製成品」(response)。當一個 middleware 把事情做完之後,它就會呼叫 next() 把請求交給下一個 middleware 來處理。

raw-image

所以每一個 middleware function 都會帶三個參數:reqres、與 next,例如:

app.use((req, res, next) => {
// do something
return next()
})

※ Express Middleware 分類:

  • 應用程式層級:

綁定到 app 物件的 middleware,被稱為應用程式層級的 middleware。它會在所有路由和路由器層級的 middleware 中運行。

這種 middleware 可以被設定去處理每一個應用程式接收到的請求內容。例如,我們可以使用 app.use() 函數來指定一個或多個特定的 middleware 函數,這些函數將在每次請求時被調用。

同樣地,我們也可以使用 app.get() 或 app.post() 來指定只在特定 HTTP 方法的請求時被調用的 middleware。簡單來說,應用程式層級的 middleware 就像是一個全局過濾器,它會在每次請求時先運行,然後根據需要進行處理或轉發請求。這讓我們可以在請求到達路由之前進行一些預處理,例如驗證、日誌記錄或其他任何我們需要的操作。

  • 路由器層級:

使用 路由器層級的 middleware 時,我們會將它綁定到 express.Router() 的實例。它的工作方式與應用程式層級的 middleware 相同,但它只在該路由器的路由中運行。路由器層級的 middleware 就像是一個局部過濾器,它只對綁定到同一個 Router() 實例的路由有效。這意味著,如果你有一組相關的路由,你可以使用一個 Router() 實例來管理它們,並且可以使用路由器層級的 middleware 來對這些路由進行一些共同的預處理,例如驗證或日誌記錄。

  • 錯誤處理:

錯誤處理 middleware主要工作是處理在其他 middleware 或路由處理函數中產生的錯誤。它的特點是有四個參數:errreqres 和 next,而不是通常的三個參數。當一個 middleware 函數呼叫了 next(err) 時,Express 會跳過剩下的所有非錯誤處理 middleware,並尋找下一個有四個參數的 middleware 函數,也就是錯誤處理 middleware。

然後,Express 會將錯誤物件 err 傳遞給這個錯誤處理 middleware,讓它來處理這個錯誤。這種機制讓我們可以集中處理錯誤,並提供友好的錯誤訊息或進行錯誤修復。

  • 內建層級:

有一些內建的 middleware 函數,這些函數可以幫助我們處理一些常見的任務。其中一個最常用的內建 middleware 是 express.static。透過 express.static(‘public’) 可以讀取,由我們自行建立的靜態檔案,包含 JavaScript 、 CSS 檔案。

  • 第三方層級:

由第三方所撰寫的套件。我們可以透過 npm 下載並在我們的應用程式中使用這些套件。這些第三方 middleware 的最大好處是,它們可以幫助我們避免重複造輪子,讓我們可以直接引用他人的模組工具來解決我們的專案問題。例如,body-parser 是一個常用的第三方 middleware,它可以幫助我們解析 HTTP 請求的 body。另外,passport 是一個用於身份驗證的 middleware,而 morgan 是一個用於日誌記錄的 middleware。

留言
avatar-img
留言分享你的想法!
avatar-img
奧莉薇走在成為後端工程師之路上
23會員
167內容數
全端網頁開發專業知識分享
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
看更多
你可能也想看
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 什麼是Middleware (中介層)? Middleware 一般翻譯作「中間件」或是「中介軟體」,其實 Express 應用程式就是由一連串的 middleware 串連而成: 從 request 進來到 response 回去會經過一系列的流程。 這個流程會按照路由清單由上而下執行。
Thumbnail
※ 什麼是Middleware (中介層)? Middleware 一般翻譯作「中間件」或是「中介軟體」,其實 Express 應用程式就是由一連串的 middleware 串連而成: 從 request 進來到 response 回去會經過一系列的流程。 這個流程會按照路由清單由上而下執行。
Thumbnail
※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
Thumbnail
※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
當我剛開始接觸這個領域的時候,經常會看到有人在討論: 到底要做前端還是後端工程師呢?後端工程師賺的比前端工程師多?前端工程師轉後端工程師?那前端與後端到底是什麼呢? 這篇文章提供了前端與後端的基本概念並舉例來說明。同時也介紹了前端的三大要素以及後端的運作原理,對於想深入瞭解前後端的讀者會非常有幫助。
Thumbnail
當我剛開始接觸這個領域的時候,經常會看到有人在討論: 到底要做前端還是後端工程師呢?後端工程師賺的比前端工程師多?前端工程師轉後端工程師?那前端與後端到底是什麼呢? 這篇文章提供了前端與後端的基本概念並舉例來說明。同時也介紹了前端的三大要素以及後端的運作原理,對於想深入瞭解前後端的讀者會非常有幫助。
Thumbnail
HTTP伺服器端 package main import ( "net/http" ) type Refer struct { handler http.Handler refer string } //實現中介軟體邏輯​ func (this *Refer) ServeHTTP(
Thumbnail
HTTP伺服器端 package main import ( "net/http" ) type Refer struct { handler http.Handler refer string } //實現中介軟體邏輯​ func (this *Refer) ServeHTTP(
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News