angularjs作為一個全ajax的框架，對於請求，如果頁面上不做任何操作的話，在結果煩回來之前，頁面是沒有任何響應的，不像普通的HTTP請求，會有進度條之類。
什麼是攔截器？
$httpProvider 中有一個 interceptors 數組，而所謂攔截器只是一個簡單的註冊到了該數組中的常規服務工廠。下面的範例告訴你怎麼建立一個攔截器:
<!-- lang: js -->
module.factory('myInterceptor', ['$log', function($log) {
$log.debug('$log is here to show you that this is a regular factory with injection');
var myInterceptor = {
....
....
....
};
return myInterceptor;
}]);然後透過它的名字加入 $httpProvider.interceptors 陣列:
<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('myInterceptor');
}]);先給大家看下效果圖：
本文透過對httpProvider注入攔截器來實現loading。
html代碼
<div class="loading-modal modal" ng-if="loading"> <div class="loading"> <img src="<?=$this->module->getAssetsUrl()?>/img/loading.gif" alt=""/><span ng-bind="loading_text"></span> </div> </div>
css代碼
.modal {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.loading {
position: absolute;
top: 50%;
background: white;
#solution> .border-radius(8px);
width: 160px;
height: 72px;
left: 50%;
margin-top: -36px;
margin-left: -80px;
text-align: center;
img {
margin-top: 12px;
text-align: center;
}
span {
display: block;
}
}js程式碼
app.config(["$routeProvider", "$httpProvider", function ($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl: "/views/reminder/index.html",
controller: "IndexController"
});
$routeProvider.when('/create', {
templateUrl: "/views/reminder/item/create.html",
controller: "ItemCreateController"
});
$routeProvider.otherwise({redirectTo: '/'});
$httpProvider.interceptors.push('timestampMarker');
}]);
//loading
app.factory('timestampMarker', ["$rootScope", function ($rootScope) {
var timestampMarker = {
request: function (config) {
$rootScope.loading = true;
config.requestTimestamp = new Date().getTime();
return config;
},
response: function (response) {
// $rootScope.loading = false;
response.config.responseTimestamp = new Date().getTime();
return response;
}
};
return timestampMarker;
}]);攔截器允許你:
透過實作 request 方法攔截請求: 該方法會在 $http 發送請求道後台之前執行，因此你可以修改設定或做其他的操作。此方法接收請求配置物件(request configuration object)作為參數，然後必須傳回配置物件或 promise 。如果傳回無效的配置物件或 promise 則會被拒絕，導致 $http 呼叫失敗。
透過實作 response 方法攔截回應: 此方法會在 $http 接收到從背景過來的回應之後執行，因此你可以修改回應或做其他操作。此方法接收回應物件(response object)作為參數，然後必須傳回回應物件或 promise。回應物件包括了請求配置(request configuration)，頭(headers)，狀態(status)和從後台過來的資料(data)。如果傳回無效的回應物件或 promise 會被拒絕，導致 $http 呼叫失敗。
透過實作 requestError 方法攔截請求異常: 有時候一個請求發送失敗或被攔截器拒絕了。請求異常攔截器會俘虜那些被上一個請求攔截器中斷的請求。它可以用來恢復請求或有時可以用來撤銷請求之前所做的配置，比如說關閉進度條，激活按鈕和輸入框什麼之類的。
透過實作 responseError 方法攔截回應異常: 有時候我們後台呼叫失敗了。也有可能它被一個請求攔截器拒絕了，或是被上一個回應攔截器中斷了。在這種情況下，響應異常攔截器可以幫助我們恢復後台呼叫。
