4.3 koa的中间件机制

2019-01-05  本文已影响21人  空无一码

本节将结合例子和源码对koa2的中间件机制做一介绍。

什么是中间件？

中间件的本质就是一种在特定场景下使用的函数，koa官网给了它一个特殊的称谓middleware，中文译为中间件。

这些被称为中间件的特殊函数可以介入到koa对网络的请求和相应的处理，负责完成某个特定的功能。基本上，Koa 所有的功能都是通过中间件实现的。

中间件包含两个参数 ctx, 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;
  }

可以看到：

中间件的执行顺序

中间件是按顺序执行, 可通过以下例子验证：

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()方法中可以看到，每当有请求时：

这样，内部通过dispatch函数就形成了一条处理请求的流水线。

当所有的中间件执行结束后，说明请求已经处理好了，然后把处理好的上下文ctx传入respond，根据其定义response的状态码和body类型返回给客户端对应的数据。

如何写中间件

在写之前，我们先回顾中间件的执行机制，从async 的执行机制 “只有当所有的 await 异步都执行完之后才能返回一个 Promise”看我们用 async 的语法写的中间件的执行流程为：

通过上面的分析，我只需按照如下方式写中间件即可：

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`);
});

中间件的分类

一般直接被 app.use() 加载
中间件内请求拦截 request
中间件内响应拦截 response
中间件内上下文代理，初始化实例时候挂载代理在app.context上，请求时候挂载代理在ctx上

例如, koa-bodyparser主要是拦截请求后解析出HTTP请求体中的POST数据，而koa-static主要是靠拦截请求和响应，加载静态资源，再挂载到ctx上。

广义中间件特点：

间接被 app.use() 加载
间接提供中间件或者子中间件
其他方式接入koa切面

例如中间koa-router 是先注册路由后形成多个子中间件，后面再封装成一个父中间件提供给app.use()加载，让所有子中间件加载到Koa.js的请求洋葱模型中。

总结

本节我们深入介绍了koa的中间件机制，其处理流程大致如下：

上一篇 下一篇

猜你喜欢

热点阅读