拦截Http请求/Jquery【Ajax】

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

例如：

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

   }

});