AngularJS 攔截器實現全局$http請求loading效果

日常項目開發中，當前端需要和后端進行數據交互時，為了友好的UI效果，一般都會在前端加個loading的狀態提示（包括進度條或者icon顯示），數據傳輸或交互完成之后，再隱藏/刪除loading提示。

一般簡單的做法就是在每個請求的業務邏輯前添加/顯示loading，交互完成再刪除/隱藏loading。

但是這樣代碼重復度高，每個請求的地方都需要編寫一遍，比較繁瑣。對開發人員來說，write less，do more！最好不過了，可以避免自己漏寫等人為的不確定錯誤。

為此，我們可以利用angularjs攔截器，來實現全局的優化方案。

var myApp = angular.module('myApp', []);  
     myApp.config(["$httpProvider", function ($httpProvider) {   
         $httpProvider.interceptors.push('myInterceptor');  
     }]);  
        
     //loading  
     myApp.factory('myInterceptor', ["$rootScope", function ($rootScope) {  
         var timestampMarker = {  
             request: function (config) { 
          　　　　//start 
                 $rootScope.loading = true;  
                 return config;  
             },  
             response: function (response) { 
　　　　　　　　 　//end 
                $rootScope.loading = false;  
                 return response;  
             }  
         };  
         return timestampMarker;  
     }]);  

 

什么是攔截器–What are Interceptors?

Interceptor(攔截器)在服務端框架中屬於一種比較常見的機制。攔截器提供了一種機制可以使開發者可以定義在一個action(動作)執行的前后執行的代碼，這些代碼可以是在一個action執行前阻止其執行的代碼,也可以是修改目標動作某些行為的代碼.(在AOP（Aspect-Oriented Programming）中攔截器用於在某個方法或字段被訪問之前，進行攔截然后在之前或之后加入某些操作。

$http服務中的攔截器

查看API或是源碼我們可以發現,Angular的實現中通過 httpProvider提供了一個名為interceptors的數組.這個數組接受攔截器服務注冊,通過過程次的注冊最終會形成攔截器鏈.這樣每次在調用http服務的時候,angular都會通過我們定義的攔截點(切面)進行相應的Ajax動作修改.

Angular中如何聲明一個攔截器

//Interceptor declaration
module.factory('httpInterceptor', ['$log', function($log) {
    $log.debug('$log is here to show you that this is a regular factory with injection');
    return { 
        // do something
    };
}]);

如何將聲明的攔截器注冊到$http服務中

// Add the interceptor to $httpProvider.interceptors
module.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('httpInterceptor');
}]);

通過上面的簡單兩個步驟,我們基本就完成了http服務的攔截器編寫與添加.但是上面的代碼片段並不能實際使用,要想真正的實現攔截操作,我們還需要遵循http服務暴露出來的可以進行攔截的點進行相關的代碼編寫.

$httpProvider暴露了那些可以攔截的點?

• request : request方法可以實現攔截請求: 該方法會在 http發送請求到服務器之前執行，因此我們可以在該方法的視線中修改配置或做其他的操作。該方法接收請求配置對象(requestconfigurationobject)作為參數，然后必須返回配置對象或者promise。如果返回無效的配置對象或者promise則會被拒絕，導致http 調用失敗。

• response : response方法可以實現攔截響應: 該方法會在 http接收到從服務器過來的響應之后執行，因此我們可以修改響應報文或做其他操作。該方法接收響應對象(responseobject)作為參數，然后必須返回響應對象或者promise。響應對象包括了請求配置(requestconfiguration)，頭(headers)，狀態(status)和從后台過來的數據(data)。如果返回無效的響應對象或者promise會被拒絕，導致http 調用失敗。

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

• responseError : responseError方法可以實現攔截響應異常: 有時候我們后台調用失敗了。也有可能它被一個請求攔截器拒絕了，或者被上一個響應攔截器中斷了。在這種情況下，響應異常攔截器可以幫助我們恢復后台調用。

對於上面暴露出來的接口使用也是異常的簡單的,我們可以像聲明一個簡單的服務一樣聲明一個$http服務的攔截器,並交由angular的注入機制去使用我們配置的攔截器.

//如同聲明一個Angular服務一樣聲明一個攔截器
module.factory('sessionInjector', ['authService', function (authService){
    return {
        request: function (config){
            if (!authService.isAnonymus) {
                config.headers['x-session-token'] = authService.token;
            }
            return config;
        }
    };
}]);

// 然后將我們聲明的攔截器添加到$httpProvider的攔截器鏈中,之后的服務注入Angular會負責幫我們完善
module.config(['$httpProvider', function ($httpProvider){
    $httpProvider.interceptors.push('sessionInjector');
}]);

 

參考文章：

為Angular內置$http服務添加攔截器