検索
ホームページウェブフロントエンドjsチュートリアルJavaScript のノードミドルウェアの原理を簡単に理解する

Todayjavascript コラムでは、ノードミドルウェアの原理を紹介します。

JavaScript のノードミドルウェアの原理を簡単に理解する

関連する無料学習の推奨事項: javascript(ビデオ)

まえがき

ミドルウェアとは、アプリケーションシステムとシステムソフトウェアの間にあるソフトウェアの一種で、システムソフトウェアが提供する基本的なサービス(機能)を利用してネットワークに接続するものです。アプリケーションシステムまたは異なるアプリケーションは、リソース共有と機能共有の目的を達成できます。

NodeJS における Middleware は、主に http リクエストの詳細処理をカプセル化する方法を指します。 http リクエストには、次のような多くのアクションが含まれることがよくあります。

    IP フィルタリング
  • クエリ文字列の配信
  • リクエストの本文解析
  • Cookie情報処理
  • 権限検証
  • ロギング
  • セッション管理ミドルウェア(セッション)
  • gzip圧縮ミドルウェア(compressなど) )
  • エラー処理
もちろん、多くのカスタム処理アクションがあります。

Web アプリケーションの場合、詳細な処理の代わりに、すべてを知りたくないのです。開発効率を向上させるためにビジネス開発に集中したいと考えているため、これらの基本的なロジック処理の詳細を簡素化してカプセル化するために ノード ミドルウェアを導入します。 #本質的には、特定のビジネス処理に入る前に 特定のフィルター

を処理できるようになります。以下の図に示すように:

現在主流の nodejs フレームワーク (connectkoa

expresseggnest などはミドルウェアの設計思想と切り離せないものなので、nodejs の世界を誰もがより深く覗けるよう、実装を比較検討しました。 ##本文ノードミドルウェアの概念を理解した後、手動でミドルウェアを実装し、最後にkoaにおけるミドルウェアの実装アイデアを簡単に分析します。

ノード ミドルウェアのコア原則の実装

koa ミドル キーの実装方法

koa ミドルウェア メカニズムを使用して独自の koa ミドルウェアを実装する
  • node ミドルウェアのコア原則の実装
  • 上記の紹介から、ミドルウェアは http リクエストの始まりからレスポンスの終わりまでの処理ロジックであることがわかります。リクエストとレスポンス。ノードミドルウェアモードを実装しています。考慮する必要があるもう1つの問題は、複数のミドルウェアの共存です。複数のミドルウェアの実行を自動化する方法を考える必要があります。そうしないと、最初のミドルウェアのみが実行されます。リクエストからレスポンスまでのプロセスなので、基本的なミドルウェアのファイル形式は次のとおりです。
  • 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 run
m2 run
m3 run复制代码
上記の内容は次のとおりです。基本的なミドルウェアの実行モードを実現しましたが、非同期性の問題も考慮する必要があります。ミドルウェアが検証、識別、その他のサービスなどのサードパーティ モジュールまたは API のサポートにも依存している場合は、次を実行する必要があります。次のコードに示すように、非同期ミドルウェアのコールバック内で通常の呼び出し実行シーケンスを保証します:

const m2 = (req, res, next) => {
  fetch('/xxxxx').then(res => {
	next()
  })
}复制代码
ログ ミドルウェアやリクエスト モニタリング ミドルウェアなどのミドルウェア シナリオもあり、関連するロジックが実行されます。このとき、関数が二次処理を行う際に、next の戻り値を

promise にラップすることで、next

ができるようにする必要があります。ビジネス処理が完了した後も、

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 オブジェクトにカプセル化することでミドルウェアも実装され、以下に示すように、提案されたオニオン リング モデルを実現します。 #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 <h3 id="利用koa中间件机制实现一个自己的koa中间件">利用koa中间件机制实现一个自己的koa中间件</h3><p>学习了中间件的设计机制和原理, 我们是不是想马上写一个中间件呢? 笔者这里给大家举一个例子. 在H5-Dooring项目的服务端代码中, 我们需要对用户登录权限进行分发, 此时我们提供统一个中间件来处理, 如下代码所示:</p><pre class="brush:php;toolbar:false">// 模拟数据库操作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: '你没有权限操作'
        }
    }  
}复制代码

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

所以, 今天你又博学了吗?

以上がJavaScript のノードミドルウェアの原理を簡単に理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はjuejinで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解:それが何をするのか、なぜそれが重要なのかjavascriptの分解:それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境