两分钟搞懂从函数组合到中间件实现

2022-06-21 206

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

云原生网关 MSE Higress，422元/月

Serverless 应用引擎免费试用套餐包，4320000 CU，有效期3个月

服务治理 MSE Sentinel/OpenSergo，Agent数量不受限

简介： 很多JS框架中都会用到中间件，形成一个洋葱圈结构，这样可以很好的应付业务逻辑中的对于切面描述的需要。经典案例比如Redux 中间件和Koa 中间件

很多JS框架中都会用到中间件，形成一个洋葱圈结构，这样可以很好的应付业务逻辑中的对于切面描述的需要。经典案例比如Redux 中间件和Koa 中间件

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')
}
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('fn3')
}
async function fn4(next){
    console.log('fn4')
    next && await next()
    console.log('fn4')
}
fn1(() => fn2(() => fn3(fn4)))

看一下执行结果

fn1
fn2
fn3
fn4
fn4
fn3
end fn2
end fn1

4.通用异步Compose函数

最后我们将这个操作写成一个通用函数

const compose = (...args) =>  {
    [first,...others] = args.reverse()
    let ret = first
    others.forEach(fn => {
        let retOld = ret
        ret = () => fn(retOld)
    })
    return ret
}
compose(fn1,fn2,fn3,fn4)()