快速搞定网络请求统一前置处理（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的定义。

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