二次封装 query ajax 办法

zr_hebo 发布于2019-08-20 17:44 / 2396人阅读

摘要：本次二次封装，参考可以添加中间件处理数据，返回对象，减少回调，写更加简洁优雅。痛点但是在项目中使用它还是有一些痛点的就是现在基本所有项目的返回的数据也是进行了二次封装，加入了后台在处理业务逻辑时的信息。

前言

在我们前端处理数据的时候免不了要 ajax 与后台通信， ajax 是通过 XMLHttpRequest 对象与服务器进行通信的， jquery 在 XMLHttpReaquest 的基础上封装了 $.ajax 办法进行通信， $.ajax 办法实用性非常强，又非常简单易用。本次二次封装 query ajax，参考 express 可以添加中间件处理数据，返回 Promise（Defferd）对象，减少回调，写 ajax 更加简洁、优雅。

</>复制代码 
$.ajax({
    url: url,
    data: data,
    dataType: "json",
    type: "get",
    success: new Function(){},
    error: new Function(){},
    .......
})

大部分的时候我们只需要传入 url 和 data，就可以获取到我们想到的数据了。

痛点

但是在项目中使用 $.ajax, 它还是有一些痛点的
就是现在基本所有项目的 ajax 返回的数据也是进行了二次封装，加入了后台在处理业务逻辑时的信息。

</>复制代码 
从返回  data,  变成 了 ｛code: 200, data:{}, err_msg:""｝

如果每一个 ajax 请求回来都要判断 code 是否正确再进行业务逻辑处理或者报错提醒，整个项目下来也太冗余了，

</>复制代码 
$.ajax({
    url: url,
    data: data,
    success: function(data){
        if(data.code == 200) {
            dosomething()
        } else {
        alert(data.err_msg);
        }
    }
})

为了解决这个问题，我们用一个函数再次封装 $.ajax，把这种正确与否判断再处理业务逻辑或者报错提醒提取出来做成公共的部分。

</>复制代码 
util.ajax = function(obj, successFn){
    $.ajax({
        url: obj.url || "/interface",
        data: obj.data || {},
        dataType: obj.dataType || "json",
        type: obj.type || "get",
        success: function(data){
            if (data.code != 200) {
                alert(data.err_msg);
            } else {
                successFn(data.data)
            }
        },
        error: function(err){
            alert(err)
        }
    })
}

promise

用 util.ajax 代替 $.ajax 使用就可以减少了业务错误的判断啦。我们再来完善下，不使用回调的方式，使用 promise 的方式调用, 减少回调，让代码更清晰。

</>复制代码 
util.ajax = function(obj)  {
    var deferred = $.Deferred();
    $.ajax({
        url: obj.url || "/interface",
        data: obj.data || {},
        dataType: obj.dataType || "json",
        type: obj.type || "get",
    }).success(function (data) {
        if (data.code != 200) {
            deferred.reject(data.err_msg);
        } else {
            deferred.resolve(data.data)
        }
    }).error(function (err) {
        deferred.reject("接口出错，请重试");
    })
    return deferred.fail(function (err) {
        alert(err)
    });
}
// 调用
var obj = {
    url: "/interface",
    data: {
        interface_name: "name",
        interface_params: JSON.stringify({})
    }
};
util.ajax(obj)
    .done(function(data){
        dosomething(data)
    })

中间件

这是一个公共的办法，但是有时候我们需要处理差异化啊，我们参考 express 引入一个中间件来解决差异化问题。

</>复制代码 
util.ajax =  function(obj, middleware)  {
    var deferred = $.Deferred();
    $.ajax({
        url: obj.url || "/interface",
        data: obj.data || {},
        dataType: obj.dataType || "json",
        type: obj.type || "get",
    }).success(function (data) {
        if (data.code != 200) {
            deferred.reject(data.err_msg);
        } else {
            deferred.resolve(data.data)
        }
    }).error(function (err) {
        deferred.reject("接口出错，请重试");
    })
    // 添加中间件
    if(!middleware) {
        middleware = function(){};
    }
    return deferred.done(middleware).fail(function (err) {
        message({
            content: err,
            type: "error",
            showLeftIcon: true,
            duration: 5000
        });
    });
}
// 调用
// 调用
var obj = {
    url: "/interface",
    data: {
        interface_name: "name",
        interface_params: JSON.stringify({})
    }
};
var middleware = function(data) {
    data.forEach(function(item){
        item.fullName = item.firstName + item.lastName
    })
}
util.ajax(obj, middleware)
    .done(function(data){
        console.log(data.fullName)
    }).always(function(){})

GPU云服务器云服务器二次封装二次浅封装实践【附源码】一个封装的Ajax类原生js封装ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83822.html

vue 模仿今日头条demo

vue 头条 demo 写在前面总结一下写 demo 过程中遇到的一些问题，方便自己的学习总结！如有错误，还请指正！一直想学习使用 vue ，并准备以后在实际项目使用，之前跟着慕课网黄轶老师敲了一下饿了么商品购买页的demoele效果预览该 demo 借鉴自 hcy1996-github 这个项目，但内部内容，布局风格，完全不同，只为共同学习，共同交流数据接口直接打开今日...

simpleapples 2019-08-21 12:03 评论0 收藏0
Ajax局部页面刷新和History API结合的陷阱

摘要：对于那些老网站或者老项目来说全盘改造成并不现实，于是就有了局部页面刷新这个解决方案。如果不知道局部页面刷新是何物请看这里，这里和这里。但实际上，第一次后退无法还原的内容陷阱，第二次后退页面刷新了一切恢复最初的样子。 ajax在现代网站已经得到非常普遍地应用，主要的好处大家都知道（异步加载数据，不用刷新整个浏览器，更小的数据传输尺寸）。对于那些老网站或者老项目来说全盘改造成ajax并不现...

JasinYip 2019-08-20 10:14 评论0 收藏0
回调、使用Promise封装ajax()、Promise入门

摘要：回调使用封装入门回调是啥看这里回调是什么方应杭知乎是一种特殊的函数，这个函数被作为参数传给另一个函数去调用。回调、使用Promise封装ajax()、Promise入门 1 回调是啥 call a functioncall a function back callback 看这里:Callback（回调）是什么？---方应杭知乎 callback 是一种特殊的函数，这个函数被作为参数...

godlong_X 2019-08-23 10:50 评论0 收藏0
对$.ajax()的二次封装（仅1.55K）

摘要：根据习惯简化了。最最重要实现异步请求结果的缓存和请求的批量中断安装支持直接引入如下函数执行结果生成一个对象，自带个属性，相见文档同时也支持或的引入方式。中断异步请求返回一个对象，每次异步请求都以是缓存其中。 ajaxCache 根据习惯简化了API。最最重要：实现异步请求结果的缓存和请求的批量中断 showImg(http://oaaq2vqkp.bkt.clouddn.com/1.g...

RancherLabs 2019-08-21 17:43 评论0 收藏0