Angularjs注入攔截器實現Loading效果_AngularJS

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');}]);//loadingapp.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 方法攔截響應異常: 有時候我們後台調用失敗了。也有可能它被一個請求攔截器拒絕了，或者被上一個響應攔截器中斷了。在這種情況下，響應異常攔截器可以協助我們恢複後台調用。