当前位置: 开发笔记 > 前端 > 正文

浅谈express中间件机制及实现原理

作者：蹲点爱琴海 | 来源：互联网 | 2022-01-05 00:46

简介中间件机制可以让我们在一个给定的流程中添加一个处理步骤，从而对这个流程的输入或者输出产生影响，或者产生一些中作用、状态，或者拦截

简介

中间件机制可以让我们在一个给定的流程中添加一个处理步骤，从而对这个流程的输入或者输出产生影响，或者产生一些中作用、状态，或者拦截这个流程。中间件机制和tomcat的过滤器类似，这两者都属于责任链模式的具体实现。

express 中间件使用案例

let express = require('express')
let app = express()
//解析request 的body
app.use(bodyParser.json())
//解析 COOKIE
app.use(COOKIEParser())
//拦截
app.get('/hello', function (req, res) {
 res.send('Hello World!');
});

模拟中间件机制并且模拟实现解析request的中间件

首先模拟一个request

request = { //模拟的request
  requestLine: 'POST /iven_ HTTP/1.1',
  headers: 'Host:www.baidu.com\r\nCOOKIE:BAIDUID=E063E9B2690116090FE24E01ACDDF4AD:FG=1;BD_HOME=0',
  requestBody: 'key1=value1&key2=value2&key3=value3',
}

一个http请求分为请求行、请求头、和请求体，这三者之间通过\r\n\r\n即一个空行来分割，这里假设已经将这三者分开，requestLine（请求行）中有方法类型，请求url，http版本号，这三者通过空格来区分，headers（请求头）中的各部分通过\r\n来分割，requestBody（请求体）中通过 & 来区分参数

模拟中间件机制

约定中间件一定是一个函数并且接受 request, response, next三个参数

function App() {
  if (!(this instanceof App))
    return new App();
  this.init();
}
App.prototype = {
  constructor: App,
  init: function() {
    this.request = { //模拟的request
      requestLine: 'POST /iven_ HTTP/1.1',
      headers: 'Host:www.baidu.com\r\nCOOKIE:BAIDUID=E063E9B2690116090FE24E01ACDDF4AD:FG=1;BD_HOME=0',
      requestBody: 'key1=value1&key2=value2&key3=value3',
    };
    this.respOnse= {}; //模拟的response
    this.chain = []; //存放中间件的一个数组
    this.index = 0; //当前执行的中间件在chain中的位置
  },
  use: function(handle) { //这里默认 handle 是函数，并且这里不做判断
    this.chain.push(handle);
  },
  next: function() { //当调用next时执行index所指向的中间件
    if (this.index >= this.chain.length)
      return;
    let middleware = this.chain[this.index];
    this.index++;
    middleware(this.request, this.response, this.next.bind(this));
  },
}

对 request 处理的中间件

 function lineParser(req, res, next) {
    let items = req.requestLine.split(' ');
    req.methOnd= items[0];
    req.url = items[1];
    req.version = items[2];
    next(); //执行下一个中间件
  }

function headersParser(req, res, next) {
  let items = req.headers.split('\r\n');
  let header = {}
  for(let i in items) {
    let item = items[i].split(':');
    let key = item[0];
    let value = item[1];
    header[key] = value;
  }
  req.header = header;
  next(); //执行下一个中间件
}

function bodyParser(req, res, next) {
  let bodyStr = req.requestBody;
  let body = {};
  let items = bodyStr.split('&');
  for(let i in items) {
    let item = items[i].split('=');
    let key = item[0];
    let value = item[1];
    body[key] = value;
  }
  req.body = body;
  next(); //执行下一个中间件
}

function middleware3(req, res, next) {
  console.log('url: '+req.url);
  console.log('methond: '+req.methond);
  console.log('version: '+req.version);
  console.log(req.body);
  console.log(req.header);
  next(); //执行下一个中间件
}

测试代码

let app = App();
app.use(lineParser);
app.use(headersParser);
app.use(bodyParser);
app.use(middleware3);
app.next();

整体代码

function App() {
  if (!(this instanceof App))
    return new App();
  this.init();
}
App.prototype = {
  constructor: App,
  init: function() {
    this.request = { //模拟的request
      requestLine: 'POST /iven_ HTTP/1.1',
      headers: 'Host:www.baidu.com\r\nCOOKIE:BAIDUID=E063E9B2690116090FE24E01ACDDF4AD:FG=1;BD_HOME=0',
      requestBody: 'key1=value1&key2=value2&key3=value3',
    };
    this.respOnse= {}; //模拟的response
    this.chain = []; //存放中间件的一个数组
    this.index = 0; //当前执行的中间件在chain中的位置
  },
  use: function(handle) { //这里默认 handle 是函数，并且这里不做判断
    this.chain.push(handle);
  },
  next: function() { //当调用next时执行index所指向的中间件
    if (this.index >= this.chain.length)
      return;
    let middleware = this.chain[this.index];
    this.index++;
    middleware(this.request, this.response, this.next.bind(this));
  },
}
function lineParser(req, res, next) {
    let items = req.requestLine.split(' ');
    req.methOnd= items[0];
    req.url = items[1];
    req.version = items[2];
    next(); //执行下一个中间件
  }

function headersParser(req, res, next) {
  let items = req.headers.split('\r\n');
  let header = {}
  for(let i in items) {
    let item = items[i].split(':');
    let key = item[0];
    let value = item[1];
    header[key] = value;
  }
  req.header = header;
  next(); //执行下一个中间件
}

function bodyParser(req, res, next) {
  let bodyStr = req.requestBody;
  let body = {};
  let items = bodyStr.split('&');
  for(let i in items) {
    let item = items[i].split('=');
    let key = item[0];
    let value = item[1];
    body[key] = value;
  }
  req.body = body;
  next(); //执行下一个中间件
}

function middleware3(req, res, next) {
  console.log('url: '+req.url);
  console.log('methond: '+req.methond);
  console.log('version: '+req.version);
  console.log(req.body);
  console.log(req.header);
  next(); //执行下一个中间件
}
let app = App();
app.use(lineParser);
app.use(headersParser);
app.use(bodyParser);
app.use(middleware3);
app.next();

运行结果

将以上整体代码运行后将打印以下信息

url: /iven_
methond: POST
version: HTTP/1.1
{key1: "value1", key2: "value2", key3: "value3"}
{Host: "www.baidu.com", COOKIE: "BAIDUID=E063E9B2690116090FE24E01ACDDF4AD"}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

tomcat
json

推荐阅读

json
提取类中的JSON属性名用于构建查询字符串

本文介绍了一种有效的方法，用于从类中提取JSON属性名称，并将其用于构建查询字符串。 ... [详细]

蜡笔小新 2024-11-24 09:41:09
iframe
使用UploadProgress实现文件上传进度条

本文介绍了如何通过安装和配置php_uploadprogress扩展来实现文件上传时的进度条显示功能。通过一个简单的示例，详细解释了从安装扩展到编写具体代码的全过程。 ... [详细]

蜡笔小新 2024-11-24 00:04:13
iframe
物联网学习之旅：微信小程序控制STM32（三）STM32代码编写

STM32代码编写STM32端不需要写关于连接MQTT服务器的代码，连接的工作交给ESP8266来做，STM32只需要通过串口接收和发送数据，间接的与服务器交互。串口三配置串口一已 ... [详细]

蜡笔小新 2024-11-23 21:37:55
view
将XML数据迁移至Oracle Autonomous Data Warehouse (ADW)

随着Oracle ADW的推出，数据迁移至ADW成为业界关注的焦点。特别是XML和JSON这类结构化数据的迁移需求日益增长。本文将通过一个实际案例，探讨如何高效地将XML数据迁移至ADW。 ... [详细]

蜡笔小新 2024-11-23 20:27:56
html
Windows环境下Oracle数据库迁移实践

本文详细记录了一次在Windows操作系统下将Oracle数据库的控制文件、数据文件及在线日志文件迁移至外部存储的过程，旨在为后续的集群环境部署做好准备。 ... [详细]

蜡笔小新 2024-11-23 19:57:51
html
APICloud execScript 方法参数传递问题及解决方案

本文探讨了在 APICloud 平台使用 execScript 方法时如何正确传递对象参数，并提供了详细的示例和解释。 ... [详细]

蜡笔小新 2024-11-23 19:50:21
html
MongoDB入门指南

本文档旨在为初学者提供MongoDB的基础知识介绍，包括其作为文档型数据库的特点、基本概念以及如何通过命令行界面（CLI）执行基本的操作。 ... [详细]

蜡笔小新 2024-11-23 19:43:20
上传
Python网络编程：深入探讨TCP粘包问题及解决方案

本文详细探讨了TCP协议下的粘包现象及其产生的原因，并提供了通过自定义报头解决粘包问题的具体实现方案。同时，对比了TCP与UDP协议在数据传输上的不同特性。 ... [详细]

蜡笔小新 2024-11-23 15:55:15
build
C/C++ 应用程序的安装与卸载解决方案

本文介绍了如何使用Inno Setup来创建C/C++应用程序的安装程序，包括自动检测并安装所需的运行库，确保应用能够顺利安装和卸载。 ... [详细]

蜡笔小新 2024-11-23 13:44:53
vue
全面覆盖的前端技术资源大全

本文提供了一个详尽的前端开发资源列表，涵盖了从基础入门到高级应用的各个方面，包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]

蜡笔小新 2024-11-23 12:05:53
html
如何高效渲染JSON数据

本文介绍了在控制器中返回JSON结果的方法，并详细说明了如何利用jQuery处理和展示这些数据，为Web开发提供了实用的技巧。 ... [详细]

蜡笔小新 2024-11-23 10:41:31
button
基于SSM框架的在线考试系统：随机组卷功能详解

本文深入探讨了基于SSM（Spring, Spring MVC, MyBatis）框架构建的在线考试系统中，随机组卷功能的设计与实现方法。 ... [详细]

蜡笔小新 2024-11-22 19:00:26
html
Python3爬虫入门：pyspider的基本使用[python爬虫入门]

Python学习网有大量免费的Python入门教程，欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]

蜡笔小新 2024-11-22 18:00:41
firefox
JavaScript 跨域解决方案详解

本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术，包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]

蜡笔小新 2024-11-22 16:27:56
view
Vue CLI 基础入门指南

本文详细介绍了 Vue CLI 的基础使用方法，包括环境搭建、项目创建、常见配置及路由管理等内容，适合初学者快速掌握 Vue 开发环境。 ... [详细]

蜡笔小新 2024-11-22 14:48:35

蹲点爱琴海

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章