jQuery ajax返回数据的后续处理
简述
在jQuery中ajax默认是异步请求，我们大多数也需要异步请求，比如：
var temp;
$.ajax({
type : "post",
url : 'test.json',
dataType : 'json',
success : function(data) {
temp=data;
}
});
alert(temp);
在上面的例子中，我们获取不到temp，为了解决这个问题，当然也是为了代码复用性，可维护性，我们在项目中通常会对ajax进行二次封装。下面所述内容主要对ajax返回数据的后续处理讲解，对二次封装的其他细节就只做简要描述
回调的形式处理返回数据
1.什么是回调函数
函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。
2.例子
function A(){
alert('A');
}
function B(callback){
alert('B');
callback();
}
B(A);
jQuery中的事件中也体现了回调
$('.btn').click(function(){
alert('点击了')；
});
上述click里的function就是回调函数
3.实现
封装ajax
function Ajax(opt){
//参数初始化
var url = opt.url,
data = opt.data || {},
formatType = opt.formatType || "json",
type = opt.type || "post",
success = opt.callback || null,
failFn = opt.failFn || null,
contentType = "application/x-www-form-urlencoded; charset=UTF-8";
if(type === "post" && formatType === "json"){
data = JSON.stringify(data);
}
if(formatType === "json"){
contentType="application/json";
}
//ajax 主体函数
$.ajax({
type:type,
cache: false,
crossDomain: false,
url:url,
data:data,
contentType:contentType,
dataType:"json",
timeout:30000
}).done(function(rs){ //成功
//成功获取数据
if(rs.resultCode === 1){ //商定成功返回code为1
success && success(rs); //成功函数的回调
}else{
alert(rs.msg); //弹出后端发出的提示信息
failFn && failFn(rs); //失败函数的回调
}
}).fail(function(rs){ //失败
alert("网络异常");
}).always(function(rs){
});
}
调用
var temp;
Ajax({
url:"test.json",
data:{id:1}, //参数
callback:function(rs){ //成功时的回调
temp=rs.data;
},
failFn:function(){ //失败回调
//dosomething
}
})
这是通过回调函数的形式处理返回数据，当然也有不足之处，你可能会陷入回调地狱，像这样：
Ajax({
url:"test.json",
data:{id:1},
callback:function(rs){
Ajax({
url:"test.json",
data:{id:rs.data.id},
callback:function(rs1){
Ajax({
url:"test.json",
data:{id:rs1.data.id},
callback:function(rs2){
Ajax({
url:"test.json",
data:{id:rs2.data.id},
callback:function(rs3){
//dosomething
}
})
//dosomething
}
})
//dosomething
}
})
//dosomething
}
})
这中回调嵌套虽然能够达到目的，但是显得不够优雅，因此有了以下处理方式
promise的形式处理返回数据
1.什么是deferred
.ajax()操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR对象，你没法进行链式操作（success,error参数）；如果高于1.5.0版本，返回的是deferred对象，可以进行链式操作。至于什么是deferred对象，以及它和promise的关系，阮一峰老师的一篇文章做了详细的讲解，戳这里
2.实现
封装ajax
function Ajax(opt){
//参数初始化
var url = opt.url,
data = opt.data || {},
formatType = opt.formatType || "json",
type = opt.type || "post",
contentType = "application/x-www-form-urlencoded; charset=UTF-8";
if(type === "post" && formatType === "json"){
data = JSON.stringify(data);
}
if(formatType === "json"){
contentType="application/json";
}
//ajax 主体函数
return $.ajax({
type:type,
cache: false,
crossDomain: false,
url:url,
data:data,
contentType:contentType,
dataType:"json",
timeout:30000
}).then(function(rs){ //成功
//成功获取数据
var dfd = $.Deferred();
if(rs.resultCode === 1){ //商定成功返回code为
dfd.resolve(rs); //改变Deferred对象的执行状态
}else{
alert(rs.msg); //弹出后端发出的提示信息
dfd.reject(rs); //改变Deferred对象的执行状态
}
return dfd.promise();
},function(){
alert("网络异常");
}).always(function(rs){
});
}
两次ajax封装看起来很不一样，提现在如下：
*使用then代替了done、fail,因为then会返回一个promise对象，then里写了两个function参数相当于第一次封装Ajax中的done和fail方法
*不再拥有回调函数callback和fail，成功时不再执行回调函数，而是改变Deferred对象的执行状态，这种方式可以达到和回调一样的效果
*第一次封装函数没有返回值，第二次封装函数Ajax需要返回一个promise对象（不要把封装函数Ajax的返回值和then里的返回值弄混了）
调用
var temp;
Ajax({
url:"test.json",
data:{id:1}//参数
}).then(function(rs){
temp=rs.data;
},function(rs){
console.log("error");
//dosomething
});
即便多次调用也不会陷入回调地狱
Ajax({
url:"test.json",
data:{id:1}
}).then(function(rs){
return Ajax({
url:"test1.json",
data:{id:rs.data.id}
});
}).then(function(rs1){
return Ajax({
url:"test2.json",
data:{id:rs1.data.id}
});
}).then(function(rs2){
return Ajax({
url:"test3.json",
data:{id:rs2.data.id}
});
}).then(function(){
//dosomething
});
小结
以上通过两种形式展示ajax返回数据的后续处理，对于理解回调函数、deferred和promise有一定的帮助，ajax的二次封装需要根据项目的实际情况做相应调整
