JavaScript 前端 (ajax) middleware 的简单封装

zeimeiaj · 2018年04月23日 · 最后由 zeimeiaj 回复于 2018年04月23日 · 188 次阅读

ajax应该是前端应用里面最常见的东西了,几乎每个项目都会用到。通常我们每个人都会根据自己的业务需求来封装ajax,但这并不能适应所有的项目。一但换了一个项目之后可能会涉及修改源码,导致自己写的东西不能重用。虽然在前端网络请求也有拦截器这么一说,但是对于某些业务需求来说拦截器有那么一点点小瑕疵。

在vue开发中最常见的莫过于axios这个了,在axios中我们可能会这么干,


{
    transformRequest:[()=>{}],
    transformResponse:[()=>{}]
}

我们可以在请求之前做一些统一处理,例如签名,公共header、加密和解密。事实上这已经可以让我们的代码变得模块化了,但是仔细想想好像哪里有点不对呢?

如果要做加密和解密的话,那岂不是要再request里面做加密,在response里面做解密了,这似乎并没有什么毛病吧?确实没有什么毛病,能用就行了嘛。折腾这么多干嘛呢

但是偏偏我们就是这么爱折腾,于是就整了个中间件这玩意了,这对于做过koa 开发 的可能已经很熟悉 以下是理想代码


// ctx是当前请求上下文 应该包括 reqeust 和 response两个对象
// 在 一个函数中同时处理请求和响应,
someAajxLib.use(async (ctx,next)=>{

    // =1 transform request 
    await next()
    // =2 transform response

})
// 显示数据加载框
someAajxLib.use(async (ctx,next)=>{

    // =3 loading.open('加载中')
    await next()
    // =4 loading.close()

})
// 打印请求日志,即插即用
someAajxLib.use(async (ctx,next)=>{

    // =5 log
    await next()
    // =6 end

})
// 需要注意中间件的执行顺序, 1 3 5 6 4 2

使用JavaScript代码几行就可以搞定

// 每次请求数据的时候都应该生成一个新的 context 对象,他应该包括  reqeust 和 response 
//  伪代码如下,真正代码自己实现,实在实现不了的,联系我
async function wrapMiddleware(context){
        // 把此处做成配置,
        const middlewares = []  
        // 最后一个中间件调用next的时候就是真正访问后台数据到时候
        async function post(){
            return someAjaxLib.post()
        }
        middlewares.push(post)

        // 第一个middleware的next是下一个中间件函数,一次类推
        // 自己实现吧,这个很简单
            // 包装下你的middleware 把context传进去
        // 执行第一个就行了,在第一个中调用next ,即下一个,以此类推
        await middlewares[0]()
}

发起网络请求的时候应
const context={
    request:{},
    response:{}
}
await wrapMiddleware(context)

console.log(context.response)

共收到 3 条回复

中午在完善

先生们女士们,中午更新哈

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册