欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Angular中的interceptors拦截器

程序员文章站 2022-11-19 21:07:52
废话不多说了，直接给大家贴代码了，具体代码如下所述； ...

废话不多说了，直接给大家贴代码了，具体代码如下所述；

<!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中用于简化与后台的交互过程，其本质上使用xmlhttprequest或jsonp进行与后台的数据交互。
     在与后台的交互过程中，可能会对每条请求发送到server之前进行预处理（如加入token），或者是在server返回数据到达客户端还未被处理之前进行预处理（如将非json格式数据进行转换）；
     当然还有可能对在请求和响应过程过发生的问题进行捕获处理。所以angular为我们提供了$http拦截器，用来实现上述需求。*/
    /*
     $httpprovider中有一个 interceptors 数组，而所谓拦截器只是一个简单的注册到该数组中的常规服务工厂。
     1 首先 创建一个拦截器服务工厂
     */
    angular.module('nickapp', [])
        .factory('nickinterceptor', ['$q', function ($q) {
          return {
            // 可选，拦截成功的请求
            /*
             该方法会在$http发送请求到后台之前执行，因此你可以修改配置或做其他的操作。
             该方法接收请求配置对象(request configuration object)作为参数，然后必须返回配置对象或者promise 。
             如果返回无效的配置对象或者 promise 则会被拒绝，导致$http 调用失败
             */
            request: function (config) {
              // 进行预处理
              // 例如加令牌
              config.headers['authorization'] = 'token666';
              /*
               request headers
               token:token666 //加的令牌
               */
              return config || $q.when(config);
            },
            // 可选，拦截成功的响应
            /*
             该方法会在$http接收到从后台过来的响应之后执行，因此你可以修改响应或做其他操作。
             该方法接收响应对象(response object)作为参数，
             然后必须返回响应对象或者promise。响应对象包括了请求配置(request configuration)，头(headers)，状态(status)和从后台过来的数据(data)。
             如果返回无效的响应对象或者 promise 会被拒绝，导致$http调用失败。
             */
            response: function (response) {
              // 进行预处理
              // 例如 json.parse(response)等
              return response || $q.when(reponse);
            },
            // 可选，拦截失败的请求
            /*
             有时一个请求发送失败或者被拦截器拒绝了。requesterror拦截器会捕获那些被上一个请求拦截器中断的请求。
             它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置，比如关闭遮罩层，显示进度条，激活按钮和输入框之类的。
             */
            requesterror: function (rejection) {
              // 对失败的请求进行处理
              // 例如 统一的弹窗提示
              return $q.reject(rejection);
            },
            // 可选，拦截失败的响应
            /*
             有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了，或者被上一个响应拦截器中断了。
             在这种情况下，响应异常拦截器可以帮助我们恢复后台调用。
             */
            responseerror: function (rejection) {
              // 对失败的响应进行处理
              // 例如 统一的弹窗提示
              return $q.reject(rejection);
            }
          };
        }])
        /*
         $httpprovider中有一个 interceptors 数组，而所谓拦截器只是一个简单的注册到该数组中的常规服务工厂。
         2 在config方法中，将拦截器加入到$httpprovider.interceptors数组中
         */
        .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拦截器，希望对大家有所帮助

上一篇： Laravel5.2使用Captcha生成验证码实现登录（session巨坑）

下一篇： 世界十大强大驱逐舰，阿利伯克仅居第三，中国海军博得榜眼

推荐阅读