ajax請求實用的封裝方法

個人身爲一個java後端開發，對js的閉包簡單理解爲跨方法訪問變量值，放到java裏就是方法A能使用方法B中的變量。

今天寫代碼時看到公司之前同事寫的ajax到處都是，沒有任何封裝，需要優化一下。

 

項目中的ajax到處都是這類代碼：

重複多，佔空間，可讀性差

$.ajax({
        type: 'get',
        url: BASE_PATH + '/manage/s01/list?offset=0&limit=1000',
        success: function (result) {
            s01List=result.data.rows;
            create.s01List=groupListMap(s01List,"s03",1,"s04");
            create.s01ListBack=clone(create.s01List);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
        }
    });

 

統一封裝一下： 

放到common.js文件中，通過傳參直接調用，需要前後端協調一致，無法解決異步問題。

 

 

function getHttp(url, fun) {
    $.ajax({
        type: 'get',
        url: BASE_PATH + url,
        success: function (result) {
            //...
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
        }
    });
}

function postHttp(url, data) {
    $.ajax({
        type: 'post',
        url: BASE_PATH + url,
        data: JSON.stringify(data),
        contentType: "application/json",
        success: function (result) {
            if (result.state == 200) {
                //...
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
        }
    });
}

解決異步問題：

利用js的閉包特點，直接寫一個函數去接受異步結果，這樣就極大加強了靈活性。

function initFuntion(result) {
    s01List=result.data.rows;
    create.s01List=groupListMap(s01List,"s03",1,"s04");
    create.s01ListBack=clone(create.s01List);
    console.log(create.s01ListBack);
}


getHttp(BASE_PATH + '/manage/s01/list?offset=0&limit=1000',initFuntion)

 

對於一些ajax進行全局設置：

這個在一些需要前後分離的項目中比較實用，每個請求都需要帶上token信息，並且一些error函數也非常使用

var token = localStorage.getItem("token");

$.ajaxSetup({
	dataType: "json",
	cache: false,
    headers: {
        "token": token
    },
    xhrFields: {
	    withCredentials: true
    },
    complete: function(xhr) {
        //token過期，則跳轉到登錄頁面
        if(xhr.responseJSON.code == 401){
            parent.location.href = baseURL + 'login.html';
        }
    }，
    error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
    }
});

如果用axios更好，axios封裝起來更簡單方便

這裏不進行粘貼了，axios使用更加方便

 

---------------------------------------------------------------------------------------------------------------------------------------------------------

 

今天用java8的拉姆達表達式突然發現forEach和這個js閉包有點像，突然喜歡了這種寫法，function裏的方法結合future很舒服