快捷導(dǎo)航

Angularjs注入攔截器實現(xiàn)Loading效果

更新時間：2015年12月28日 10:54:04 投稿：mrr

angularjs作為一個全ajax的框架，對于請求，如果頁面上不做任何操作的話，在結(jié)果反回來之前，頁面是沒有任何響應(yīng)的，不像普通的HTTP請求，會有進度條之類

angularjs作為一個全ajax的框架，對于請求，如果頁面上不做任何操作的話，在結(jié)果煩回來之前，頁面是沒有任何響應(yīng)的，不像普通的HTTP請求，會有進度條之類。

什么是攔截器？

$httpProvider 中有一個 interceptors 數(shù)組，而所謂攔截器只是一個簡單的注冊到了該數(shù)組中的常規(guī)服務(wù)工廠。下面的例子告訴你怎么創(chuàng)建一個攔截器:

<!-- 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 數(shù)組:

<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) {
 $httpProvider.interceptors.push('myInterceptor');
}]);

先給大家展示下效果圖：

本文通過對httpProvider注入攔截器實現(xiàn)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;
}]);

攔截器允許你:

通過實現(xiàn) request 方法攔截請求: 該方法會在 $http 發(fā)送請求道后臺之前執(zhí)行，因此你可以修改配置或做其他的操作。該方法接收請求配置對象(request configuration object)作為參數(shù)，然后必須返回配置對象或者 promise 。如果返回無效的配置對象或者 promise 則會被拒絕，導(dǎo)致 $http 調(diào)用失敗。

通過實現(xiàn) response 方法攔截響應(yīng): 該方法會在 $http 接收到從后臺過來的響應(yīng)之后執(zhí)行，因此你可以修改響應(yīng)或做其他操作。該方法接收響應(yīng)對象(response object)作為參數(shù)，然后必須返回響應(yīng)對象或者 promise。響應(yīng)對象包括了請求配置(request configuration)，頭(headers)，狀態(tài)(status)和從后臺過來的數(shù)據(jù)(data)。如果返回無效的響應(yīng)對象或者 promise 會被拒絕，導(dǎo)致 $http 調(diào)用失敗。

通過實現(xiàn) requestError 方法攔截請求異常: 有時候一個請求發(fā)送失敗或者被攔截器拒絕了。請求異常攔截器會俘獲那些被上一個請求攔截器中斷的請求。它可以用來恢復(fù)請求或者有時可以用來撤銷請求之前所做的配置，比如說關(guān)閉進度條，激活按鈕和輸入框什么之類的。

通過實現(xiàn) responseError 方法攔截響應(yīng)異常: 有時候我們后臺調(diào)用失敗了。也有可能它被一個請求攔截器拒絕了，或者被上一個響應(yīng)攔截器中斷了。在這種情況下，響應(yīng)異常攔截器可以幫助我們恢復(fù)后臺調(diào)用。

您可能感興趣的文章: