快速學習AngularJs HTTP回應攔截器_AngularJS

任何時候，如果我們想要為請求添加全域功能，例如身份認證、錯誤處理等，在請求發送給伺服器之前或伺服器返回時對其進行攔截，是比較好的實現手段。

angularJs透過攔截器提供了一個從全局層面進行處理的途徑。

四種攔截器

實作 request 方法攔截請求

request: function(config) {
// do something on request success
return config || $q.when(config);
} 

該方法會在 $http 發送請求後台之前執行，因此你可以修改配置或做其他的操作。此方法接收請求配置物件(request configuration object)作為參數，然後必須傳回配置物件或 promise 。如果傳回無效的配置物件或 promise 則會被拒絕，導致 $http 呼叫失敗。

實作 requestError 方法攔截請求異常

requestError: function(rejection) {
　　// do something on request error　　return $q.reject(rejection);
} 

有時候一個請求發送失敗或被攔截器拒絕了，請求異常攔截器會俘獲那些被上一個請求攔截器中斷的請求。它可以用來恢復請求或有時可以用來撤銷請求之前所做的配置，比如說關閉進度條，激活按鈕和輸入框什麼之類的。

實作 response 方法攔截回應

response: function(response) {
　　// do something on response success
return response || $q.when(response);} 

該方法會在 $http 接收到從後台過來的回應之後執行，因此你可以修改回應或做其他操作。此方法接收回應物件(response object)作為參數，然後必須傳回回應物件或 promise。回應物件包括了請求配置(request configuration)，頭(headers)，狀態(status)和從後台過來的資料(data)。如果傳回無效的回應物件或 promise 會被拒絕，導致$http 呼叫失敗。

實作 responseError 方法攔截回應異常

responseError: function(rejection) {
// do something on response error　　return $q.reject(rejection);
} 

有時候我們後台呼叫失敗了，也有可能它被一個請求攔截器拒絕了或被上一個回應攔截器中斷了。在這種情況下，響應異常攔截器可以幫助我們恢復後台呼叫。

攔截器核心

攔截服務工廠

var app = angular.module("ajaxHttp", []);
app.factory("httpInterceptor", [ "$q", "$rootScope", function($q, $rootScope) {
return {
request: function(config) {
// do something on request success
return config || $q.when(config);
},
　　 requestError: function(rejection) {
　　　　 // do something on request error
　　　　 return $q.reject(rejection)
　　 },
response: function(response) {
// do something on response success
return response || $q.when(response);
},
responseError : function(rejection) {
// do something on response error
return $q.reject(rejection);
}
};
}]); 

註冊攔截工廠方法

app.config(["$httpProvider", function($httpProvider) {
　　$httpProvider.interceptors.push("httpInterceptor");
}]); 

範例

對401，404的攔截處理

app.config(["$httpProvider", function($httpProvider) { 
$httpProvider.interceptors.push('httpInterceptor'); 
}]); 
app.factory("httpInterceptor", ["$q", "$injector", function($q, $injector) {
return {
"responseError": function(response) {
if (response.status == 401) {
var rootScope = $injector.get('$rootScope');
var state = $injector.get('$rootScope').$state.current.name;
rootScope.stateBeforLogin = state;
rootScope.$state.go("login");
return $q.reject(response);
}
else if (response.status === 404) {
console.log("404!");
return $q.reject(response);
}
}
};
]);

以上內容給大家分享快速學習AngularJs HTTP回應攔截器 的相關知識，希望大家喜歡，同時感謝大家一直以來對腳本之家網站的支持。