搜尋
首頁web前端前端問答什麼是node中介軟體

什麼是node中介軟體

Dec 29, 2022 pm 03:42 PM
node中介軟體

node中間件主要是指封裝http請求細節處理的方法,其本質上就是在進入具體的業務處理之前,先讓特定過濾器處理;對於Web應用而言,引入Node中間件可以簡化和封裝一些基礎邏輯處理細節。

什麼是node中介軟體

本教學操作環境:Windows10系統、node v12.21.0版、Dell G3電腦。

什麼是node中間件?

深入淺出nodejs中間件原理

#前言

中間件是介於應用系統和系統軟體之間的一類軟體,它使用系統軟體所提供的基礎服務(功能),銜接網路上應用系統的各個部分或不同的應用,能夠達到資源共享、功能共享的目的。

NodeJS中,中間件主要是指封裝http請求細節處理的方法。我們都知道在http請求中往往會涉及很多動作, 如下: IP篩選 查詢字串傳遞 請求體解析 cookie資訊處理 權限校驗 日誌記錄 會話管理中間件(session) gzip壓縮中間件(如compress) * 錯誤處理

當然還有很多自訂的處理動作. 對於 Web應用程式而言,我們並不希望了解每一個細節性的處理工作,而是希望能夠把主要精力集中在業務的開發上,以達到提升開發效率的目的, 所以引入了Node中間件來簡化和封裝這些基礎邏輯處理細節.

node中間件本質上就是在進入具體的業務處理之前,先讓特定過濾器處理。如下圖所示:

什麼是node中介軟體

我們目前看到的主流nodejs框架, 例如connect, koa, express, egg, nest等, 都離不開中間件的設計概念, 所以為了能讓大家更深入的窺探nodejs世界, 我們就非常有比較研究中間件的實現原理.

正文

在了解node中間件的概念之後, 我們就來手動實現一下中間件, 最後我們會簡單分析一下koa中中間件的實作想法.文章大綱如下: node中間件核心原理實作 koa中間鍵實作方式* 利用koa中介軟體機制實作一個自己的koa中介軟體

node中介軟體核心原理實作

由上文介紹可知中間件是從http請求開始到回應結束過程中的處理邏輯,通常需要對請求和回應進行處理. 我們在實作node中介軟體模式時還需要考慮的一個問題就是多中間件共存的問題, 我們要思考如何將多個中間件的執行自動化, 不然在請求到響應的過程中只會執行最開​​始的中間件, 所以我們基本的中間件形式如下:

const middleware = (req, res, next) => {
  // 请求处理逻辑  next()}

接下來我們先寫個簡單的案例來看看中間件是如何實現的.

// 定义几个中间间函数const m1 = (req, res, next) => {
  console.log('m1 run')
  next()}const m2 = (req, res, next) => {
  console.log('m2 run')
  next()}const m3 = (req, res, next) => {
  console.log('m3 run')
  next()}// 中间件集合const middlewares = [m1, m2, m3]function useApp (req, res) {
  const next = () => {
    // 获取第一个中间件    const middleware = middlewares.shift()
    if (middleware) {
      middleware(req, res, next)
    }
  }
  next()}// 第一次请求流进入useApp()

由以上程式碼我們就不難發現next的作用了, 也就是實現自動呼叫中間件鏈的關鍵參數. 列印結果如下:

m1 runm2 runm3 run

以上即實現了基本中間件的執行模式, 但是我們還需要考慮異步的問題, 如果中間件還依賴第三發模組或者api的支持, 比如驗證, 識別等服務, 我們需要在該異步中間件的回調裡執行next, 才能保證正常的呼叫執行順序, 如下程式碼所示:

const m2 = (req, res, next) => {
  fetch('/xxxxx').then(res => {
    next()
  })}

還有一種中間件場景, 比如說日誌中間件, 請求監控中間件, 它們會在業務處理前和處理後都會執行相關邏輯, 這個時候就要求我們需要能對next函數進行二次處理, 我們可以將next的回傳值包裝成promise, 使得其在業務處理完成之後透過then回呼來繼續處理中間件邏輯. 如下所示:

function useApp (req, res) {
  const next = () => {
    const middleware = middlewares.shift()
    if (middleware) {
      // 将返回值包装为Promise对象      return Promise.resolve(middleware(req, res, next))
    }else {
      return Promise.resolve("end")
    }
  }
  next()}

此時我們就能使用如下方式呼叫了:

const m1 = (req, res, next) => {
  console.log('m1 start')
  return next().then(() => {
    console.log('m1 end')
  })}

以上我們就實現了一個基本可以的中間件設計模式, 當然我們也可以用async和await實現, 寫法會更優雅和簡單. 筆者這裡上一份簡單的例子:

const m1 = async (req, res, next) => {
    // something...    let result = await next();
  }

  const m2 = async (req, res, next) => {
    // something...    let result = await next();
  }
  const m3 = async (req, res, next) => {
    // something...    let result = await next();
    return result;
  }const middlewares = [m1, m2, m3];function useApp (req, res) {
    const next = () => {
      const middleware = middlewares.shift()
      if (middleware) {
        return Promise.resolve(middleware(req, res, next))
      }else {
        return Promise.resolve("end")
      }
    }
    next()
  }// 启动中间件useApp()

在koa2框架中, 中间件的实现方式也是将next()方法返回值封装为Promise对象,实现了其提出的洋葱圈模型,如下图所示:

什麼是node中介軟體

koa中间件实现方式

koa2框架的中间件实现原理很优雅,笔者觉得很必要研究一下, 这里展示一下其核心思路:

function compose (middleware) {
  // 提前判断中间件类型,防止后续错误  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    // 中间件必须为函数类型    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }
  return function (context, next) {
    // 采用闭包将索引缓存,来实现调用计数    let index = -1
    return dispatch(0)
    function dispatch (i) {
      // 防止next()方法重复调用      if (i 

利用koa中间件机制实现一个自己的koa中间件

学习了中间件的设计机制和原理, 我们是不是想马上写一个中间件呢? 笔者这里给大家举一个例子. 在H5-Dooring项目的服务端代码中, 我们需要对用户登录权限进行分发, 此时我们提供统一个中间件来处理, 如下代码所示:

// 模拟数据库操作const token = db.user();// router或者koa的中间件一定要用await处理next,否则将不能正常响应数据export default async (ctx, next) => {
  const t = ctx.request.header.authorization
  let uid = ctx.request.header['x-requested-with']
  let uidArr = uid.split(',')
  if(uidArr.length > 1) {
      uid = uidArr.pop().trim()
  }
    if(token[uid] && token[uid][1] === t) {
        await next()
    }else {
        ctx.status = 403;
        ctx.body = {
            state: 403,
            msg: '你没有权限操作'
        }
    }  }

以上代码即实现用户登录态处理, 如果用户在没有登录的情况下防问任何需要登录的接口, 都将返回权限不足或则在请求库中让其重定向到登录页面.

推荐学习:《node.js视频教程

以上是什麼是node中介軟體的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML和React的集成:實用指南HTML和React的集成:實用指南Apr 21, 2025 am 12:16 AM

HTML與React可以通過JSX無縫整合,構建高效的用戶界面。 1)使用JSX嵌入HTML元素,2)利用虛擬DOM優化渲染性能,3)通過組件化管理和渲染HTML結構。這種整合方式不僅直觀,還能提升應用性能。

React和HTML:渲染數據和處理事件React和HTML:渲染數據和處理事件Apr 20, 2025 am 12:21 AM

React通過state和props高效渲染數據,並通過合成事件系統處理用戶事件。 1)使用useState管理狀態,如計數器示例。 2)事件處理通過在JSX中添加函數實現,如按鈕點擊。 3)渲染列表需使用key屬性,如TodoList組件。 4)表單處理需使用useState和e.preventDefault(),如Form組件。

後端連接:反應如何與服務器互動後端連接:反應如何與服務器互動Apr 20, 2025 am 12:19 AM

React通過HTTP請求與服務器交互,實現數據的獲取、發送、更新和刪除。 1)用戶操作觸發事件,2)發起HTTP請求,3)處理服務器響應,4)更新組件狀態並重新渲染。

反應:專注於用戶界面(前端)反應:專注於用戶界面(前端)Apr 20, 2025 am 12:18 AM

React是一種用於構建用戶界面的JavaScript庫,通過組件化開發和虛擬DOM提高效率。 1.組件與JSX:使用JSX語法定義組件,增強代碼直觀性和質量。 2.虛擬DOM與渲染:通過虛擬DOM和diff算法優化渲染性能。 3.狀態管理與Hooks:Hooks如useState和useEffect簡化狀態管理和副作用處理。 4.使用示例:從基本表單到高級的全局狀態管理,使用ContextAPI。 5.常見錯誤與調試:避免狀態管理不當和組件更新問題,使用ReactDevTools調試。 6.性能優化與最佳

React的角色:前端還是後端?澄清區別React的角色:前端還是後端?澄清區別Apr 20, 2025 am 12:15 AM

reactisafrontendlibrary,focusedonBuildingUserInterfaces.itmanagesuistateandupdatesefficefited avelyuseVirusity diftualdom,and internactSwithBackendServIcesViaApisforDatahandling,butdoesnotprocessorcorsorsorstoredordordordoredairself。

在HTML中進行反應:構建交互式用戶界面在HTML中進行反應:構建交互式用戶界面Apr 20, 2025 am 12:05 AM

React可以嵌入到HTML中來增強或完全重寫傳統的HTML頁面。 1)使用React的基本步驟包括在HTML中添加一個根div,並通過ReactDOM.render()渲染React組件。 2)更高級的應用包括使用useState管理狀態和實現複雜的UI交互,如計數器和待辦事項列表。 3)優化和最佳實踐包括代碼分割、惰性加載和使用React.memo和useMemo來提高性能。通過這些方法,開發者可以利用React的強大功能來構建動態和響應迅速的用戶界面。

反應:現代前端發展基礎反應:現代前端發展基礎Apr 19, 2025 am 12:23 AM

React是構建現代前端應用的JavaScript庫。 1.它採用組件化和虛擬DOM優化性能。 2.組件使用JSX定義,狀態和屬性管理數據。 3.Hooks簡化生命週期管理。 4.使用ContextAPI管理全局狀態。 5.常見錯誤需調試狀態更新和生命週期。 6.優化技巧包括Memoization、代碼拆分和虛擬滾動。

React的未來:Web開發的趨勢和創新React的未來:Web開發的趨勢和創新Apr 19, 2025 am 12:22 AM

React的未來將專注於組件化開發的極致、性能優化和與其他技術棧的深度集成。 1)React將進一步簡化組件的創建和管理,推動組件化開發的極致。 2)性能優化將成為重點,特別是在大型應用中的表現。 3)React將與GraphQL和TypeScript等技術深度集成,提升開發體驗。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具