关于前端:大前端领域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

用法

app.use(function logMethod(req, res, next) {console.log('Request Type:', req.method)
  next()})

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

原理

原理局部会对源码做极其的精简，只保留外围。

Middleware 注册（use）

var stack = [];
function use(fn) {stack.push(fn);
}

Middleware 调度（next）

function handle(req, res) {
  var idx = 0;
  next();
  function next() {var fn = stack[idx++];
    fn(req, res, next)
  }
}

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

Koa

用法

app.use(async (ctx, next) => {const start = Date.now();
  await next();
  const ms = Date.now() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});

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

原理

Middleware 注册（use）

var middleware = [];
function use(fn) {middleware.push(fn);
}

Middleware 编排（koa-compose）

function compose (middleware) {returnfunction (context, next) {
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      index = i
      let fn = middleware[i]
      // middleware 执行完的后续操作，联合 koa 的源码，这里的 next=undefined
      if (i === middleware.length) fn = next
      if (!fn) returnPromise.resolve()
      try {returnPromise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {returnPromise.reject(err)
      }
    }
  }
}

跟 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 概念利用到客户端的前端框架，它的源码处处体现出函数式编程的思维，让人眼前一亮。

用法

const logger = store =>next =>action => {console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}
const crashReporter = store =>next =>action => {
  try {return next(action)
  } catch (err) {console.error('Caught an exception!', err)
  }
}
const store = createStore(appReducer, applyMiddleware(logger, crashReporter))

Redux 中间件的参数做过柯里化，store 是 applyMiddleware 外部传进来的，next 是 compose 后传进来的，action 是 dispatch 传进来的。这里的设计的确非常奇妙，上面咱们联合源码来进行剖析。

原理

Middleware 编排（applyMiddleware）

export default function applyMiddleware(...middlewares) {return(createStore) =>(reducer, preloadedState) => {const store = createStore(reducer, preloadedState)
    let dispatch = store.dispatch
    let chain = []
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    // 先执行一遍 middleware，把第一个参数 store 传进去
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 传入原始的 dispatch
    dispatch = compose(...chain)(store.dispatch)
    return {
      ...store,
      dispatch
    }
  }
}

这里 compose 的返回值又从新赋值给 dispatch，阐明咱们在利用内调用的 dispatch 并不是 store 自带的，而是通过 Middleware 解决的升级版。

Middleware 编排（compose）

function compose (...funcs) {if (funcs.length === 0) {returnarg => arg}
  if (funcs.length === 1) {return funcs[0]
  }
  return funcs.reduce((a, b) =>(...args) => a(b(...args)))
}

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

Axios

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

用法

// 申请拦截器
axios.interceptors.request.use(function (config) {
  config.headers.token = 'added by interceptor';
  return config;
});
// 响应拦截器
axios.interceptors.response.use(function (data) {
  data.data = data.data + '- modified by interceptor';
  return data;
});

Axios 的 interceptors 分申请和响应 2 种，注册后会主动按注册的程序执行，无需像其余框架一样要手动调用 next()。

原理

interceptors 注册（use）

function Axios(instanceConfig) {
  this.defaults = instanceConfig;
  this.interceptors = {request: new InterceptorManager(),
    response: new InterceptorManager()};
}
function InterceptorManager() {this.handlers = [];
}
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
  this.handlers.push({
    fulfilled: fulfilled,
    rejected: rejected
  });
  returnthis.handlers.length - 1;
};

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

工作编排

// 精简后的代码
Axios.prototype.request = function request(config) {config = mergeConfig(this.defaults, config);
  // 成对的增加元素
  var requestInterceptorChain = [];
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected);
  });
  
  var responseInterceptorChain = [];
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected);
  });
  
  var chain = [dispatchRequest, undefined];
  
  Array.prototype.unshift.apply(chain, requestInterceptorChain);
  chain.concat(responseInterceptorChain);
  
  promise = Promise.resolve(config);
  while (chain.length) {promise = promise.then(chain.shift(), chain.shift());
  }
  return promise;
}

这里通过 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 链式调用的技巧十分值得咱们借鉴学习。