在工作中往往需要對整個站點的請求做統(tǒng)一處理巍棱。
例如:
1.在發(fā)送請求之前,添加統(tǒng)一的驗證頭蛋欣。
2.請求返回時航徙,捕捉每一個響應(yīng),做統(tǒng)一處理(403無權(quán)限陷虎,500服務(wù)器錯誤)到踏。
在本文中,將展示在簡單情況下使用不同方式實現(xiàn)攔截器尚猿。
JavaScript (XMLHttpRequest)
假設(shè)我們需要在所有請求中加入驗證頭來確認用戶身份窝稿,在以下代碼中修改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庫中封裝了一個Http對象。
在攔截發(fā)送請求之前可以使用:
$.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)限,請登錄庄萎。");
? ?}
});