媒介

在我们前端处置惩罚数据的时刻免不了要 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(){})