koa中间执行机制

start

---

基于 koa 2.11 按以下流程分析：

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

const one = (ctx, next) => {
  console.log('1-Start');
  next();
  ctx.body = { text: 'one' };
  console.log('1-End');
}
const two = (ctx, next) => {
  console.log('2-Start');
  next();
  ctx.body = { text: 'two' };
  console.log('2-End');
}

const three = (ctx, next) => {
  console.log('3-Start');
  ctx.body = { text: 'three' };
  next();
  console.log('3-End');
}

app.use(one);
app.use(two);
app.use(three);

app.listen(3000);

app.use()

---

use 方法定义在 koa/lib/application.js 中：

use(fn) {
  // check middleware type, must be a function
  if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
  // 兼容 generator
  if (isGeneratorFunction(fn)) {
    deprecate('Support for generators will be removed in v3. ' +
              'See the documentation for examples of how to convert old middleware ' +
              'https://github.com/koajs/koa/blob/master/docs/migration.md');
    fn = convert(fn);
  }
  debug('use %s', fn._name || fn.name || '-');
  
  // 存储中间
  this.middleware.push(fn);
  return this;
}

this.middleware

这就是一个数组，用来存放所有中间件，然后按顺序执行。

this.middleware = [];

app.listen()

---

这个方法定义在 koa/lib/application.js 中：

listen(...args) {
  debug('listen');
  
  // 创建 http 服务并监听
  const server = http.createServer(this.callback());
  return server.listen(...args);
}

this.callback()

callback() {
  // 处理中间件
  const fn = compose(this.middleware);

  if (!this.listenerCount('error')) this.on('error', this.onerror);

  const handleRequest = (req, res) => {
    // 创建 Context
    const ctx = this.createContext(req, res);
    // 执行中间件处理请求和响应
    return this.handleRequest(ctx, fn);
  };

  return handleRequest;
}

this.handleRequest

handleRequest(ctx, fnMiddleware) {
  const res = ctx.res;
  res.statusCode = 404;
  const onerror = err => ctx.onerror(err);
  // 将响应发出的函数
  const handleResponse = () => respond(ctx);
  onFinished(res, onerror);
  // 这里会将 ctx 传给中间件进行处理，
  // 当中间件流程走完后，
  // 会执行 then 函数将响应发出
  return fnMiddleware(ctx).then(handleResponse).catch(onerror);
}

respond(ctx)

function respond(ctx) {
  // 省略其他代码
  // ...
  // 发出响应
  res.end(body);
}

捋一捋流程，由上面的代码可以知道，存放中间的数组是通过 compose 方法进行处理，然后返回一个fnMiddleware函数，接着将 Context 传递给这个函数来进行处理，当fnMiddleware执行完毕后就用respond方法将响应发出。

compose(this.middleware)

---

compose 函数通过koa-compose引入：

const compose = require('koa-compose');

compose 定义在koajs/compose/index.js下

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) {
    // 这个 index 是标识上一次执行的中间件是第几个
    let index = -1
    
    // 执行第一个中间件
    return dispatch(0)
    function dispatch (i) {
      // 检查中间件是否已经执行过，
      // 举个例子，当执行第一个中间件时 dispatch(0)，
      // i = 0, index = -1, 说明没有执行过，
      // 然后 index = i, 而 index 通过闭包保存，
      // 如果执行了多次，就会报错
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      index = i
      
      // 通过传入的索引从数组中获取中间件
      let fn = middleware[i]
      
      // 如果当前索引等于中间件数组的长度，
      // 说明已经中间件执行完毕，
      // fn 为 fnMiddleware(ctx) 时没有传入的第二个参数，
      // 即 fn = undefined
      if (i === middleware.length) fn = next
      // fn 为 undefined, 返回一个已经 reolved 的 promise
      if (!fn) return Promise.resolve()
      
      try {
        // 执行中间件函数并将 dispatch 作为 next 函数传入
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

结束执行流程

现在来捋一下 fnMiddleware的执行流程:

// fnMiddleware 接收两个参数
function (context, next) {
  // ....
}

// 将 context 传入，并没有传入 next,
// 所以第一次执行时是没有传入 next 的
fnMiddleware(ctx).then(handleResponse).catch(onerror);

next == undefined 时会结束中间件执行，流程如下：

function dispatch (i) {
  //...
  
  // 通过传入的索引从数组中获取中间件，
  // 但是因为已经执行完了所有中间件，
  // 所以当前 i 已经等于数组长度，
  // 即 fn = undefined
  let fn = middleware[i]

  // 如果当前索引等于中间件数组的长度，
  // 说明已经中间件执行完毕，
  // 又因为 fnMiddleware(ctx) 时没有传入的第二个参数 next，
  // 所以 fn = undefined
  if (i === middleware.length) fn = next
  
  // fn 为 undefined, 返回一个已经 reolved 的 promise
  // 中间件执行流程结束
  if (!fn) return Promise.resolve()
  
  // ...
}

中间件执行流程

上面先说了结束流程，现在说一下如何顺序执行，形成洋葱模型：

function dispatch (i) {
  // ...省略其他代码
  
	try {
    // 分步骤说明
    // 首先通过 bind 将 dispatch 构建为 next 函数
    const next = dispatch.bind(null, i + 1);
    // 将 ctx, next 传入执行当前中间件，
    // 当在中间件中调用 next() 时,
    // 本质上是调用 diapatch(i + 1),
    // 也就是从数组中获取下一个中间件进行执行，
    // 在这时，会中断当前中间件的执行流程转去执行下一个中间件，
    // 只有当下一个中间件执行完毕，才会恢复当前中间件的执行
    const result = fn(context, next);
    // 中间件执行完毕，返回已经 resolve 的 promise，
    // 那么上一个中间件接着执行剩下的流程，
    // 这样就形成了洋葱模型
    return Promise.resolve(result);
  } catch (err) {
    return Promise.reject(err)
  }
}

开头的例子执行结果如下：

const one = (ctx, next) => {
  console.log('1-Start');
  next();
  ctx.body = { text: 'one' };
  console.log('1-End');
}
const two = (ctx, next) => {
  console.log('2-Start');
  next();
  ctx.body = { text: 'two' };
  console.log('2-End');
}

const three = (ctx, next) => {
  console.log('3-Start');
  ctx.body = { text: 'three' };
  next();
  console.log('3-End');
}

// 1-Start
// 2-Start
// 3-Start
// 3-End
// 2-End
// 1-End
// 而 ctx.body 最终为 { text: 'one' }

next()

---

没有调用 next()

// 没有调用 next() 函数
app.use((ctx, next) => {
  console.log('Start');
  ctx.body = { text: 'test' };
  console.log('End');
});

因为 next 函数本质上就是通过dispatch(i + 1)来调用下一个中间件，如果没有调用 next 函数，就无法执行下一个中间件，那么就代表当前中间件流程执行结束。

多次调用 next()

app.use((ctx, next) => {
  console.log('Start');
  ctx.body = { text: 'test' };
  // 多次调用 next 函数
  next(); // 本质上是 dispatch(i + 1)
  next(); // 本质上是 dispatch(i + 1)
  console.log('End');
});

这里假设 next 为 dispatch(3)，那么 index 就为 2，第一次执行 next 函数时，会发生如下逻辑：

// index == 2
// i == 3
// 不会报错
if (i <= index) return Promise.reject(new Error('next() called multiple times'))
// 赋值后 index 为 3 了 
index = i

假设第三个中间件是最后一个中间件，那么执行完第一次 next 函数会立即执行第二个 next 函数，依然执行这个逻辑，但是 index 已经为 3 了，所以会导致报错：

// index == 3
// i == 3
// 报错
if (i <= index) return Promise.reject(new Error('next() called multiple times'))
index = i