interceptors click me ...
<!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中用於簡化與後臺的交互過程,其本質上使用XMLHttpRequest或JSONP進行與後臺的數據交互。 在與後臺的交互過程中,可能會對每條請求發送到Server之前進行預處理(如加入token),或者是在Server返回數據到達客戶端還未被處理之前進行預處理(如將非JSON格式數據進行轉換); 當然還有可能對在請求和響應過程過發生的問題進行捕獲處理。所以Angular為我們提供了$http攔截器,用來實現上述需求。*/ /* $httpProvider中有一個 interceptors 數組,而所謂攔截器只是一個簡單的註冊到該數組中的常規服務工廠。 1 首先 創建一個攔截器服務工廠 */ angular.module('nickApp', []) .factory('NickInterceptor', ['$q', function ($q) { return { // 可選,攔截成功的請求 /* 該方法會在$http發送請求到後臺之前執行,因此你可以修改配置或做其他的操作。 該方法接收請求配置對象(request configuration object)作為參數,然後必須返回配置對象或者promise 。 如果返回無效的配置對象或者 promise 則會被拒絕,導致$http 調用失敗 */ request: function (config) { // 進行預處理 // 例如加令牌 config.headers['Authorization'] = 'token666'; /* Request Headers token:token666 //加的令牌 */ return config || $q.when(config); }, // 可選,攔截成功的響應 /* 該方法會在$http接收到從後臺過來的響應之後執行,因此你可以修改響應或做其他操作。 該方法接收響應對象(response object)作為參數, 然後必須返迴響應對象或者promise。響應對象包括了請求配置(request configuration),頭(headers),狀態(status)和從後臺過來的數據(data)。 如果返回無效的響應對象或者 promise 會被拒絕,導致$http調用失敗。 */ response: function (response) { // 進行預處理 // 例如 JSON.parse(response)等 return response || $q.when(reponse); }, // 可選,攔截失敗的請求 /* 有時一個請求發送失敗或者被攔截器拒絕了。requestError攔截器會捕獲那些被上一個請求攔截器中斷的請求。 它可以用來恢復請求或者有時可以用來撤銷請求之前所做的配置,比如關閉遮罩層,顯示進度條,激活按鈕和輸入框之類的。 */ requestError: function (rejection) { // 對失敗的請求進行處理 // 例如 統一的彈窗提示 return $q.reject(rejection); }, // 可選,攔截失敗的響應 /* 有時候我們後臺調用失敗了。也有可能它被一個請求攔截器拒絕了,或者被上一個響應攔截器中斷了。 在這種情況下,響應異常攔截器可以幫助我們恢復後臺調用。 */ responseError: function (rejection) { // 對失敗的響應進行處理 // 例如 統一的彈窗提示 return $q.reject(rejection); } }; }]) /* $httpProvider中有一個 interceptors 數組,而所謂攔截器只是一個簡單的註冊到該數組中的常規服務工廠。 2 在config方法中,將攔截器加入到$httpProvider.interceptors數組中 */ .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>