angularjs作為一個(gè)全ajax的框架,對(duì)于請(qǐng)求,如果頁(yè)面上不做任何操作的話,在結(jié)果煩回來之前,頁(yè)面是沒有任何響應(yīng)的,不像普通的HTTP請(qǐng)求,會(huì)有進(jìn)度條之類。
什么是攔截器?
$httpProvider 中有一個(gè) interceptors 數(shù)組,而所謂攔截器只是一個(gè)簡(jiǎn)單的注冊(cè)到了該數(shù)組中的常規(guī)服務(wù)工廠。下面的例子告訴你怎么創(chuàng)建一個(gè)攔截器:
<!-- 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');}]);先給大家展示下效果圖:

本文通過對(duì)httpProvider注入攔截器實(shí)現(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');}]);//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;}]);攔截器允許你:
通過實(shí)現(xiàn) request 方法攔截請(qǐng)求: 該方法會(huì)在 $http 發(fā)送請(qǐng)求道后臺(tái)之前執(zhí)行,因此你可以修改配置或做其他的操作。該方法接收請(qǐng)求配置對(duì)象(request configuration object)作為參數(shù),然后必須返回配置對(duì)象或者 promise 。如果返回?zé)o效的配置對(duì)象或者 promise 則會(huì)被拒絕,導(dǎo)致 $http 調(diào)用失敗。
通過實(shí)現(xiàn) response 方法攔截響應(yīng): 該方法會(huì)在 $http 接收到從后臺(tái)過來的響應(yīng)之后執(zhí)行,因此你可以修改響應(yīng)或做其他操作。該方法接收響應(yīng)對(duì)象(response object)作為參數(shù),然后必須返回響應(yīng)對(duì)象或者 promise。響應(yīng)對(duì)象包括了請(qǐng)求配置(request configuration),頭(headers),狀態(tài)(status)和從后臺(tái)過來的數(shù)據(jù)(data)。如果返回?zé)o效的響應(yīng)對(duì)象或者 promise 會(huì)被拒絕,導(dǎo)致 $http 調(diào)用失敗。
通過實(shí)現(xiàn) requestError 方法攔截請(qǐng)求異常: 有時(shí)候一個(gè)請(qǐng)求發(fā)送失敗或者被攔截器拒絕了。請(qǐng)求異常攔截器會(huì)俘獲那些被上一個(gè)請(qǐng)求攔截器中斷的請(qǐng)求。它可以用來恢復(fù)請(qǐng)求或者有時(shí)可以用來撤銷請(qǐng)求之前所做的配置,比如說關(guān)閉進(jìn)度條,激活按鈕和輸入框什么之類的。
通過實(shí)現(xiàn) responseError 方法攔截響應(yīng)異常: 有時(shí)候我們后臺(tái)調(diào)用失敗了。也有可能它被一個(gè)請(qǐng)求攔截器拒絕了,或者被上一個(gè)響應(yīng)攔截器中斷了。在這種情況下,響應(yīng)異常攔截器可以幫助我們恢復(fù)后臺(tái)調(diào)用。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注