Koa 中间件机制的洋葱圈模型

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx, next) => {
    console.log(1);
    await next();
    console.log(6);
});

app.use(async (ctx, next) => {
    console.log(2);
    await next();
    console.log(5);
});

app.use(async (ctx, next) => {
    console.log(3);
    ctx.body = "hello world";
    console.log(4);
});

app.listen(3000, () => {
    console.log('listenning on 3000');
});

上面的代码执行后会输出123456，就像一个洋葱一样，从外层进去，然后碰到next()就执行下一个中间件，执行完成后再返回回来。先假设我们已经实现了next为下个中间件这段代码，上面的执行逻辑就很清楚了，先输出1，然后进入下一个中间件，去处理2，同理最后后面都处理完成后处理5，5处理完成后第二个中间件结束，然后第一个中间件再处理6。

所以现在就是怎么实现这个代码。通过看Koa的源码我们可以发现它是通过koa-compose这个库实现的，代码很短，如下：

function compose (middleware) {
  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      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)
      }
    }
  }
}

核心代码就是return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));这里了，每次执行中间件时，会将第二个中间件作为函数的第二个参数传进去。这也就和上面的async (ctx, next) => {}写法对应上了，所以执行next()就可以执行下一个中间件了。