jQuery-實現簡單的Ajax請求封裝

封裝的意義在於復用，在於減少重復的代碼。

我在項目中做了簡單的Ajax請求封裝，實現方式如下：

//封裝Ajax請求
$.extend({
    ajaxDirect:function(url,type,data,success,error){
        if(type.toLowerCase()=='post'){
            data = pack(data)
        }
        $.ajax({
            type: type,
            url: base + url,
            contentType:'application/json',
            data:data,
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("X-Token", sessionStorage.token)
            },
            success: function(data){
                success(data)
            },
            error: function(data){
                error(data)
            },
            dataType: "json"
        })
    }
})

其中的要點為：

1.使用jQ的$.extend函數，則調用時只需用$.ajaxDirect(url,type,data,function(){},function(){})即可，若data無值，則傳空對象過來。

2.pack為JSON.stringify的封裝，即

//對象序列化
function pack(data) {
    return JSON.stringify(data)
}

function unpack(data) {
    return JSON.parse(data)
}

3.該項目在請求時需要傳token，則我在請求時在請求頭部統一加上了token，即

beforeSend: function (XMLHttpRequest) {
      XMLHttpRequest.setRequestHeader("X-Token", sessionStorage.token)
}

4.base為請求的統一前綴，為公共變量，可自定義值。

 

調用示例：

GET請求

$.ajaxDirect("/user/info",'GET',{},
    function (data) {
        //發送成功
    },
    function (data) {
        //發送失敗
    }
)

POST請求

 1 var data = {
 2     password:$('.newPwd').val() 3 } 4 5 $.ajaxDirect("/farmer/farmeruser/changePassword",'POST',data, 6 function(data){ 7 //發送成功 8  }, 9 function(data){ 10 //發送失敗 11  } 12 )

在這個基礎上，我們可以進一步完善封裝的Ajax。

//封裝Ajax請求
$.extend({
    ajaxDirect:function(url,type,data,success,error,requestType){
        if(requestType!=='pic'&&type.toLowerCase()=='post'){
            data = pack(data)
        }
        var request = {
            type: type,
            url: base + url,
            contentType:'application/json',
            data:data,
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("X-Token", sessionStorage.token)
            },
            success: function(data){
                //token過期
                if(data.message==="token過期"){
                    $.ajax(
                        {
                            type: 'POST',
                            url: base+'/refleshToken',
                            contentType:'application/json',
                            data:pack({
                                token:sessionStorage.token
                            }),
                            success: function(data){
                                console.log(data)
                                sessionStorage.token = data.data.token
                                location.reload()
                            },
                            error: function(){
                                $.toast("發送失敗", "text")
                            },
                            dataType: "json"
                        })
                }else{
                    success(data)
                }
            },
            error: function(data){
                error(data)
            },
            dataType: "json"
        }
        if(requestType==='pic'){
            request.cache = false
            request.processData = false
            request.contentType = false
        }

        if(requestType==='login'){
            request.beforeSend = false
        }
        $.ajax(request)
    }
})

上面的代碼相比第一段代碼增加的功能有：

1.增加了POST的大小寫適配

2.增加了token過期后統一請求新的token的接口

3.增加了參數requestType，可傳可不傳，用於區分請求的類型，從而設置請求頭的參數。