二次封装 query ajax 办法

前言

在咱们前端处理数据的时候免不了要 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(){})