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 , 说明在函数传的函数为异步函数
回调回调, 回过头来调用它, 不是立即执行, 从名字上可看出其差别

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值