2016.06.01 15:07 from—http://www.jianshu.com/p/b6098500f2a9

在工作中往往需要对整个站点的请求做统一处理。

例如:

1.在发送请求之前,添加统一的验证头。

2.请求返回时,捕捉每一个响应,做统一处理(403无权限,500服务器错误)。

在本文中,将展示在简单情况下使用不同方式实现拦截器。


JavaScript (XMLHttpRequest)

假设我们需要在所有请求中加入验证头来确认用户身份,在以下代码中修改XMLHttpRequest原型。

“`

(function(open) {

XMLHttpRequest.prototype.open =function(method, url, async, user, pass) {

this.addEventListener(“readystatechange”,function() {

if(this.readyState == 4)

{

//在这可以获取到response数据,并且修改

console.log(this.status);

}

}  ,false);

open.call(this, method, url, async, user, pass);

//在这添加自定义数据

this.setRequestHeader(“Authorization”,”Token 123″)

};

})(XMLHttpRequest.prototype.open);

“`

DEMO:

varoReq =newXMLHttpRequest();

oReq.open(“get”,”www.example.com”,true);

oReq.send();


JQuery

jquery中有很简单的方法去处理以上问题,在jquery库中封装了一个Http对象。

在拦截发送请求之前可以使用:

$.ajaxSetup({

beforeSend:function(xhr) {

xhr.setRequestHeader(‘Authorization’,’Token 123′)

}

});

在接受到数据后做统一处理

$( document ).ajaxSuccess(function( event, request, settings ) {

console.log(request.status);

});

$( document ).ajaxError(function( event, request, settings ) {

console.log(request.status);

if (request.status == 401) {

alert(“没有权限,请登录。”);

}

});

作者:只有可乐的米店
链接:http://www.jianshu.com/p/b6098500f2a9
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。