前端领域Middleware有几种实现方式

前言

Middleware（中间件）本意是指位于服务器的操作系统之上，管理计算资源和网络通信的一种通用独立的系统软件服务程序。分布式应用软件借助这种软件在不同的技术之间共享资源。而在大前端领域，Middleware 的含义则简单得多，一般指提供通用独立功能的数据处理函数。典型的 Middleware 包括日志记录、数据叠加和错误处理等。本文将横向对比大前端领域内各大框架的 Middleware 使用场景和实现原理，包括Express, Koa, Redux和Axios。

大前端领域的Middleware

这里说的大前端领域自然就包括了服务器端和客户端了。最早提出 Middleware 概念的是Express， 随后由原班人马打造的Koa不但沿用了 Middleware 的架构设计，还更加彻底的把自己定义为中间件框架。

Expressive HTTP middleware framework for node.js

在客户端领域，Redux也引入了 Middleware 的概念，方便独立功能的函数对 Action 进行处理。Axios虽然没有中间件，但其拦截器的用法却跟中间件十分相似，也顺便拉进来一起比较。下面的表格横向比较了几个框架的中间件或类中间件的使用方式。

下面我们一起来拆解这些框架的内部实现方式。

Express

用法

Express的 Middleware 有多种层级的注册方式，在此以应用层级的中间件为例子。这里看到 2 个关键字，use和next。Express通过use注册，next触发下一中间件执行的方式，奠定了中间件架构的标准用法。

原理

原理部分会对源码做极端的精简，只保留核心。

Middleware 注册（use）

Middleware 调度（next）

当请求到达的时候，会触发handle方法。接着next函数从队列中顺序取出 Middleware 并执行。

Koa

用法

跟Express相比，Koa的 Middleware 注册跟路由无关，所有的请求都会经过注册的中间件。同时Koa与生俱来支持async/await异步编程模式，代码风格更加简洁。至于洋葱模型什么的大家都清楚，就不废话了。

原理

Middleware 注册（use）

Middleware 编排（koa-compose）

跟Express类似，Koa的 Middleware 也是顺序执行的，通过dispatch函数来控制。代码的编写模式也很像：调用dispatch/next -> 定义dispatch/next -> dispatch/next作为回调递归调用。这里有个地方要注意下，对于 Middleware 来说，它们的await next()实际上就是await dispatch(i)。当执行到最后一个 Middleware 的时候，会触发条件if (i === middleware·length) fn = next，这里的next是undefined，会触发条if (!fn) return Promise.resolve()，继续执行最后一个 Middleware await next()后面的代码，也是洋葱模型由内往外执行的时间点。

Redux

Redux是我所知的第一个将 Middleware 概念应用到客户端的前端框架，它的源码处处体现出函数式编程的思想，让人眼前一亮。

用法

Redux中间件的参数，store是applyMiddleware内部传进来的，next是compose后传进来的，action是dispatch传进来的。这里的设计确实十分巧妙，下面我们结合源码来进行分析。

原理

Middleware 编排（applyMiddleware）

这里compose的返回值又重新赋值给dispatch，说明我们在应用内调用的dispatch并不是store自带的，而是经过 Middleware 处理的升级版。

Middleware 编排（compose）

compose的核心代码只有一行，像套娃一样的将 Middleware 一层一层的套起来，最底层的args就是store.dispatch。

Axios

Axios中没有 Middleware 的概念，但却有类似功能的拦截器(interceptors），本质上都是在数据处理链路的 2 点之间，提供独立的、配置化的、可叠加的额外功能。

用法

Axios的 interceptors 分请求和响应 2 种，注册后会自动按注册的顺序执行，无需像其他框架一样要手动调用next（）。

原理

interceptors 注册（use）

可以看到Axios内部会维护 2 个 interceptors，它们有独立的 handlers 数组。use就是往数组添加元素而已，跟其它框架不同的是这里的数组元素不是一个函数，而是一个对象，包含fulfilled和rejected 2 个属性。第二个参数不传的时候rejected就是 undefined。

任务编排

这里通过 promise 的链式调用，将 interceptors 串联了起来，执行顺序是：requestInterceptorChain -> chain -> responseInterceptorChain。这里有一个默认的约定，chain 里的元素都是按照[fulfilled1, rejected1, fulfilled2, rejected2]这种模式排列的，所以注册 interceptors 的时候如果没有提供第二个参数，也会有一个默认值 undefined。

各框架的横向对比

看了各大框架的 Middleware 实现方式之后，我们可以总结出以下几个特点：

• Middleware 机制既可以用于服务器端也可以用于客户端
• Middleware 机制本质上是向框架使用者开放数据处理链路上的一个或多个点，增强框架的数据处理能力
• 绝大多数的 Middleware 都是不依赖于具体业务的可复用的功能
• 多个 Middleware 可以组合起来实现复杂功能

我们再来总结一下各大框架中间件系统实现方式的精髓：

这里面最精妙也是最难理解的就是Array.reduce这种形式，需要反复地推敲。promise.then链式调用的任务编排方法也十分巧妙，前面处理完的数据会自动传给下一个then。递归调用的形式则最好理解，Koa在Express实现的基础上天然支持异步调用，更符合服务器端场景。

总结

本文从使用方式入手，结合源码讲解了各大前端框架中 Middleware 的实现方式，横向对比了他们之间的异同。当中的递归调用、函数嵌套和 promise 链式调用的技巧非常值得我们借鉴学习。