angular之interceptors攔截器
阿新 • • 發佈：2017-05-15
sta port 按鈕 jsonp 做的 parse 顯示 cto 響應
<!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>
angular之interceptors攔截器