Express与Koa中间件机制分析（二）

最新推荐文章于 2023-07-14 16:55:42 发布

weixin_34166472

最新推荐文章于 2023-07-14 16:55:42 发布

阅读量180

点赞数

原文链接：https://juejin.im/post/5c9877b06fb9a070e25a706e

版权

前言

在Express与Koa中间件机制分析（一）中我们有提到，Express 为线型模型，而 Koa 则为洋葱型模型，之前我们已经通过解析 connect 的源码对 Express 中间件机制进行了分析，本篇文章我们将对 Koa 的部分源码进行分析以帮助大家来理解其中间件机制。

koa1 基于的 co 库，所以 koa1 利用 Generator 来代替回调，而 koa2 由于 node 对 async/await 的支持，所以 koa2 利用的是 async/await

目前大家常用的基本上都是 koa2，在这里我们先对于 Koa2 的实现进行分析，Koa1 先留个坑，之后再补充。

Koa1 中间件

留坑待续...

Koa2 中间件

Koa2 中间件的实现依赖于其自身的 koa-compose，下面我们看一下 compose 函数的实现。

function compose (middleware) {
  // 判断参数是否合法，middleware 要求为数组且其中每个数组元素都为 function
  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
    // 递归返回一个函数 该函数返回一个 Promise 的对象
    return dispatch(0)
    function dispatch (i) {
      // 当 next 方法被多次调用时会出现
      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()
      // Promise 封装中间件 进行递归调用
      try {
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}
复制代码

在 Koa 中的 use 函数内，中间件入栈，在 compose 函数中传入的 middleware 即为中间件数组。在 compose 中对该数组进行递归调用，返回一个 Promise 链。

下面通过一个例子来对中间件执行这一过程进行分析：

// 中间件 fn1 和 fn2
async function fn1 (ctx, next) {
  console.log('first: start')
  await next()
  console.log('first: end')
}
async function fn2 (ctx, next) {
  console.log('second: start')
  await next()
  console.log('second: end')
}
// 模拟中间件数组
const arr = [fn1, fn2]
// 执行函数，这里返回的是一个 Promise 对象
compose(arr)()
// 执行后的结果
// first: start
// second: start
// second: end
// first: end
复制代码

其实，在 compose 内部递归执行的操作后，形成多个 Promise 层层嵌套（如下面代码所示），此时 next 函数其实就是下一个中间件，await 需要等待内部的 Promise ，所以其执行结果会呈现一个剥洋葱的模式。

function mycompose() {
  return function () {
    const ctx = {}
    return Promise.resolve(fn1(ctx, () => {
      return Promise.resolve(fn2(ctx, () => {
      }))
    }))
  }
}
mycompose()()
复制代码