封装的意义在于复用,在于减少重复的代码。
我在项目中做了简单的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为请求的统一前缀,为公共变量,可自定义值。