Angular中的interceptors攔截器

更新時間：2017年06月25日 08:53:09 作者：webNick

這篇文章主要介紹了Angular中的interceptors攔截器,需要的朋友可以參考下

廢話不多說了，直接給大家貼代碼了，具體代碼如下所述；

<!DOCTYPE html>
<html ng-app="nickApp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>interceptors</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <script>
    /*
     $http service在Angular中用于簡化與后臺的交互過程，其本質(zhì)上使用XMLHttpRequest或JSONP進(jìn)行與后臺的數(shù)據(jù)交互。
     在與后臺的交互過程中，可能會對每條請求發(fā)送到Server之前進(jìn)行預(yù)處理（如加入token），或者是在Server返回數(shù)據(jù)到達(dá)客戶端還未被處理之前進(jìn)行預(yù)處理（如將非JSON格式數(shù)據(jù)進(jìn)行轉(zhuǎn)換）；
     當(dāng)然還有可能對在請求和響應(yīng)過程過發(fā)生的問題進(jìn)行捕獲處理。所以Angular為我們提供了$http攔截器，用來實現(xiàn)上述需求。*/
    /*
     $httpProvider中有一個 interceptors 數(shù)組，而所謂攔截器只是一個簡單的注冊到該數(shù)組中的常規(guī)服務(wù)工廠。
     1 首先 創(chuàng)建一個攔截器服務(wù)工廠
     */
    angular.module('nickApp', [])
        .factory('NickInterceptor', ['$q', function ($q) {
          return {
            // 可選，攔截成功的請求
            /*
             該方法會在$http發(fā)送請求到后臺之前執(zhí)行，因此你可以修改配置或做其他的操作。
             該方法接收請求配置對象(request configuration object)作為參數(shù)，然后必須返回配置對象或者promise 。
             如果返回?zé)o效的配置對象或者 promise 則會被拒絕，導(dǎo)致$http 調(diào)用失敗
             */
            request: function (config) {
              // 進(jìn)行預(yù)處理
              // 例如加令牌
              config.headers['Authorization'] = 'token666';
              /*
               Request Headers
               token:token666 //加的令牌
               */
              return config || $q.when(config);
            },
            // 可選，攔截成功的響應(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)。
             如果返回?zé)o效的響應(yīng)對象或者 promise 會被拒絕，導(dǎo)致$http調(diào)用失敗。
             */
            response: function (response) {
              // 進(jìn)行預(yù)處理
              // 例如 JSON.parse(response)等
              return response || $q.when(reponse);
            },
            // 可選，攔截失敗的請求
            /*
             有時一個請求發(fā)送失敗或者被攔截器拒絕了。requestError攔截器會捕獲那些被上一個請求攔截器中斷的請求。
             它可以用來恢復(fù)請求或者有時可以用來撤銷請求之前所做的配置，比如關(guān)閉遮罩層，顯示進(jìn)度條，激活按鈕和輸入框之類的。
             */
            requestError: function (rejection) {
              // 對失敗的請求進(jìn)行處理
              // 例如 統(tǒng)一的彈窗提示
              return $q.reject(rejection);
            },
            // 可選，攔截失敗的響應(yīng)
            /*
             有時候我們后臺調(diào)用失敗了。也有可能它被一個請求攔截器拒絕了，或者被上一個響應(yīng)攔截器中斷了。
             在這種情況下，響應(yīng)異常攔截器可以幫助我們恢復(fù)后臺調(diào)用。
             */
            responseError: function (rejection) {
              // 對失敗的響應(yīng)進(jìn)行處理
              // 例如 統(tǒng)一的彈窗提示
              return $q.reject(rejection);
            }
          };
        }])
        /*
         $httpProvider中有一個 interceptors 數(shù)組，而所謂攔截器只是一個簡單的注冊到該數(shù)組中的常規(guī)服務(wù)工廠。
         2 在config方法中，將攔截器加入到$httpProvider.interceptors數(shù)組中
         */
        .config(['$httpProvider', function ($httpProvider) {
          $httpProvider.interceptors.push('NickInterceptor');
        }])
        .controller('bodyCtl', ['$scope', '$http', function ($scope, $http) {
          $scope.test1 = function () {
            console.log(11);
            $http.get('interceptors.html');
          };
        }])
  </script>
</head>
<body ng-controller="bodyCtl">
<button class="btn" ng-click="test1()">click me</button>
<div ng-view></div>
</body>
</html>

以上所述是小編給大家介紹的Angular中的interceptors攔截器，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: