一步步去阅读koa源码，中间件执行原理
koa的中间件执行的流程控制，代码的是非常精妙的。由下面的一张洋葱模型的图来形容，记住这张图。
为什么是这样子的图，下面我们有一个例子来描述一下
const Koa = require('koa')
const app = new Koa()
// fn1
app.use(async (ctx, next) => {
console.log('fn1-1')
next()
console.log('fn1-2')
})
// fn2
app.use(async (ctx, next) => {
console.log('fn2-1')
next()
console.log('fn2-2')
})
// fn3
app.use(async (ctx, next) => {
console.log('fn3-1')
next()
console.log('fn3-2')
})
app.listen(4002)
// fn1-1、fn2-1、fn3-1、fn3-2、fn2-2、fn1-2上面的这个例子，顺序打印出来的是fn1-1、fn2-1、fn3-1、fn3-2、fn2-2、fn1-2，现在只知道，调用next()函数就会把控制流程就跳到下一个中间件，知道执行所有完之后然后再逐步向上执行前一个next后面的代码。这根跟洋葱有很大的相像似性（如果你愿意一层一层一层的剥开我的心~~~）。
探索
但是其中的原理是什么呢？？下面我们一步步去探索。
首先是调用 app.use(fn) 这行代码，这行代码在源码里面，删除一些代码判断，是这样子的
constructor() {
super();
this.middleware = [];
}
use(fn) {
this.middleware.push(fn);
return this;
}就是把所有函数push到一个middleware的数组之中，这个use就是专门干这中勾当的。
好了知道use的作用了，执行了use之后 我们的middleware中就有很多中间件函数了，下面我们继续看下去。
然后执行到 app.listen函数之后，代码如下
listen(...args) {
// 创建一个server
const server = http.createServer(this.callback());
return server.listen(...args);
}我们看到里么有个this.callback()执行函数，然后我们跳到这个函数里面。
callback() {
// 我们看这里
const fn = compose(this.middleware);
const handleRequest = (req, res) => {
const ctx = this.createContext(req, res);
// 这个节点我们请记住下面这一行代码
return this.handleRequest(ctx, fn);
};
return handleRequest;
}这个callback函数里面，执行了compose函数，并且把middleware数组作为参数传递进去。
执行到了compose函数，下面我们就看看compose里面有什么。
compose函数就是一开始引用了koa-compose模块,简化之后发现里面的代码如下，简化后就简简单单的20几行代码，后面会详细解释下面的代码。
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, function next () {
return dispatch(i + 1)
}))
} catch (err) {
return Promise.reject(err)
}
}
}
}执行这个compose返回一个函数，这也是最核心的一个函数。注意这是上面的callback调用的。得到一个fn函数
看上面的callback调用的
然后执行到this.handleRequest(ctx, fn); 这个函数吧ctx和fn（这个就是上面compose返回的函数）作为参数，传入到this.handleRequest中。 代码如下。
handleRequest(ctx, fnMiddleware) {
return fnMiddleware(ctx).then(handleResponse).catch(onerror);
}到这里才真正的执行了compose返回的函数，把ctx传进去。然后我们继续看这个函数fnMiddleware(ctx)，其实就是下面这样子的。
function (context, next) {
// 设置了一个出事索引值
let index = -1
// 调用dispatch函数，开始时候传0进去
return dispatch(0)
// 声明dispatch函数，
function dispatch (i) {
// 把传进来的赋值给index
index = i
// 拿出middleware第i个中间件函数，赋值给fn
let fn = middleware[i]
// 判断如果i 等于middleware的长度 就把next 赋值给 fn
if (i === middleware.length) fn = next
// 如果fn是假的 return return Promise.resolve()
if (!fn) return Promise.resolve()
try {
// 返回一个Promise.resolve, 同时执行fn， 也就是中间件，把next 函数传递到fn里面
return Promise.resolve(fn(context, function next () {
// 递归调用自己
return dispatch(i + 1)
}))
} catch (err) {
return Promise.reject(err)
}
}
}上面的代码是这个部分的精华。这里详细的说一下，首先定义了一个index和dispatch函数， 然后一开始调用dispatch(0)函数，里面把0赋值给了index，然后从middleware的数组（例子中我们有三个中间件函数）中拿到第0个中间件函数，赋值给fn，经过两个if都不符合条件，然后执行
return Promise.resolve(fn(context, function next () {
// 递归调用自己
return dispatch(i + 1)
}))这里的执行fn 中间件函数，并且把ctx 和 function next () { return dispatch(i + 1) }) 作为参数传递进去。这个时候代码如下一幕了然
app.use(async (ctx, next) => {
console.log('fn1-1')
next() // 执行传入的next
console.log('fn1-2')
})执行这个函数 就会打印出fn1-1 然后就会执行next()函数，看上上一块代码，执行next()函数里面会调用 dispatch(i + 1) 也就是调用第fn = middleware[1] 正是第二个中间件。
看到这里大家就大概明白了。然后进入第二个中间件执行fn，打印出fn2-1，继续执行next()函数，next函数里面继续调用 dispatch(i + 1) ，
也就是fn = middleware[2] 第三中间件函数，打印出fn3-1，继续执行next()函数里面会调用 dispatch(i + 1)，也就是fn = middleware[3] ，
这里注意了，if (i === middleware.length) fn = next到这里会符合这个条件，然后把next 赋值给fn 这里的next就是这个fnMiddleware(ctx).then(handleResponse).catch(onerror);调用时候传入的，然而这里并没有传入，所以这时候 fn 就是 undefined，然后继续执行到if (!fn) return Promise.resolve() 返回一个空的值，这就是第三个中间件的next执行结果，
然后继续执行下一行就打印出了fn3-2，最后向上执行到fn2-2，然后到fn1-2, 整个中间件的执行过程。很像洋葱模型，一层层进入，然后一层层出来。
好了整个中间件执行过程就是酱紫啦~~~
最后安利一波博客： https://github.com/naihe138/n...