When does an AngularJS interceptor get called?

Question

When does an AngularJS interceptor get called?

770 views Asked by lenniekid At 12 May 2017 at 15:23

I am trying to create an AngularJS interceptor using roughly the recipe at this link - https://thinkster.io/interceptors

My code is below -

<!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>

The code inside tokenInterceptor function runs only when the $http.get('http://127.0.0.1:8082/customURL.htm') call inside factory.config.run gets executed. How do I make the code run when any HTTP request is made? - for example when the link to google on this page is executed -

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

Original Q&A

There are 1 answers

**Sergaros** · Answer 1 · 2017-05-12 18:20:11

This is very rough example but you can understand main idea:

    //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>

TechQA.

When does an AngularJS interceptor get called?

There are 1 answers

Related Questions in ANGULARJS

Related Questions in INTERCEPTOR

Related Questions in ANGULAR-HTTP-INTERCEPTORS

Related Questions in ANGULAR-FACTORY

Popular Questions

Popular Tags

Trending Questions