快速搞定网络请求统一前置处理(jQuery)版
有人说用jQuery的全局ajax事件处理可以搞定,不过注意官方的一句话:
Global events are never fired for cross-domain script or JSONP requests, regardless of the value of global.
另外,全局的ajax事件好像不能中断,并无法满足需求。
最近,有两个项目,项目中都是用jQuery的$.ajax方法来请求后台接口的。后来突然来了一个需求,所有的请求都需要加一个返回数据后的统一处理,例如如果后台返回某个状态的code,需要统一调用原生的方法来弹出登录界面进行登录,登录完成之后回调刷新当前页面,或者进入下面的流程。
最笨的方法就是挨个请求去加入这种处理逻辑。第二笨的办法是封装一个数据处理方法,然后给每个请求的返回里加一句处理调用。这两种方式都是不可取的。那怎么办呢?
把ajax封装一层!
大家要知道,$.ajax 有两种基本的调用方式,一种是 在config里直接指定success,failure处理方法;另一种是promise的处理方式。我们需要分别针对这两种方式进行封装。
普通的请求方式
原先的请求代码:
$.ajax({
url:'http://www.souche.com',
success:function(data){
console.log(data);
},
failure:function(err){
console.log(err);
}
})
封装后的方法,将此方法放到全局文件中,然后把项目中所有的$.ajax 替换成 $.ajaxWithHelper 即可,不推荐直接修改$.ajax的定义。
$.ajaxWithHelper = function(_options){
var success = _options.success;
_options.success = function(data){
if(data.code === 401){
console.log('do something');
}else{
success.call(this,data);
}
};
$.ajax(_options);
}
Promise的请求方式
这种请求的封装可能稍微麻烦,需要搞清楚jQuery的Promise的原理,跟普通的Promise还是很不一样的。
原有代码:
$.ajax({
url:'http://www.souche.com'
}).done(function(data){
console.log(data);
}).fail(function(){
console.log(auguments);
});
改造的请求方法:
$.ajaxWithHelper = function(_config){
var dfd = jQuery.Deferred();
$.ajax(_config).done(function(data){
if(data.code === 401){
console.log("弹出登录");
}else{
dfd.resolve(data);
}
}).fail(function(){
dfd.reject.apply(this,arguments);
});
return dfd;
};
同样,封装后的方法,将此方法放到全局文件中,然后把项目中所有的$.ajax 替换成 $.ajaxWithHelper 即可,不推荐直接修改$.ajax的定义。
具体原理可以自己去研究哈,只是提供一种思路。