本节将结合例子和源码对koa2的中间件机制做一介绍。
什么是中间件？
中间件的本质就是一种在特定场景下使用的函数，koa官网给了它一个特殊的称谓middleware，中文译为中间件。
这些被称为中间件的特殊函数可以介入到koa对网络的请求和相应的处理，负责完成某个特定的功能。基本上，Koa 所有的功能都是通过中间件实现的。
中间件包含两个参数 ctx, next：
- ctx: 作为上下文使用,包括基本的ctx.request和ctx.response另外koa通过delegates这个库对request, response一些常用属性或者方法,做了很多代理操作,可以直接通过ctx访问得到,比如request.url可以写成ctx.url。
- next: 中间件通过next函数联系, 执行next()后会将控制权交给下一个中间件, 直到没有中间件执行next后将会沿路折返,将控制权交换给前一个中间件，因此next()后面的代码会在后面中间件执行结束后执行。
简单讲：ctx为网络处理上下文,next指向下个中间件，内部通过dispatch函数形成了一条处理请求的流水线。
中间件的使用
在koa中使用中间件特别简单，实例化直接把中间件传入其use方法即可，比如我们的静态服务器：
const Koa = require('koa');
const KoaStatic = require('koa-static');
const app = new Koa();
app.use(KoaStatic('./static'));
要想了解原理，我们需要到koa源码中找到对use方法的定义：
use(fn) {
if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
if (isGeneratorFunction(fn)) {
fn = convert(fn);
}
debug('use %s', fn._name || fn.name || '-');
this.middleware.push(fn);
return this;
}
可以看到：
- 通过use方法, 将中间件push到koa实例对象app的数组属性middleware中；
- 同时koa2， 还使用 isGeneratorFunction(fn) 来判断是否为 Generator语法，并通过 convert(fn) 转换成 async/await 语法, 以兼容 Generator 语法的中间件；
- 最后返回this意味着可以链式调用use函数。
中间件的执行顺序
中间件是按顺序执行, 可通过以下例子验证：
const first = (ctx, next) => {
console.log('>>> 1');
next();
console.log('<<< 1');
}
const second = (ctx, next) => {
console.log('>>> 2');
next();
console.log('<<< 2');
}
const third = (ctx, next) => {
console.log('>>> 3');
next();
console.log('<<< 3');
}
app.use(first);
app.use(second);
app.use(third);
执行后，我们在终端看到的打印结果如下：
>>> 1
>>> 2
>>> 3
<<< 3
<<< 2
<<< 1
可以看到，中间件通过next函数联系, 执行next()后会将控制权交给下一个中间件, 直到没有中间件执行next后将会沿路折返,将控制权交换给前一个中间件，因此next()后面的代码会在后面中间件执行结束后执行。
另外，路由也是通过中间件实现，执行顺序也一样, 所以路由设置应该把容易匹配到的放在后面：比如路由规则包含了/all和/:id，那么，对/all处理的中间件应该放在/:id之前。
中间件的异步处理
我们先看一个例子：
const Koa = require('koa')
const app = new Koa()
app.use((ctx, next) => {
console.log('>>> 1');
next()
console.log('<<< 1');
})
app.use((ctx) => {
setTimeout(() => {console.log(2)}, 1000)
})
app.listen(8888)
终端打印结果如下：
>>> 1
<<< 1
2
如何保证第二个中间件函数执行完毕后， 才执行第一个中间件函数next之后的代码的呢？请看实现:
app.use(async(ctx, next) => {
console.log('>>> 1');
await next()
console.log('<<< 1');
})
app.use((ctx) => {
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log(2)
resolve()
}, 1000)
})
})
终端打下结果为：
>>> 1
2
<<< 1
可以看到：我们通过在第一个中间件中使用async/await，第二个中间件返回一个promise对象，执行完毕异步代码后再resolve，就保证了代码的执行顺序。
中间件的级联执行
当执行koa实例app的listen方法开启服务器时,实际上是在内部,使用http模块,启动了http服务器,并将自身的callback函数传入:
listen(...args) {
debug('listen');
const server = http.createServer(this.callback());
return server.listen(...args);
}
接着我们看下callback的源码：
callback() {
const fn = compose(this.middleware);
if (!this.listenerCount('error')) this.on('error', this.onerror);
const handleRequest = (req, res) => {
const ctx = this.createContext(req, res);
return this.handleRequest(ctx, fn);
};
return handleRequest;
}
可以看到，通过 compose() 这个方法，就能将我们传入的中间件数组转换并级联执行，并返回 Promise。 compose() 这个方法来自依赖库koa-compose，其实现如下：
function compose (middleware) {
if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
for (const fn of middleware) {
if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
return function (context, next) {
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)
}
}
}
}
可以看到，compose的执行流程是将中间件数组传入, 返回一个类型为(ctx, next) =>{}的函数fn(context, dispatch.bind(null, i + 1))，最后折回通过if (!fn) return Promise.resolve()一级级递归，从callback()方法中可以看到，每当有请求时：
- 首先会执行第一个中间件,并把下个中间件作为next参数传入, 执行到next()时，将控制权交给下一个中间件；直到后续中间件执行结束, 交还控制权,才能继续执行next()后面的操作；
- 在dispatch(i+1) 中，传递
i+1这个参数就相当于执行了下一个中间件，从而形成递归调用; - 每个中间件都有属于自己的一个闭包作用域，同一个中间件的 i 是不变的，而 index 是在闭包作用域外面的;
- 执行到最后一个中间件, fn = next，因为next()为undefined,所以终止执行, 然后沿路折返,将控制权交换给前一个中间件，；
这样，内部通过dispatch函数就形成了一条处理请求的流水线。
当所有的中间件执行结束后，说明请求已经处理好了，然后把处理好的上下文ctx传入respond，根据其定义response的状态码和body类型返回给客户端对应的数据。
如何写中间件
在写之前，我们先回顾中间件的执行机制，从async 的执行机制 “只有当所有的 await 异步都执行完之后才能返回一个 Promise”看我们用 async 的语法写的中间件的执行流程为：
- 先执行第一个中间件（compose 默认执行 dispatch(0)），该中间件返回 Promise，然后被 Koa 监听，执行对应的逻辑（成功或失败）；
- 在执行第一个中间件的逻辑时，遇到 await next()时，会继续执行 dispatch(i+1)，也就是执行 dispatch(1)，会手动触发执行第二个中间件;这时候，第一个中间件 await next() 后面的代码就会被 pending，等待 await next() 返回 Promise，才会继续执行第一个中间件 await next() 后面的代码;
- 同理，在执行第二个中间件的时候，遇到 await next() 的时候，会手动执行第三个中间件，await next() 后面的代码依然被 pending，等待 await 下一个中间件的 Promise.resolve；
- 以此类推，直到最后1个中间件执行完，返回 Promise，然后倒数第2个中间件才执行后续的代码并返回Promise，之后是倒数第三个中间件，一直到第一个中间件执行完，并返回 Promise。
通过上面的分析，我只需按照如下方式写中间件即可：
async function middleware(ctx, next){
try{
// 处理代码
await next()
// 处理代码
}.catch(err){
// 异常捕获
}
}
比如，我在真实项目写的一个记录一次请求处理的中间件：
app.use(async (ctx, next) => {
const start = new Date();
await next();
const ms = new Date() - start;
console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});
中间件的分类
- 中间件简介
Koa.js 中间件 可为 狭义中间件和广义中间件 两种类型，其区别如下：
狭义中间件特点：
一般直接被 app.use() 加载
中间件内请求拦截 request
中间件内响应拦截 response
中间件内上下文代理，初始化实例时候挂载代理在app.context上，请求时候挂载代理在ctx上
例如, koa-bodyparser主要是拦截请求后解析出HTTP请求体中的POST数据，而koa-static主要是靠拦截请求和响应，加载静态资源，再挂载到ctx上。
广义中间件特点：
间接被 app.use() 加载
间接提供中间件或者子中间件
其他方式接入koa切面
例如中间koa-router 是先注册路由后形成多个子中间件，后面再封装成一个父中间件提供给app.use()加载，让所有子中间件加载到Koa.js的请求洋葱模型中。
总结
本节我们深入介绍了koa的中间件机制，其处理流程大致如下：
- 初始化koa实例后，通过use方法来加载中间件，存储于koa实例的一个数组属性；
- 同时，use调用顺序会决定中间件的执行顺序；
- 中间件必须是一个可接收两个参数的函数(不是函数将报错)，第一个是ctx上下文对象，另一个是next函数；
- 通过listen()方法建立好http服务器后，会调用koa-compose模块对middleware中间件数组进行依次处理；
- 当请求经过各中间件处理后，将把处理好的上下文ctx传入respond，简单处理后返回给客户端对应的数据。
