在工作中往往需要對(duì)整個(gè)站點(diǎn)的請(qǐng)求做統(tǒng)一處理。
例如：
1.在發(fā)送請(qǐng)求之前，添加統(tǒng)一的驗(yàn)證頭。
2.請(qǐng)求返回時(shí)，捕捉每一個(gè)響應(yīng)，做統(tǒng)一處理（403無權(quán)限，500服務(wù)器錯(cuò)誤）。
在本文中，將展示在簡單情況下使用不同方式實(shí)現(xiàn)攔截器。
JavaScript (XMLHttpRequest)
假設(shè)我們需要在所有請(qǐng)求中加入驗(yàn)證頭來確認(rèn)用戶身份，在以下代碼中修改XMLHttpRequest原型。
```
(function(open) {
? ? XMLHttpRequest.prototype.open =function(method, url, async, user, pass) {
? ? this.addEventListener("readystatechange",function() {
? ? if(this.readyState == 4)
? ? {
? ? ? ? //在這可以獲取到response數(shù)據(jù)，并且修改
? ? ? ?console.log(this.status);
? ? }
? ?} ?,false);
? ? open.call(this, method, url, async, user, pass);
//在這添加自定義數(shù)據(jù)
? ?this.setRequestHeader("Authorization","Token 123")
? ?};
})(XMLHttpRequest.prototype.open);
```
DEMO：
varoReq =newXMLHttpRequest();
oReq.open("get","www.example.com",true);
oReq.send();
JQuery
jquery中有很簡單的方法去處理以上問題，在jquery庫中封裝了一個(gè)Http對(duì)象。
在攔截發(fā)送請(qǐng)求之前可以使用：
$.ajaxSetup({
? ? beforeSend:function(xhr) {
? ?xhr.setRequestHeader('Authorization','Token 123')
? ?}
});
在接受到數(shù)據(jù)后做統(tǒng)一處理
$( 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("沒有權(quán)限,請(qǐng)登錄。");
? ?}
});
