解读koa-compose

上一讲我们讲到 koa-router 的实现，今天我们讲讲 koa-compose，compose是将多个函数合并成一个函数（形如： g() + h() => g(h())），koa-compose则是将 koa/koa-router 各个中间件合并执行，结合 next() 就形成了洋葱式模型

image

有同学可能不了解为何是洋葱式模型，接下来我们改造下官方test用例，打出相应 log 应该就清楚了

it.only('should work', async () => {
    const arr = []
    const stack = []

    stack.push(async (context, next) => {
      arr.push(1)
      await wait(1)
      console.log(1)
      await next()
      console.log(1, 1)
      await wait(1)
      arr.push(6)
    })

    stack.push(async (context, next) => {
      arr.push(2)
      await wait(1)
      console.log(2)
      await next()
      console.log(2, 2)
      await wait(1)
      arr.push(5)
    })

    stack.push(async (context, next) => {
      arr.push(3)
      await wait(1)
      console.log(3)
      await next()
      console.log(3, 3)
      await wait(1)
      arr.push(4)
    })
    const a = compose(stack)
    console.log('result-->>>>>>', a)
    await compose(stack)({})
    expect(arr).toEqual(expect.arrayContaining([1, 2, 3, 4, 5, 6]))
  })

结果是1, 2, 3, 33, 22, 11，可以看出先按顺序执行 stack 数组中每个中间件 next 前的代码，之后倒序执行 next 后的代码，相当于一根牙签横穿洋葱，先从外到内，再从内到外，所以叫做洋葱模型。

koa-compose 的代码只有不够50行，细读确实是一段很精妙的代码，而实际核心代码则是这一段：

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, function next () {
          return dispatch(i + 1)
        }))
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }

虽然短，但是之中使用了4层 return，初看会比较绕，我们只看第3，4层 return，这是返回实际的执行代码链

return Promise.resolve(fn(context, function next () {
          return dispatch(i + 1)
        }))

以下分解参照跨入Koa2.0，从Compose开始这篇文章，说得挺好的。

这里尝试用3个中间件进行 compose，并逐步分解执行过程

• 第一次，此时第一个中间件被调用，dispatch(0)，展开：

Promise.resolve(function(context, next){
    //中间件一第一部分代码
    await/yield next()；
    //中间件一第二部分代码
}());

很明显这里的next指向dispatch(1)，那么就进入了第二个中间件；

• 第二次，此时第二个中间件被调用，dispatch(1)，展开：

Promise.resolve(function(context, 中间件2){
    //中间件一第一部分代码
    await/yield Promise.resolve(function(context, next){
        //中间件二第一部分代码
        await/yield next();
        //中间件二第二部分代码
    }())
    //中间件一第二部分代码
}());

很明显这里的next指向dispatch(2)，那么就进入了第三个中间件；

• 第三次，此时第二个中间件被调用，dispatch(2)，展开：

Promise.resolve(function(context, 中间件2){
    //中间件一第一部分代码
    await/yield Promise.resolve(function(context, 中间件3){
        //中间件二第一部分代码
        await/yield Promise(function(context){
            //中间件三代码
        }());
        //中间件二第二部分代码
    })
    //中间件一第二部分代码
}());

此时中间件三代码执行完毕，开始执行中间件二第二部分代码，执行完毕，开始执行中间一第二部分代码，执行完毕，所有中间件加载完毕。

总结

koa-compose 巧妙的运用了 compose 的特性，结合 async await 中 next 的等待执行，形成了洋葱模型，我们可以利用这一特性在 next 之前对 request 进行处理，而在 next 之后对 response 进行处理（例如 error 处理）