0

我正在尝试使用此链接上的大致配方创建 AngularJS 拦截器 - https://thinkster.io/interceptors

我的代码如下 -

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

<p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
      $scope.myWelcome = response.data;
  });
});


function tokenInterceptor() {
    return {
        request: function(config) {
            config.xsrfHeaderName = 'myToken';                          
            config.headers['myToken'] = "HelloWorld";
            return config;
        },

        requestError: function(config) {
            return config;                      
        },

        response: function(config) {
            return config;                      
        },

        responseError: function(config) {
            return config;                      
        }                   
    }               
}

app
.factory('tokenInterceptor', tokenInterceptor)
.config(function($httpProvider) {
    $httpProvider.interceptors.push('tokenInterceptor');                
}).run(function($http) {
    $http.get('http://127.0.0.1:8082/customURL.htm')
.then(function(res) {
    console.log("get request to google");                   
});
});             

</script>

<a href="http://www.google.com">GOOGLE</a>

</body>
</html>

tokenInterceptor 函数中的代码仅在 factory.config.run 中的 $http.get(' http://127.0.0.1:8082/customURL.htm ') 调用被执行时运行。发出任何 HTTP 请求时，如何使代码运行？- 例如，当执行此页面上的 google 链接时 -

<a href="http://www.google.com">GOOGLE</a>
4

1 回答 1

0

这是一个非常粗略的例子，但你可以理解主要思想：

    //app.js
            angular.module('testApp', [])
            .config(function($httpProvider) {
                $httpProvider.interceptors.push('myInterceptor');
            })
            .factory('myInterceptor', function($q) {
                var myInterceptor = {
                    request: (config)=>{ console.log('myInterceptor request'); return config;},
                    response: (response)=>{ console.log('myInterceptor response'); return response;},
                    requestError: (rejectReason)=>{ console.log('myInterceptor requestError'); return $q.reject(rejectReason);},
                    responseError: (response)=>{ console.log('myInterceptor responseError'); return $q.reject(response);}
                };
                return myInterceptor;
            })
           .controller('mainController', function($scope, $http){
            $scope.funcGet = ()=>{
               $http.get('http://www.google.com')
               .then(function (response) {
                  console.log('resonce - ', responce);
                });
            }
        })

    //index.html
    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>

    <script src="app.js"></script>
        <body>

        <div ng-app="testApp" ng-controller="mainController"> 
            <input type="button" value="Go" ng-click="funcGet()">
        </div>
        </body>
        </html>
于 2017-05-12T18:20:11.227 回答