axios 中间件

axios将拦截函数处理成pormise的resolve和reject函数，通过promise链来完成中间件

axios.interceptors.request.use((config) => {
    return {
        ...config,
        name: 1
    }
}, (err) => {
    return {
        error: error
    }
})

axios.use = (resolve, reject) => {
    axios.interceptorsData.push({
        resolve, reject
    })
}

axios.run = () => {
    let result = Promise.resolve();
    axios.interceptorsData.reduce((promise, current) => {
        return promise.then(current.resolve).catch(current.reject)
    })  // 通过一次性构建promise链实现
}

vuex中间件

vuex 中间通过aop的方式添加中间件，在原有处理逻辑上增加前置或者后置操作

vuex.plugin = ({before, after}) => {
    vuex.dispatch.before(before)
    vuex.dispatch.before(after)
}

Function.prototype.before = function(beforeFn) {
    const fn = this;
    return function(...args) {
        beforeFn.apply(this, args);
        return fn.apply(thism, args);
    }
}

reduce中间件

通过组合函数的形式，将函数的结果传入下一个函数，compose(fn1, fn2, fn3) = fn3(fn2(fn1()))，见store篇章

koa中间件

有点像yeild的方式，每次调用中间件，都是把下一个中间的传入。

middleware.use((ctx, next)=> {
    ctx.xxx = 1;
    await next()
    console.log(ctx.xxx)
})
middleware.run = (i=0) => {
    const current = middleware.data[i]   // 保存的所有中间件
    if(!current[i]) {
        return Promise.resolve()
    }
    return Promise.resolve(fn(ctx, middleware.run(i + 1)))  // 通过这种方式实现
}

总结

本质上中间件是一个按照既定模板来实现流式编程的工具，通过这种方式，外部的代码可以侵入到内部实现去耦合