快速搞懂从函数组合到中间件实现

为了更好地解决业务逻辑中的对于AOP切面描述的需要，很多JS框架中都会用到中间件，怎么理解中间件结构呢，比较生动形象说法是洋葱圈图。

图片描述

以下列举了几种状态的函数处理关系来说明中间件实现原理

1. 无组合状态

async function fn1(next){
    console.log('fn1')
    console.log('end fn1')
}

async function fn2(next){
    console.log('fn2')
    console.log('end fn2')
}

function fn3(next){
    console.log('fn3')
}
fn3(fn2(fn1()))

这个其实不能叫做组合 只是程序先运行最内层的表达式 然后向外运行 实际上这个执行顺序就是 fn1 -> fn2 -> fn3 执行结果如下：

fn1
end fn1
fn2
end fn2
fn3

当然这个里面你即使写await执行顺序也没有什么变化

(async () => {
    await fn3(await fn2(await fn1()))
})()

2. 两个函数的组合

下面我们通过参数传递的方式把两个函数组合成一个函数。

async function fn1(next){
    console.log('fn1')
    next && await next()
    console.log('end fn1')
}

async function fn2(next){
    console.log('fn2')
    next && await next()
    console.log('end fn2')
}
const compose = (fn1, fn2) => ()=> fn3(fn2(fn1()))
compose(fn1, fn2, fn3)()
fn2(fn1)

fn2
fn1
end fn1
end fn2

3. 多个函数的组合

影响多个函数不能串行的原因是 fn2的中不能返回函数结果。 解决这个问题的方法是不要函数的运行结果而是将函数科里化后返回

async function fn1(next){
    console.log('fn1')
    next && await next()
    console.log('end fn1')
}

async function fn2(next){
    console.log('fn2')
    next && await next()
    console.log('end fn2')
}
async function fn3(next){
    console.log('fn3')
    next && await next()
    console.log('end fn3')
}

async function fn4(next){
    console.log('fn4')
    next && await next()
    console.log('end fn4')
}
fn1(() => fn2(() => fn3(fn4)))

fn1
fn2
fn3
fn4
end fn4
end fn3
end fn2
end fn1

4. 通用异步Compose函数

 
function compose(middlewares)=> {
  return function() {
     return dispatch(0); // 执⾏行行第0个
     function dispatch(i) {
      let fn = middlewares[i];
      if (!fn) {
        return Promise.resolve();
      }
      return Promise.resolve(
        fn(function next() {
          // promise完成后，再执⾏行行下⼀一个
          return dispatch(i + 1);
        })
    ); }
}; }

compose(fn1,fn2,fn3,fn4)()

fn1
fn2
fn3
fn4
end fn4
end fn3
end fn2
end fn1