Do $http request from Angular Interceptor?

Question

I'm trying to implement Angular Interceptor for Exceptions. For one at least. I have a token and when it old enogh backend throws TokenAlmostExpired exception. This exception contains errorCode = 101. In the interceptor I'm checking that code is 101 and then I need to send POST request to backend's /refresh endpoint so I could refresh token.

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

    var vm = this;

    var errorInjector = {
        'response': function (response) {
            console.log(response);
            return response;
        },
        'responseError': function (rejection) {
            if (JSON.stringify(rejection.data.errorCode) === JSON.stringify(101)) {
                vm.getRefreshToken();
            }
            return $q.reject(rejection);
        }
    };
    return errorInjector;
}]);

and

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

$http

But there's a problem at interceptor level, that I can't just give it dependency on $http, because there's Circular dependency found: $http <- errorInjector <- $http <- $templateFactory <- $view <- $state

$scope

And I can't put getRefreshToken() function to $scope, because $scope dependency also gives 'Circular dependency'.

$Injector

var http = $injector.get('$http');

doesn't work as well, and gives me erorr.

So how can I catch exception in interceptor and then do a $http request from there?

You may want to consider firing off an event, and picking it up in a service and doing the execution from there — Callum Linington
– Callum Linington, Commented Jun 28, 2016 at 10:51
Can you show full errorInjector code? It seems that it is not full implementation. — el vis
– el vis, Commented Jun 28, 2016 at 10:58
We don't need full errorInjector code, there is enough there — Callum Linington
– Callum Linington, Commented Jun 28, 2016 at 10:59
@ottercoder if you do not understand @CallumLinington code it seems that you do not understant DI in angular, thats why you have '$injector', function ($q, $injector) which should be '$q', '$injector', function ($q, $injector) and thats probably your problem here — el vis
– el vis, Commented Jun 28, 2016 at 12:50

Alexandr Fedoseev · Accepted Answer · 2016-06-28 12:04:52Z

1

Interceptor

(function (angular) {
    'use strict';

    angular.module('services').factory("httpInterceptor", [
        'errorLauncher',
        '$q',
        function (errorLauncher, $q) {
            return {
                'requestError': function (rejection) {
                    if (rejection.status === 101) {
                        errorLauncher.pushInErrorMessage(rejection);
                    }
                    return $q.reject(rejection);
                },
                'responseError': function (rejection) {
                    if (rejection.status === 101) {
                        errorLauncher.pushInErrorMessage(rejection);
                    }
                    return $q.reject(rejection);
                }
            };
        }]);
})(angular);

and error handler service

(function (angular) {
    'use strict';

    angular.module('services').factory("errorLauncher", [
        '$rootScope',
        function ($rootScope) {
            return {
                'pushInErrorMessage': function (rejection) {
                    $rootScope.$emit('theTokenWillDieSoon');
                }
            };
        }]);
})(angular);

and now main app controller

(function (angular) {
    'use strict';

    angular.module('controllers').controller("globalCtrl", [
        '$rootScope',
        '$http',
        function ($rootScope, $http) {
            $rootScope.$on('theTokenWillDieSoon', function () {
                // http from here
            });
        }]);
})(angular);

edited Jun 28, 2016 at 12:04

answered Jun 28, 2016 at 11:08

Alexandr Fedoseev

675 bronze badges

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

2 Comments

ottercoder Over a year ago

Circular dependency found: $http <- errorLauncher <- httpInterseptor <- $http <- $templateFactory <- $view <- $state :/

Alexandr Fedoseev Over a year ago

try the $emit from error handler then ) hope it will help

Nitish Kumar · Accepted Answer · 2016-06-28 10:57:29Z

0

.factory('errorInjector',['$injector', function ($q, $injector) { .... }]);

Change To:

.factory('errorInjector',['$q', function ($q) { .... }]);

answered Jun 28, 2016 at 10:57

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

Comments

ottercoder · Accepted Answer · 2016-06-29 14:28:30Z

So I've done it with service. Thanks everyone!

interceptor:

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

    var errorInjector = {
        'response': function (response) {
            ....
        },
        'responseError': function (rejection) {
            if (JSON.stringify(rejection.data.errorCode) === JSON.stringify(101)) {
                var refreshTokenService = $q.get('refreshTokenService');
                refreshTokenService.refreshTokenService();
                $.notify({message: data.data.detailMessage}, {type: 'warning'});
            }
            return $q.reject(rejection);
        }
    };

    return errorInjector;
}]);

refreshTokenService:

.service('refreshTokenService', ['$http', function ($http) {

    this.refreshTokenService = function () {
        $http.post('/refresh').then(
            function success(response) {
               .....
            },
            function error(data) {
                .....
            }
        );
    };

}]) ;

Collectives™ on Stack Overflow

Do $http request from Angular Interceptor?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related