JavaScript中间件模式详解与实现

**JavaScript中间件模式实现详解：打造类Express的灵活架构** 想深入了解JavaScript中间件模式？本文将带你一步步实现一个类似Express的中间件系统。通过`use`方法将函数添加到队列，利用`run`方法启动流程，并使用`next`函数巧妙地控制执行流转，实现请求的层层处理。文章着重讲解了维护中间件数组，并通过递归调用`next`函数执行下一个中间件的核心机制，同时兼顾同步与异步操作。此外，还探讨了如何扩展错误处理机制，并提供了支持异步中间件的进阶思路，助你构建更健壮的JavaScript应用架构。掌握中间件模式，提升代码的可维护性和扩展性，让你的项目更上一层楼！

答案：实现一个类Express中间件系统，通过use添加函数到队列，run启动流程，next控制执行流转。核心是维护中间件数组并递归调用next执行下一个，支持同步与异步操作，可扩展错误处理。

实现一个类似 Express 的 JavaScript 中间件模式，核心是将多个函数串联起来，通过 next() 控制流程的流转。中间件可以处理请求、修改数据或终止响应。下面是一个简易但完整的实现方式。

基本结构：创建一个支持 use 和 listen 的类

我们定义一个类，用来管理中间件队列，并提供 use() 添加中间件，以及启动流程的方法（比如 listen() 或 run()）。

class Middleware {
  constructor() {
    this.stack = []; // 存储中间件函数
  }

  use(fn) {
    if (typeof fn === 'function') {
      this.stack.push(fn);
    }
  }

  run(req, res, finalCallback) {
    const next = (index) => {
      if (index >= this.stack.length) {
        return finalCallback ? finalCallback() : null;
      }

      const middleware = this.stack[index];
      // 执行当前中间件，传入 req, res, 和下一个 next
      middleware(req, res, () => next(index + 1));
    };

    next(0); // 从第一个中间件开始执行
  }
}

使用示例：模拟请求处理流程

我们可以像 Express 一样添加多个中间件，每个中间件可以选择调用 next() 继续，或者不调用以终止流程。

const app = new Middleware();

// 日志中间件
app.use((req, res, next) => {
  console.log(`Request URL: ${req.url}`);
  next();
});

// 身份验证中间件
app.use((req, res, next) => {
  if (req.headers.authorization) {
    req.user = { id: 1, name: 'Alice' };
  }
  next();
});

// 数据处理中间件
app.use((req, res, next) => {
  req.body = { message: 'Hello from middleware' };
  next();
});

// 最终响应
app.run(
  { url: '/home', headers: { authorization: 'Bearer xxx' } },
  {},
  () => {
    console.log('Finished processing request.');
  }
);

关键机制说明

• 函数队列：所有中间件按顺序存入数组，依次执行。
• next 函数递归调用：每个中间件接收一个 next 函数作为第三个参数，调用它才会进入下一个中间件。
• 异步兼容性：如果某个中间件是异步的，可以在其内部使用 Promise 或 async/await，并在完成后调用 next()。
• 错误处理扩展：可进一步扩展为支持错误中间件（如 use(err, req, res, next)），但基础版本先忽略。

进阶思路：支持异步中间件

若中间件中包含异步操作，需确保正确等待。可以使用 Promise 改造 next 流程：

run(req, res, finalCallback) {
  const stack = this.stack;
  let index = 0;

  const next = () => {
    if (index >= stack.length) {
      return Promise.resolve(finalCallback ? finalCallback() : null);
    }

    const handler = stack[index++];
    try {
      const result = handler(req, res, next);
      // 如果中间件返回 Promise，则等待完成
      return Promise.resolve(result);
    } catch (err) {
      console.error('Middleware error:', err);
    }
  };

  return next();
}

这样就能支持如下写法：

app.use(async (req, res, next) => {
  const data = await fetch('/api/data');
  req.data = await data.json();
  next();
});

基本上就这些。一个轻量的中间件系统只需要维护函数队列和控制流转的 next 机制。Express 的底层原理也类似，只是更复杂，加入了路由匹配、错误处理等模块。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。