快捷導(dǎo)航

Angular中的interceptors攔截器

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

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

廢話(huà)不多說(shuō)了，直接給大家貼代碼了，具體代碼如下所述；

<!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在A(yíng)ngular中用于簡(jiǎn)化與后臺(tái)的交互過(guò)程，其本質(zhì)上使用XMLHttpRequest或JSONP進(jìn)行與后臺(tái)的數(shù)據(jù)交互。
     在與后臺(tái)的交互過(guò)程中，可能會(huì)對(duì)每條請(qǐng)求發(fā)送到Server之前進(jìn)行預(yù)處理（如加入token），或者是在Server返回?cái)?shù)據(jù)到達(dá)客戶(hù)端還未被處理之前進(jìn)行預(yù)處理（如將非JSON格式數(shù)據(jù)進(jìn)行轉(zhuǎn)換）；
     當(dāng)然還有可能對(duì)在請(qǐng)求和響應(yīng)過(guò)程過(guò)發(fā)生的問(wèn)題進(jìn)行捕獲處理。所以Angular為我們提供了$http攔截器，用來(lái)實(shí)現(xiàn)上述需求。*/
    /*
     $httpProvider中有一個(gè) interceptors 數(shù)組，而所謂攔截器只是一個(gè)簡(jiǎn)單的注冊(cè)到該數(shù)組中的常規(guī)服務(wù)工廠(chǎng)。
     1 首先 創(chuàng)建一個(gè)攔截器服務(wù)工廠(chǎng)
     */
    angular.module('nickApp', [])
        .factory('NickInterceptor', ['$q', function ($q) {
          return {
            // 可選，攔截成功的請(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)用失敗
             */
            request: function (config) {
              // 進(jìn)行預(yù)處理
              // 例如加令牌
              config.headers['Authorization'] = 'token666';
              /*
               Request Headers
               token:token666 //加的令牌
               */
              return config || $q.when(config);
            },
            // 可選，攔截成功的響應(yīng)
            /*
             該方法會(huì)在$http接收到從后臺(tái)過(guò)來(lá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)過(guò)來(lái)的數(shù)據(jù)(data)。
             如果返回?zé)o效的響應(yīng)對(duì)象或者 promise 會(huì)被拒絕，導(dǎo)致$http調(diào)用失敗。
             */
            response: function (response) {
              // 進(jìn)行預(yù)處理
              // 例如 JSON.parse(response)等
              return response || $q.when(reponse);
            },
            // 可選，攔截失敗的請(qǐng)求
            /*
             有時(shí)一個(gè)請(qǐng)求發(fā)送失敗或者被攔截器拒絕了。requestError攔截器會(huì)捕獲那些被上一個(gè)請(qǐng)求攔截器中斷的請(qǐng)求。
             它可以用來(lái)恢復(fù)請(qǐng)求或者有時(shí)可以用來(lái)撤銷(xiāo)請(qǐng)求之前所做的配置，比如關(guān)閉遮罩層，顯示進(jìn)度條，激活按鈕和輸入框之類(lèi)的。
             */
            requestError: function (rejection) {
              // 對(duì)失敗的請(qǐng)求進(jìn)行處理
              // 例如 統(tǒng)一的彈窗提示
              return $q.reject(rejection);
            },
            // 可選，攔截失敗的響應(yīng)
            /*
             有時(shí)候我們后臺(tái)調(diào)用失敗了。也有可能它被一個(gè)請(qǐng)求攔截器拒絕了，或者被上一個(gè)響應(yīng)攔截器中斷了。
             在這種情況下，響應(yīng)異常攔截器可以幫助我們恢復(fù)后臺(tái)調(diào)用。
             */
            responseError: function (rejection) {
              // 對(duì)失敗的響應(yīng)進(jìn)行處理
              // 例如 統(tǒng)一的彈窗提示
              return $q.reject(rejection);
            }
          };
        }])
        /*
         $httpProvider中有一個(gè) interceptors 數(shù)組，而所謂攔截器只是一個(gè)簡(jiǎn)單的注冊(cè)到該數(shù)組中的常規(guī)服務(wù)工廠(chǎng)。
         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攔截器，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: