快速學(xué)習(xí)AngularJs HTTP響應(yīng)攔截器

更新時(shí)間：2015年12月31日 15:43:12 作者：賴祥燃

任何時(shí)候，如果我們想要為請(qǐng)求添加全局功能，例如身份認(rèn)證、錯(cuò)誤處理等，在請(qǐng)求發(fā)送給服務(wù)器之前或服務(wù)器返回時(shí)對(duì)其進(jìn)行攔截，是比較好的實(shí)現(xiàn)手段

任何時(shí)候，如果我們想要為請(qǐng)求添加全局功能，例如身份認(rèn)證、錯(cuò)誤處理等，在請(qǐng)求發(fā)送給服務(wù)器之前或服務(wù)器返回時(shí)對(duì)其進(jìn)行攔截，是比較好的實(shí)現(xiàn)手段。

angularJs通過攔截器提供了一個(gè)從全局層面進(jìn)行處理的途徑。

四種攔截器

實(shí)現(xiàn) request 方法攔截請(qǐng)求

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

該方法會(huì)在 $http 發(fā)送請(qǐng)求后臺(tái)之前執(zhí)行，因此你可以修改配置或做其他的操作。該方法接收請(qǐng)求配置對(duì)象(request configuration object)作為參數(shù)，然后必須返回配置對(duì)象或者 promise 。如果返回?zé)o效的配置對(duì)象或者 promise 則會(huì)被拒絕，導(dǎo)致 $http 調(diào)用失敗。

實(shí)現(xiàn) requestError 方法攔截請(qǐng)求異常

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

有時(shí)候一個(gè)請(qǐng)求發(fā)送失敗或者被攔截器拒絕了，請(qǐng)求異常攔截器會(huì)俘獲那些被上一個(gè)請(qǐng)求攔截器中斷的請(qǐng)求。它可以用來恢復(fù)請(qǐng)求或者有時(shí)可以用來撤銷請(qǐng)求之前所做的配置，比如說關(guān)閉進(jìn)度條，激活按鈕和輸入框什么之類的。

實(shí)現(xiàn) response 方法攔截響應(yīng)

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

該方法會(huì)在 $http 接收到從后臺(tái)過來的響應(yīng)之后執(zhí)行，因此你可以修改響應(yīng)或做其他操作。該方法接收響應(yīng)對(duì)象(response object)作為參數(shù)，然后必須返回響應(yīng)對(duì)象或者 promise。響應(yīng)對(duì)象包括了請(qǐng)求配置(request configuration)，頭(headers)，狀態(tài)(status)和從后臺(tái)過來的數(shù)據(jù)(data)。如果返回?zé)o效的響應(yīng)對(duì)象或者 promise 會(huì)被拒絕，導(dǎo)致$http 調(diào)用失敗。

實(shí)現(xiàn) responseError 方法攔截響應(yīng)異常

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

有時(shí)候我們后臺(tái)調(diào)用失敗了，也有可能它被一個(gè)請(qǐng)求攔截器拒絕了或者被上一個(gè)響應(yīng)攔截器中斷了。在這種情況下，響應(yīng)異常攔截器可以幫助我們恢復(fù)后臺(tái)調(diào)用。

攔截器核心

攔截服務(wù)工廠

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);
}
};
}]);

注冊(cè)攔截工廠方法

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

示例

對(duì)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);
}
}
};
]);

以上內(nèi)容給大家分享快速學(xué)習(xí)AngularJs HTTP響應(yīng)攔截器的相關(guān)知識(shí)，希望大家喜歡，同時(shí)感謝大家一直以來對(duì)腳本之家網(wǎng)站的支持。

您可能感興趣的文章: