4.3 koa的中间件机制

本节将结合例子和源码对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，简单处理后返回给客户端对应的数据。