50 行代码串行 Promise，koa 洋葱模型原来是这么实现？

1. 熟悉 koa-compose 中间件源码、可以应对面试官相关问题2. 学会使用测试用例调试源码3. 学会 jest 部分用法

# 可以直接克隆我的仓库，我的仓库保留的 compose 仓库的 git 记录git clone https://github.com/lxchuan12/koa-compose-analysis.gitcd koa-compose/composenpm i

# 在 github 上新建一个仓库 `koa-compose-analysis` 克隆下来git clone https://github.com/lxchuan12/koa-compose-analysis.gitcd koa-compose-analysisgit subtree add --prefix=compose https://github.com/koajs/compose.git main# 这样就把 compose 文件夹克隆到自己的 git 仓库了。且保留的 git 记录

// compose/package.json{    "name": "koa-compose",    // debug （调试）    "scripts": {        "eslint": "standard --fix .",        "test": "jest"    },}

// 例如it.only('should work', async () => {})

// compose/test/test.js'use strict'
/* eslint-env jest */
const compose = require('..')const assert = require('assert')
function wait (ms) {  return new Promise((resolve) => setTimeout(resolve, ms || 1))}// 分组describe('Koa Compose', function () {  it.only('should work', 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)({})    // 最后输出数组是 [1,2,3,4,5,6]    expect(arr).toEqual(expect.arrayContaining([1, 2, 3, 4, 5, 6]))  })}

/** * 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){      // 省略，下文讲述    }  }}

function dispatch (i) {  // 一个函数中多次调用报错  // await next()  // await next()  if (i <= index) return Promise.reject(new Error('next() called multiple times'))  index = i  // 取出数组里的 fn1, fn2, fn3...  let fn = middleware[i]  // 最后 相等，next 为 undefined  if (i === middleware.length) fn = next  // 直接返回 Promise.resolve()  if (!fn) return Promise.resolve()  try {    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))  } catch (err) {    return Promise.reject(err)  }}

// 这样就可能更好理解了。// simpleKoaComposeconst [fn1, fn2, fn3] = stack;const fnMiddleware = function(context){    return Promise.resolve(      fn1(context, function next(){        return Promise.resolve(          fn2(context, function next(){              return Promise.resolve(                  fn3(context, function next(){                    return Promise.resolve();                  })              )          })        )    })  );};

it('should catch downstream errors', async () => {  const arr = []  const stack = []
  stack.push(async (ctx, next) => {    arr.push(1)    try {      arr.push(6)      await next()      arr.push(7)    } catch (err) {      arr.push(2)    }    arr.push(3)  })
  stack.push(async (ctx, next) => {    arr.push(4)    throw new Error()  })
  await compose(stack)({})  // 输出顺序 是 [ 1, 6, 4, 2, 3 ]  expect(arr).toEqual([1, 6, 4, 2, 3])})

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

it('should throw if next() is called multiple times', () => {  return compose([    async (ctx, next) => {      await next()      await next()    }  ])({}).then(() => {    throw new Error('boom')  }, (err) => {    assert(/multiple times/.test(err.message))  })})

index = -1dispatch(0)function dispatch (i) {  if (i <= index) return Promise.reject(new Error('next() called multiple times'))  index = i}