二次封裝 query ajax 辦法

zr_hebo 發(fā)布于2019-08-20 17:44 / 2334人閱讀

摘要：本次二次封裝，參考可以添加中間件處理數(shù)據(jù)，返回對(duì)象，減少回調(diào)，寫(xiě)更加簡(jiǎn)潔優(yōu)雅。痛點(diǎn)但是在項(xiàng)目中使用它還是有一些痛點(diǎn)的就是現(xiàn)在基本所有項(xiàng)目的返回的數(shù)據(jù)也是進(jìn)行了二次封裝，加入了后臺(tái)在處理業(yè)務(wù)邏輯時(shí)的信息。

前言

在我們前端處理數(shù)據(jù)的時(shí)候免不了要 ajax 與后臺(tái)通信， ajax 是通過(guò) XMLHttpRequest 對(duì)象與服務(wù)器進(jìn)行通信的， jquery 在 XMLHttpReaquest 的基礎(chǔ)上封裝了 $.ajax 辦法進(jìn)行通信， $.ajax 辦法實(shí)用性非常強(qiáng)，又非常簡(jiǎn)單易用。本次二次封裝 query ajax，參考 express 可以添加中間件處理數(shù)據(jù)，返回 Promise（Defferd）對(duì)象，減少回調(diào)，寫(xiě) ajax 更加簡(jiǎn)潔、優(yōu)雅。

$.ajax({
    url: url,
    data: data,
    dataType: "json",
    type: "get",
    success: new Function(){},
    error: new Function(){},
    .......
})

大部分的時(shí)候我們只需要傳入 url 和 data，就可以獲取到我們想到的數(shù)據(jù)了。

痛點(diǎn)

但是在項(xiàng)目中使用 $.ajax, 它還是有一些痛點(diǎn)的
就是現(xiàn)在基本所有項(xiàng)目的 ajax 返回的數(shù)據(jù)也是進(jìn)行了二次封裝，加入了后臺(tái)在處理業(yè)務(wù)邏輯時(shí)的信息。

從返回  data,  變成 了 ｛code: 200, data:{}, err_msg:""｝

如果每一個(gè) ajax 請(qǐng)求回來(lái)都要判斷 code 是否正確再進(jìn)行業(yè)務(wù)邏輯處理或者報(bào)錯(cuò)提醒，整個(gè)項(xiàng)目下來(lái)也太冗余了，

$.ajax({
    url: url,
    data: data,
    success: function(data){
        if(data.code == 200) {
            dosomething()
        } else {
        alert(data.err_msg);
        }
    }
})

為了解決這個(gè)問(wèn)題，我們用一個(gè)函數(shù)再次封裝 $.ajax，把這種正確與否判斷再處理業(yè)務(wù)邏輯或者報(bào)錯(cuò)提醒提取出來(lái)做成公共的部分。

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 使用就可以減少了業(yè)務(wù)錯(cuò)誤的判斷啦。我們?cè)賮?lái)完善下，不使用回調(diào)的方式，使用 promise 的方式調(diào)用, 減少回調(diào)，讓代碼更清晰。

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("接口出錯(cuò)，請(qǐng)重試");
    })
    return deferred.fail(function (err) {
        alert(err)
    });
}


// 調(diào)用
var obj = {
    url: "/interface",
    data: {
        interface_name: "name",
        interface_params: JSON.stringify({})
    }
};
util.ajax(obj)
    .done(function(data){
        dosomething(data)
    })

中間件

這是一個(gè)公共的辦法，但是有時(shí)候我們需要處理差異化啊，我們參考 express 引入一個(gè)中間件來(lái)解決差異化問(wèn)題。

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("接口出錯(cuò)，請(qǐng)重試");
    })

    // 添加中間件
    if(!middleware) {
        middleware = function(){};
    }
    return deferred.done(middleware).fail(function (err) {
        message({
            content: err,
            type: "error",
            showLeftIcon: true,
            duration: 5000
        });
    });
}

// 調(diào)用
// 調(diào)用
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(){})