jQuery-实现简单的Ajax请求封装

原创

罗毅豪的博客 2022-06-16 12:41:28 ©著作权

©著作权归作者所有：来自51CTO博客作者罗毅豪的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

封装的意义在于复用，在于减少重复的代码。

我在项目中做了简单的Ajax请求封装，实现方式如下：

1 //封装Ajax请求
 2 $.extend({
 3     ajaxDirect:function(url,type,data,success,error){
 4         if(type.toLowerCase()=='post'){
 5             data = pack(data)
 6         }
 7         $.ajax({
 8             type: type,
 9             url: base + url,
10             contentType:'application/json',
11             data:data,
12             beforeSend: function (XMLHttpRequest) {
13                 XMLHttpRequest.setRequestHeader("X-Token", sessionStorage.token)
14             },
15             success: function(data){
16                 success(data)
17             },
18             error: function(data){
19                 error(data)
20             },
21             dataType: "json"
22         })
23     }
24 })

其中的要点为：

1.使用jQ的$.extend函数，则调用时只需用$.ajaxDirect(url,type,data,function(){},function(){})即可，若data无值，则传空对象过来。

2.pack为JSON.stringify的封装，即

1 //对象序列化
2 function pack(data) {
3     return JSON.stringify(data)
4 }
5 
6 function unpack(data) {
7     return JSON.parse(data)
8 }

3.该项目在请求时需要传token，则我在请求时在请求头部统一加上了token，即

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

4.base为请求的统一前缀，为公共变量，可自定义值。

调用示例：

GET请求

1 $.ajaxDirect("/user/info",'GET',{},
2     function (data) {
3         //发送成功
4     },
5     function (data) {
6         //发送失败
7     }
8 )

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)
    }
})