JQ实现简单的Ajax请求封装

Posted 2020-11-23 罗毅豪

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

我在项目中做了简单的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", localStorage.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", localStorage.token)
3 }

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