Koa2源码阅读: 中间件机制

中间件机制（洋葱模型）：它实现中间件级联调用是借助 koa-compose
这个库来实现的。源码只有一个函数。

我们先看看没用compose时是怎么执行中间件的：

function add(x, y) {
  return x + y
}
function double(z) {
  return z * 2
}
const res1 = add(1, 2)
const res2 = double(res1)
console.log(res2)

// 或
const res3 = double(add(1,2))
console.log(res3)

double函数要等待add函数的执行结果，可以像上面那样写，但是当中间件一多的时候，代码就不够优雅了。

compose函数的作用就是将这些中间件整合在一起，然后利用闭包返回一个函数，然后我们直接执行返回的函数即可。

const middlewares = [add, double]
let len = middlewares.length
function compose(midds) {
  return (...args) => {
    // 初始值
    let res = midds[0](...args)
    for(let i = 1; i < len; i++){
      res = midds[i](res)
    }
    return res
  }
}

const fn = compose(middlewares)
const res = fn(1,2)
console.log(res)

当然，上面的代码为了便于理解，都是同步的。下面看看compose的源码是怎么做的：

'use strict'

/**
 * Expose compositor.
 */

module.exports = compose

/**
 * Compose `middleware` returning
 * a fully valid middleware comprised
 * of all those which are passed.
 *
 * @param {Array} middleware
 * @return {Function}
 * @api public
 */

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!')
  }

  /**
   * @param {Object} context
   * @return {Promise}
   * @api public
   */

  return function (context, next) {
    // last called middleware #
    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)
      }
    }
  }
}

参考了这篇。

首先是对传入的middleware的一些检查。
然后返回一个闭包，闭包中的dispatch就是执行中间件的函数。在上面的 dispatch(0) 传入了0，用于获取 middleware[0] 中间件。

let fn = middleware[i]

获得中间件后，怎么使用？

      try {
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }

上面的代码执行了中间件函数fn(context, dispatch.bind(null, i + 1))，并传递了 context 和 dispatch.bind(null, i + 1) 函数。

context 就是 koa 中的上下文对象 ctx。dispatch.bind(null, i + 1)
就是我们的next。值得一提的是 i+1 这个参数，传递这个参数就相当于执行了下一个中间件，从而形成递归调用。

这也就是为什么我们在自己写中间件的时候，要先拿到next参数，然后再需要手动执行 next() ：

await next()

即是执行了dispatch.bind(null, i + 1)

只有执行了 next 函数，才能正确得执行下一个中间件。
每个中间件只能执行一次 next，如果在一个中间件内多次执行 next，就会出现问题。

每次执行 dispatch 前，index 必定会小于 i。第一次调用next()后，将i赋值给了index，此时index与i相等。

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

如果再次在这个中间件中调用next，会再次执行 dispatch(i+1)。此时i还是原来的i，而闭包外的index因为第一次的执行，已经是等于i的了。所以将执行：

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

导致报错，现在知道为什么同一个中间件中执行多次next()会报错了吧。

image.png

最后，递归调用完后，就执行next()后面的代码了，一张图很形象的说明：

image.png

至此，这就是我们koa的中间件机制（洋葱模型）。

现在，我们来完善上一篇博客

在application.js的类中直接加入compose函数源码。这时候，将use方法改为：

    use(callback) {
        // this.callback = callback
        this.middlewares.push(callback)
    }

使用use时先将中间件加入数组。
这个 this.middlewares 在 constructor 中初始化为一个空数组：

this.middlewares = []

将listen方法改为：

    listen(...args) {
        const server = http.createServer(async (req, res) => {
            let ctx = this.createCtx(req, res)
            
            // await this.callback(ctx)
            const fn = this.compose(this.middlewares)
            await fn(ctx)
            ctx.res.end(ctx.body)
        })
        server.listen(...args)
    }

将中间件数组传入compose 中整合。
这样子，在我们的 server.js 中就可以这样用了：

const Coa = require('./coa2')
const app = new Coa()

app.use(async (ctx, next) => {
    ctx.body = '1'
    await next()
    ctx.body += '[1]'
})

app.use(async (ctx, next) => {
    ctx.body += '2'
    await next()
    ctx.body += '[2]'
})

app.use(async (ctx, next) => {
    ctx.body += '3'
    ctx.body += '[3]'
})


app.listen(8000, () => {
    console.log('coa!')
})