Express 与 koa 中间件模式对比

原由

最近在学习koa的使用， 因为koa是至关基础的web框架，因此一个完整的web应用所须要的东西大都以中间件的形式引入，好比koa-router, koa-view等。在koa的文档里有提到：koa的中间件模式与express的是不同的，koa是洋葱型，express是直线型，至于为何这样，网上不少文章并无具体分析。或者简单的说是async/await的特性之类。先不说这种说法的对错，对于我来讲这种说法仍是太模糊了。因此我决定经过源码来分析两者中间件实现的原理以及用法的异同。

为了简单起见这里的express用connect代替（实现原理是一致的）

用法

两者都以官网（github）文档为准

connect

下面是官网的用法：

var connect = require('connect');
var http = require('http');

var app = connect();

// gzip/deflate outgoing responses
var compression = require('compression');
app.use(compression());

// store session state in browser cookie
var cookieSession = require('cookie-session');
app.use(cookieSession({
    keys: ['secret1', 'secret2']
}));

// parse urlencoded request bodies into req.body
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: false}));

// respond to all requests
app.use(function(req, res){
  res.end('Hello from Connect!\n');
});

//create node.js http server and listen on port
http.createServer(app).listen(3000);复制代码

根据文档咱们能够看到，connect是提供简单的路由功能的：

app.use('/foo', function fooMiddleware(req, res, next) {
  // req.url starts with "/foo"
  next();
});
app.use('/bar', function barMiddleware(req, res, next) {
  // req.url starts with "/bar"
  next();
});复制代码

connect的中间件是线性的，next事后继续寻找下一个中间件，这种模式直觉上也很好理解，中间件就是一系列数组，经过路由匹配来寻找相应路由的处理方法也就是中间件。事实上connect也是这么实现的。

app.use就是往中间件数组中塞入新的中间件。中间件的执行则依靠私有方法app.handle进行处理，express也是相同的道理。

koa

相对connect，koa的中间件模式就不那么直观了，借用网上的图表示：

koa

也就是koa处理完中间件后还会回来走一趟，这就给了咱们更加大的操做空间，来看看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);复制代码

很明显，当koa处理中间件遇到await next()的时候会暂停当前中间件进而处理下一个中间件，最后再回过头来继续处理剩下的任务，虽说起来很复杂，可是直觉上咱们会有一种隐隐熟悉的感受：不就是回调函数吗。这里暂且不说具体实现方法，可是确实就是回调函数。跟async/await的特性并没有任何关系。

源码简析

connect与koa中间件模式区别的核心就在于next的实现，让咱们简单看下两者next的实现。

connect

connect的源码至关少加上注释也就200来行，看起来也很清楚，connect中间件处理在于proto.handle这个私有方法，一样next也是在这里实现的

// 中间件索引
var index = 0
function next(err) {


    // 递增
    var layer = stack[index++];

    // 交由其余部分处理
    if (!layer) {
      defer(done, err);
      return;
    }

    // route data
    var path = parseUrl(req).pathname || '/';
    var route = layer.route;

    // 递归
    // skip this layer if the route doesn't match
    if (path.toLowerCase().substr(0, route.length) !== route.toLowerCase()) {
      return next(err);
    }

    // call the layer handle
    call(layer.handle, route, err, req, res, next);
  }复制代码

删掉混淆的代码后 咱们能够看到next实现也很简洁。一个递归调用顺序寻找中间件。不断的调用next。代码至关简单可是思路却很值得学习。
其中done是第三方处理方法。其余处理sub app以及路由的部分都删除了。不是重点

koa

koa将next的实现抽离成了一个单独的包，代码更加简单，可是实现了一个貌似更加复杂的功能

function compose (middleware) {
  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      index = i
      try {
        return Promise.resolve(fn(context, function next () {
          return dispatch(i + 1)
        }))
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}复制代码

看着上面处理过的的代码 有些同窗可能仍是会不明觉厉。

那么咱们继续处理一下：

function compose (middleware) {

  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      index = i
      let fn = middleware[i]
      if (i === middleware.length) {
        fn = next
      }
      if (!fn) return
      return fn(context, function next () {
        return dispatch(i + 1)
      })
    }
  }
}复制代码

这样一来 程序更加简单了 跟async/await也没有任何关系了，让咱们看下结果好了

var ms = [
  function foo (ctx, next) {
    console.log('foo1')
    next()
    console.log('foo2')
  },
  function bar (ctx, next) {
    console.log('bar1')
    next()
    console.log('bar2')
  },
  function qux (ctx, next) {
    console.log('qux1')
    next()
    console.log('qux2')
  }
]

compose(ms)()复制代码

执行上面的程序咱们能够发现依次输出：

foo1
bar1
qux1
qux2
bar2
foo2复制代码

一样是所谓koa的洋葱模型，到这里咱们就能够得出这样一个结论：koa的中间件模型跟async或者generator并无实际联系，只是koa强调async优先。所谓中间件暂停也只是回调函数的缘由。

若有错误，但愿不吝指出。

over。