AngularJS Interceptor TypeError: Cannot read property 'headers' of undefined

Question

I am Getting this Error for unknown reasons while trying to implement a AJAX Spinner loading code.

I don't understand where the header should be defined. I did console.log(config) but I can see headers: accept: text/html value there.

Below is my Code:

/**
* Spinner Service
*/

//Spinner Constants
diary.constant('START_REQUEST','START_REQUEST');
diary.constant('END_REQUEST','END_REQUEST');

//Register the interceptor service
diary.factory('ajaxInterceptor', ['$injector','START_REQUEST', 'END_REQUEST', function ($injector, START_REQUEST, END_REQUEST) {
    var $http,
    $rootScope,
    myAjaxInterceptor = {
        request: function (config) {
            $http = $http || $injector.get('$http');
            if ($http.pendingRequests.length < 1) {
                console.log(config);
                $rootScope = $rootScope || $injector.get('$rootScope');
                $rootScope.$broadcast(START_REQUEST);
            }
        }
    };

    return myAjaxInterceptor;
}]);

diary.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push('ajaxInterceptor');
}]);

No Line Number is show by angular::: ====== TypeError: Cannot read property 'headers' of undefined at $get.serverRequest (angular.js:9366) at processQueue (angular.js:13248) at angular.js:13264 at Scope.$get.Scope.$eval (angular.js:14466) at Scope.$get.Scope.$digest (angular.js:14282) at Scope.$get.Scope.$apply (angular.js:14571) at bootstrapApply (angular.js:1455) at Object.invoke (angular.js:4203) at doBootstrap (angular.js:1453) at bootstrap (angular.js:1473) — ChanX
– ChanX, Commented Mar 29, 2015 at 10:07

Quidam · Accepted Answer · 2015-10-14 12:31:41Z

12

I think I have the solution.

I've had the same problem under an AngularJS project where an interceptor is exactly defined the same as yours (https://docs.angularjs.org/api/ng/service/$http#interceptors)

To shorten, an interceptor catch the config and have to return it. And you forgot to.

So that would be:

request: function (config) {
    $http = $http || $injector.get('$http');
    if ($http.pendingRequests.length < 1) {
        $rootScope = $rootScope || $injector.get('$rootScope');
        $rootScope.$broadcast(START_REQUEST);
    }
    return config;
}

edited Oct 14, 2015 at 12:31

answered Aug 17, 2015 at 14:27

Quidam

2093 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tushar Tyagi · Accepted Answer · 2017-03-31 13:34:27Z

1

Here you have a full sample about how to implement a spinner using interceptors (wrapping the $rootScope in a service for better code readibility).

http://lemoncode.net/2013/07/31/angularjs-found-great-solution-to-display-ajax-spinner-loading-widget/

As you pointed out, this is deprecated (I have to update the post), the current structure I'm using (simplified inner code). I think the best could be to start from a plunker, maybe it has nothing to do with the way tou are implementing (let me search for a seed plunkr)

myapp.factory('httpInterceptor', ['$q', '$injector',
    function ($q, $injector) {

    return {
      'request': function(config) {
         // request your $rootscope messaging should be here?
        return config;
      },

     'requestError': function(rejection) {
        // request error your $rootscope messagin should be here?
        return $q.reject(rejection);
      },


      'response': function(response) {
        // response your $rootscope messagin should be here?

        return response;
      },

     'responseError': function(rejection) {
        // response error your $rootscope messagin should be here?

        return $q.reject(rejection);

      }
    };
  }
]);

edited Mar 31, 2017 at 13:34

Tushar Tyagi

2112 silver badges12 bronze badges

answered Mar 29, 2015 at 10:33

Braulio

1,72814 silver badges24 bronze badges

3 Comments

ChanX Over a year ago

the referenced tutorial inside the blog post is outdated.. Actually i followed the post at first but later i found out that $httpProviders.responseInterceptors is deprecated.. I am using angular 1.3.15

Braulio Over a year ago

Mmm... sorry about that, checking the code I have in more updated projects I'm using $httpProvider.interceptors.push('httpInterceptor');, and this method has "public" methods 'request, ' requestError' and 'reponseError', do you want me to paste that service?

ChanX Over a year ago

I tried that method.. Actually my above method is based on that .. But property headers of undefined error.. Anyway u can paste that service..

Collectives™ on Stack Overflow

AngularJS Interceptor TypeError: Cannot read property 'headers' of undefined

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related