二次封裝 query ajax 辦法

combine發表於2017-07-03
封裝

前言

在我們前端處理資料的時候免不了要 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(){})

相關文章