转载

快速搞定网络请求统一前置处理（jQuery）版

最近，有两个项目，项目中都是用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的定义。

具体原理可以自己去研究哈，只是提供一种思路。

原文 http://f2e.souche.com/blog/kuai-su-gao-ding-wang-luo-qing-qiu-tong-qian-zhi-chu-li-jqueryban/

正文到此结束