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(“没有权限,请登录。”);

}

});