koa 洋葱模型的简单实现

需求: 让一个函数, 执行到一半的时候, 去执行其他函数,大致如下

输出顺序依次为: 1 > 3 > 5 > 6 > 4 > 2

上面 koa 的执行,有点类似如下效果: 将 callback 换成了具体函数

const foo = () => {
  console.log('1')

  const bar = () => {
    console.log('3')

    const baz = () => {
      console.log('5')
      console.log('6')
    }
    baz()
    
    console.log('4')
  }
  bar()

  console.log('2')
}
foo()

实现如下

const foo = (callback) => {
  console.log('1')
  callback()
  console.log('2')
}

const bar = (callback) => {
  console.log('3')
  callback()
  console.log('4')
}

const baz = (callback) => {
  console.log('5')
  callback()
  console.log('6')
}

const middlewares = [foo, bar, baz]

const compose = (middlewares) => {
  const dispatch = (i) => {
    if (i === middlewares.length) return
    return middlewares[i](() => dispatch(i + 1))
  }
  return dispatch(0)
}

compose(middlewares)

递归的方式, 注意给 middlewares[i] 传的是 () => dispatch(i + 1)
将一个函数传递给另一个函数, 这种风格方式称为: continuatuin-passing风格(CPS)

关于这种方式, 有个 demo 如下

同步的 CPS

const foo = () => {
  console.log('haha')
}

const bar = (arg) => {
  console.log(arg)
}

const fn = (fn1, fn2) => {
  fn1();
  (() => fn2('给回调函数传参'))();
}

fn(foo, bar)

fn 接收 2 个函数, 这 2 个函数做些什么事情我不用关心, 反正我只需要执行他们就行了
我需要给 fn2 传递一个参数, 直接 fn2('一个参数') 不就可以了?

可是, 如果对回调函数进行异步调用呢? 这样写会报错

异步的 CPS

const foo = () => {
  console.log('haha')
}

const bar = (arg) => {
  console.log(arg)
}

const fn = (callback1, callback2) => {
  setTimeout(callback1, 100)
  setTimeout(() => callback2('给回调函数传参'), 200)
  // 下面的语句会报错: Callback must be a function. Received undefined 
  // setTimeout(callback2('给回调函数传参'), 300) 
}

fn(foo, bar)

setTimeout 接受一个函数, 而不是函数执行的结果, 直接使用 callback2('给回调函数传参') 会报错

注意, 这里我将 fn 变为了 callback , 说明在函数传的函数为异步函数
回调回调, 回过头来调用它, 不是立即执行, 从名字上可看出其差别