CODEWITHSUNDEEP
angularjs
nishant singh
nishant singh

Reputation: 3

How to use interceptors in Angular js 1.6.7?

I am trying to make a small application using ANGULAR JS 1.6.7 and i am trying to use interceptors to intercept the http calls for my application. Here is the for interceptor:

angular.module('movieApp').factory('MovieInterceptor',function(){
    var obj = {};
    obj.request=function(config){
        config.url=config.url+'&api_key=dad844342353fc72ac9b99590cb7c78d';
        console.log(config.url);
        return config;
    }
    obj.requestError=function(config){
        console.log(config);
        return config;
    }
    obj.response=function(config){
        console.log(config);
        return config;
    }
    obj.responseError=function(config){
        console.log(config);
        return config;
    }

});
angular.module('movieApp').config(function($httpProvider){
$httpProvider.interceptors.push('MovieInterceptor');
})

Here is the code for service making http call:

angular.module('movieApp').service("MovieService",function($http,$q){
      this.getPopularMovies=function(){
        var obj=$q.defer();
        $http.get('https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc').then(function(res){
            console.log('The response is ',res.data.results)
            obj.resolve(res.data.results);
        })
        .catch(function(err){
            console.log('the error is ',err)
            obj.reject(err);
        })
        return obj.promise;
    }
})

Last is the Html file just to show i have included the inerceptor file as well as the service file:

<html>
<head>
<script src="./bower_components/angular/angular.min.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./assests/js/app.js"></script>

 <script src="./assests/js/interceptors/movie.interceptor.js"></script>
<script src="./assests/js/services/movie.service.js"></script>

<script src="./assests/js/routing.js"></script>

<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="./assests/style.css"></link>
</head>
<body ng-app="movieApp">
<div class="container">

<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h1>Search Movie</h1>
<form>
<div class="col-lg-10">
<input class="form-control" type="text" name="search" placeholder="search"> 
</div>
<div class="col-lg-2">
<button class="btn btn-primary">Search</button>
</div>
</form>
</div>
</div>
</div>

<div class="col-lg-12">
<a ui-sref="home">Home</a>
<ui-view></ui-view>
</div>



</body>
</html>

Now the problem is error is coming in browser's console as :

angular.js:88 Uncaught Error: [$injector:undef] http://errors.angularjs.org/1.6.7/$injector/undef?p0=MovieInterceptor at angular.js:88 at Object.$get (angular.js:4932) at Object.invoke (angular.js:5097) at angular.js:4884 at Object.d [as get] (angular.js:5038) at angular.js:11641 at p (angular.js:408) at Ff.$get (angular.js:11639) at Object.invoke (angular.js:5097) at angular.js:4884

any idea how to fix this ? Any suggestions would be appreciated. Thanks

Upvotes: 0

Views: 564

Answers (1)

georgeawg
georgeawg

Reputation: 48948

Simply click in the error https://docs.angularjs.org/error/$injector/undef?p0=MovieInterceptor -- it explains the error.

It is important to return something from the factory constructor.

angular.module('movieApp').factory('MovieInterceptor',function(){
    var obj = {};
    obj.request=function(config){
        config.url=config.url+'&api_key=dad844342353fc72ac9b99590cb7c78d';
        console.log(config.url);
        return config;
    }
    obj.requestError=function(config){
        console.log(config);
        ̶r̶e̶t̶u̶r̶n̶ throw config;
    }
    obj.response=function(config){
        console.log(config);
        return config;
    }
    obj.responseError=function(config){
        console.log(config);
        ̶r̶e̶t̶u̶r̶n̶ throw config;
    }

   //IMPORTANT
    ̲r̲e̲t̲u̲r̲n̲ ̲o̲b̲j̲;̲    
});

Also it is important to re-throw errors, otherwise they will be converted from rejections to successful promises,

Also don't use a defered anti-pattern:

angular.module('movieApp').service("MovieService",function($http,$q){
      this.getPopularMovies=function(){
        ̶ ̶v̶a̶r̶ ̶o̶b̶j̶=̶$̶q̶.̶d̶e̶f̶e̶r̶(̶)̶;̶            
         ͟r͟e͟t͟u͟r͟n͟ $http.get('https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc').then(function(res){
            console.log('The response is ',res.data.results)
            ̶o̶b̶j̶.̶r̶e̶s̶o̶l̶v̶e̶(̶r̶e̶s̶.̶d̶a̶t̶a̶.̶r̶e̶s̶u̶l̶t̶s̶)̶;̶
            return res.data.results;
        })
        .catch(function(err){
            console.log('the error is ',err)
            ̶o̶b̶j̶.̶r̶e̶j̶e̶c̶t̶(̶e̶r̶r̶)̶;̶
            throw err;
        })
        ̶r̶e̶t̶u̶r̶n̶ ̶o̶b̶j̶.̶p̶r̶o̶m̶i̶s̶e̶;̶
    }
})

For more information, see You're Missing the Point of Promises

Upvotes: 1

Related Questions