理解Koa洋葱模型，阅读50行串行Promise源代码

站长

2022年12月09日 00:04 · 阅读数 46

本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。

这是源码共读的第5期 | koa-compose

目标

通过阅读 koa-compose 库，理解洋葱圈模型的实现
使用Jest测试例子理解代码的调用流程
拓展设计模式 职责链模式

代码调试

代码仓库

这里推荐川哥的仓库方便学习

git clone github.com/lxchuan12/k…

调试代码

先在 test/test.js 打下关键断点

理解Koa洋葱模型，阅读50行串行Promise源代码

找到package.json, 选择调试脚本，会执行对应的Npm脚本进入到我们的断点

理解Koa洋葱模型，阅读50行串行Promise源代码

进入断点后，我们可以一步一步慢慢调试代码，使用以下几个关键按键

F11 单步调试也就是代码一步一步往下
F10 单步跳过执行代码但是不会进入比如函数当中的流程
Shift+F11 单步跳出从当前上下文跳出，如果你正在函数中会跳出到函数外
F5 继续跳到下一个断点，如果你没有设置下一个断点(就是给代码打上红色小点)，那么结束调试

流程

整体结构

    function wait (ms) {
      return new Promise((resolve) => setTimeout(resolve, ms || 1))
    }
async () => {
    const arr = []
    const stack = []

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

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

    stack.push(async (context, next) => {
      arr.push(3)
      await wait(1)
      await next()
      await wait(1)
      arr.push(4)
    })

    await compose(stack)({})
}

先不管数组函数中context,next两个形参的作用, 可以先理解context 是执行的上下文作用域，比如当它是一个对象的时候，用于传递或者使用里面的某些参数， next则是对应要调用的下一个函数

最后执行的时候 stack函数数组

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

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

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

首先对middleware做了判断，主要是判断传递进来的是不是一个所有成员为函数的数组参数。

函数执行完毕后返回一个新的函数，这里涉及到高阶函数以及闭包的知识，所以前面对于compose的调用是两次调用 await compose(stack)({}), 第一次调用返回的就是这个函数，第二次调用就是执行这个返回的函数

dispatch函数

return function (context, next) {
    // last called middleware #
    let index = -1 //默认索引 -1
    return dispatch(0) //执行dispatch函数 传入默认索引为0
    // 定义dispatch函数 
    function dispatch (i) {
      //如果传入的索引 小于 index 说明 不存在下一个能调用的函数了
      //也是为了防止重复的 next调用
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      index = i
      let fn = middleware[i] //得到对应数组索引中的 函数
      //这里的判断主要是看是不是到了最后一个函数了
      //如果是最后一个函数 则 调用外部传入的next函数 如果没传next函数 那就退出传递逻辑
      //这里就可以理解为 保底的尾部处理逻辑，对应职责链中的链尾处理
      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)
      }
    }
  }

需要注意的是这里的 dispatch.bind(null, i + 1) 就是 dispatch函数的一个bind调用返回新函数，作用是为了下次调用传入的索引, 如果 Promise.resolve(fn(context, dispatch.bind(null, i + 1) 被调用，就会来到之前数组中定义的形参函数并执行

理解Koa洋葱模型，阅读50行串行Promise源代码