廢話不多說(shuō)了，直接給大家貼代碼了，具體代碼如下所述；
<!DOCTYPE html><html ng-app="nickApp"><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>interceptors</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> /* $http service在Angular中用于簡(jiǎn)化與后臺(tái)的交互過(guò)程，其本質(zhì)上使用XMLHttpRequest或JSONP進(jìn)行與后臺(tái)的數(shù)據(jù)交互。 在與后臺(tái)的交互過(guò)程中，可能會(huì)對(duì)每條請(qǐng)求發(fā)送到Server之前進(jìn)行預(yù)處理（如加入token），或者是在Server返回?cái)?shù)據(jù)到達(dá)客戶(hù)端還未被處理之前進(jìn)行預(yù)處理（如將非JSON格式數(shù)據(jù)進(jìn)行轉(zhuǎn)換）； 當(dāng)然還有可能對(duì)在請(qǐng)求和響應(yīng)過(guò)程過(guò)發(fā)生的問(wèn)題進(jìn)行捕獲處理。所以Angular為我們提供了$http攔截器，用來(lái)實(shí)現(xiàn)上述需求。*/ /* $httpProvider中有一個(gè) interceptors 數(shù)組，而所謂攔截器只是一個(gè)簡(jiǎn)單的注冊(cè)到該數(shù)組中的常規(guī)服務(wù)工廠。 1 首先 創(chuàng)建一個(gè)攔截器服務(wù)工廠 */ angular.module('nickApp', []) .factory('NickInterceptor', ['$q', function ($q) { return { // 可選，攔截成功的請(qǐng)求 /* 該方法會(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)用失敗 */ request: function (config) { // 進(jìn)行預(yù)處理 // 例如加令牌 config.headers['Authorization'] = 'token666'; /* Request Headers token:token666 //加的令牌 */ return config || $q.when(config); }, // 可選，攔截成功的響應(yīng) /* 該方法會(huì)在$http接收到從后臺(tái)過(guò)來(lá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)過(guò)來(lái)的數(shù)據(jù)(data)。 如果返回?zé)o效的響應(yīng)對(duì)象或者 promise 會(huì)被拒絕，導(dǎo)致$http調(diào)用失敗。 */ response: function (response) { // 進(jìn)行預(yù)處理 // 例如 JSON.parse(response)等 return response || $q.when(reponse); }, // 可選，攔截失敗的請(qǐng)求 /* 有時(shí)一個(gè)請(qǐng)求發(fā)送失敗或者被攔截器拒絕了。requestError攔截器會(huì)捕獲那些被上一個(gè)請(qǐng)求攔截器中斷的請(qǐng)求。 它可以用來(lái)恢復(fù)請(qǐng)求或者有時(shí)可以用來(lái)撤銷(xiāo)請(qǐng)求之前所做的配置，比如關(guān)閉遮罩層，顯示進(jìn)度條，激活按鈕和輸入框之類(lèi)的。 */ requestError: function (rejection) { // 對(duì)失敗的請(qǐng)求進(jìn)行處理 // 例如 統(tǒng)一的彈窗提示 return $q.reject(rejection); }, // 可選，攔截失敗的響應(yīng) /* 有時(shí)候我們后臺(tái)調(diào)用失敗了。也有可能它被一個(gè)請(qǐng)求攔截器拒絕了，或者被上一個(gè)響應(yīng)攔截器中斷了。 在這種情況下，響應(yīng)異常攔截器可以幫助我們恢復(fù)后臺(tái)調(diào)用。 */ responseError: function (rejection) { // 對(duì)失敗的響應(yīng)進(jìn)行處理 // 例如 統(tǒng)一的彈窗提示 return $q.reject(rejection); } }; }]) /* $httpProvider中有一個(gè) interceptors 數(shù)組，而所謂攔截器只是一個(gè)簡(jiǎn)單的注冊(cè)到該數(shù)組中的常規(guī)服務(wù)工廠。 2 在config方法中，將攔截器加入到$httpProvider.interceptors數(shù)組中 */ .config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push('NickInterceptor'); }]) .controller('bodyCtl', ['$scope', '$http', function ($scope, $http) { $scope.test1 = function () { console.log(11); $http.get('interceptors.html'); }; }]) </script></head><body ng-controller="bodyCtl"><button class="btn" ng-click="test1()">click me</button><div ng-view></div></body></html>以上所述是小編給大家介紹的Angular中的interceptors攔截器，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
