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

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

微信扫描查看或分享
加入我们