【Web技术】904- Express/Koa/Redux三者中间件对比

迷南。 2022-11-12 01:52 77阅读 0赞

![c0c51fac64b4a4d52ce66437fc4c8607.png][]

Author: AddOneG

Link: http://yoursite.com/2018/09/14/express-koa-redux三者中间件对比/

这三者对各自的中间件有着不同的实现，作者本人对此也比较好奇，在这里小小的研究一下源码，探究三者之间的异同

## 什么是中间件 ##

> 在我看来，中间件就是在你的代码运行中进行一些修改的工具。比如你想喝水，那么喝水之前你将水净化就可以理解为是一次中间件的执行。他不是插件，独立于程序之外，而更像是在你的代码中表现一种类似连接的功能

## Koa 与 Express 中间件概述 ##

这两者都是Node层面的，这里我们根据官方文档来对比

## Express ##

var app = express();
    
    // 没有挂载路径的中间件，应用的每个请求都会执行该中间件
    app.use(function (req, res, next) {
      console.log('Time:', Date.now());
      next();
    });
    
    // 挂载至 /user/:id 的中间件，任何指向 /user/:id 的请求都会执行它
    app.use('/user/:id', function (req, res, next) {
      console.log('Request Type:', req.method);
      next();
    });
    
    // 路由和句柄函数(中间件系统)，处理指向 /user/:id 的 GET 请求
    app.get('/user/:id', function (req, res, next) {
      res.send('USER');
    });

可以看到express的中间件是使用next进行线性调用的，一个接着一个的执行，是一种尾递归的调用(后文会讲)。然后在最后一个中间件中进行对response的处理(习惯)

## Koa ##

const Koa = require('koa');
    const app = new Koa();
    
    // x-response-time
    
    app.use(async (ctx, next) => {
      const start = Date.now();
      await next();
      const ms = Date.now() - start;
      ctx.set('X-Response-Time', `${ms}ms`);
    });
    
    // logger
    
    app.use(async (ctx, next) => {
      const start = Date.now();
      await next();
      const ms = Date.now() - start;
      console.log(`${ctx.method} ${ctx.url} - ${ms}`);
    });
    
    // response
    
    app.use(async ctx => {
      ctx.body = 'Hello World';
    });
    
    app.listen(3000);

从代码中的await可以看出，koa的中间件`绝对不是线性的`，因为一旦使用了await，代码就会停止当前中间件的执行转而去执行await后面的代码，这里`next`表示`下一个中间件`。所以这是一个支持generator的洋葱圈模型(后文会讲)

## Koa 与 Express 中间件源码进一步解析 ##

> 上面提到，express的中间件是尾递归调用，而koa的中间件因为使用了await所以是支持generator的洋葱圈模型，这里以此展开来分析代码

### Express ###

我们直接进入application.js中观察中间件处理

app.handle = function(req, res, callback) {
      var stack = this.stack;
      var idx = 0;
      function next(err) {
        if (idx >= stack.length) {
          callback('err') 
          return;
        }
        var mid;
        while(idx < stack.length) {
          mid = stack[idx++];
          mid(req, res, next);
        }
      }
      next()
    }

这里next方法不断取出stack中的中间件并且将自己传递给中间件作为参数，这样中间件只需要调用next方法就能不断传递到下一个中间件。在函数的末尾递归调用了next方法，所以称为尾递归调用

### Koa ###

> Koa对中间件的处理是在一个独立的包koa-compose中

'use strict'
    
    module.exports = compose
    
    function compose (middleware) {
    
      return function (context, next) {
        let index = -1
        return dispatch(0)
        function dispatch (i) {
          index = i
          let fn = middleware[i]
          if (i === middleware.length) fn = next
          if (!fn) return Promise.resolve()
          try {
            return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
          } catch (err) {
            return Promise.reject(err)
          }
        }
      }
    }

Koa中使用了Promise来支持异步，这里不停调用dispatch.bind(null, i + 1)传递下一个中间件，一个一个中间件向里执行，直到最后一个中间件执行完resolve掉，然后不断向前resolve中间件，直到第一个中间件被resolve。我们可以发现，相应的处理并不在中间件中而是在其resolve后

## Redux ##

对于redux的基础createStore，reducer，dispatch等就不解释了，这> 里直接看applyMiddleware的代码

import compose from './compose'
    
    export default function applyMiddleware(...middlewares) {
      return createStore => (...args) => {
        const store = createStore(...args)
        let dispatch = () => {
          throw new Error(
            `Dispatching while constructing your middleware is not allowed. ` +
              `Other middleware would not be applied to this dispatch.`
          )
        }
    
        const middlewareAPI = {
          getState: store.getState,
          dispatch: (...args) => dispatch(...args)
        }
        const chain = middlewares.map(middleware => middleware(middlewareAPI))
        dispatch = compose(...chain)(store.dispatch)
    
        return {
          ...store,
          dispatch
        }
      }
    }

这里还是比较好理解的，middlewareAPI中包含两个api，一个是store的getState；另一个是覆写的dispath，这是一个外部变量，最终指向覆写后的dispach，对于`compose的作用是compose(f, g, h) 返回 () => f(g(h(..args)))`

那么`dispatch = compose(...chain)(store.dispatch)即原生的 store.dispatch` 传入最后一个“中间件”，返回一个新的```dispatch ``, 再向外传递到前一个中间件，直至返回最终的```dispatch\`, 当覆写后的dispatch调用时，每个“中间件“的执行又是从外向内的”洋葱圈“模型

![d5cf446d6214bce77c0cf95c5a542f4b.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![dbb1408495c74c6d263091cb0d3b1d3b.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[c0c51fac64b4a4d52ce66437fc4c8607.png]: /images/20221022/c7fad214a8a043e8a91f212aa82f9228.png
[d5cf446d6214bce77c0cf95c5a542f4b.gif]: /images/20221022/4ea8eab2780a43cfb3707d29cd622762.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[dbb1408495c74c6d263091cb0d3b1d3b.gif]: /images/20221022/6ce6decef175451ab2ecfe7d850cb557.png