infinite loop with angularjs httpInterceptor injecting service using toastr

Question

I'm getting and issue with my httpInterceptor and my toastr Service. It always make infinite loop

AlertService (using toastr)

class AlertService {

    constructor(toastr) {
        this.toastr = toastr;
        this.toastrCommonOpts = {
            positionClass: "toast-bottom-center",
            allowHtml: true,
            closeButton: true,
        }
    }

    notificationError (msg, title) {
        let errorMsg = msg || 'error';
        this.toastr.error(errorMsg, title || '', this.toastrCommonOpts);
    };

    notificationWarning(msg, title) {
        let warningMsg = msg || 'warning';
        this.toastr.warning(warningMsg, title || '', this.toastrCommonOpts);
    }

    notificationSuccess(msg, title, duration) {
        let successMsg = msg || 'Success';
        this.toastr.success(successMsg, title || '', this.toastrCommonOpts);
    }

}
AlertService.$inject = ['toastr'];
export default AlertService ;

myHttpInterceptor

class HttpInterceptor {
    constructor() {
        ['request', 'response']
            .forEach((method) => {
                if(this[method]) {
                    this[method] = this[method].bind(this);
                }
            });
    }
}
class MyHttpInterceptor extends HttpInterceptor{

    constructor(AlertService) {
        super();
        this.AlertService = AlertService;
    }

    request(config) {
        this.AlertService.notificationSuccess();
        return config;
    };


    response(response){
        this.AlertService.notificationSuccess();
        return response;
    }
}

MyHttpInterceptor.$inject = ['AlertService'];
export default MyHttpInterceptor;

myModule

import MyHttpInterceptor from './myHttpInterceptor';
import AlertService from "./alert.service";

export default angular.module('app.core', [toastr])
    .service('AlertService', AlertService)
    .factory('MyHttpInterceptor', MyHttpInterceptor)
    .config(($httpProvider) => {
        $httpProvider.defaults.withCredentials = true;
        $httpProvider.interceptors.push('MyHttpInterceptor');
    });

I extends myHttpInterceptor and bind my methods to prevent loosing context 'this' (cf : angularjs http interceptor class (ES6) loses binding to 'this' ). I did not succeed to use arrowFunctions as class methods.

I also tried to do it following this issue

Would any of you have already encountered this problem?

Thanks :)

have you tried to use $injector.get('toastr'); in your alert service constructor? — Shreyance Jain, Mar 19 '18 at 12:00
`.factory('MyHttpInterceptor', MyHttpInterceptor)`. That's one problem at least. Classes should be used with `service` only. You likely had problems with arrows because of that, and you likely don't need neither arrows nor `bind` this way. — Estus Flask, Mar 19 '18 at 12:37
@estus I also explore this. But i could not either define methods as arrow functions. — Chouret Robin, Mar 19 '18 at 13:30
Likely because you used wrong service type, so arrows were bound to wrong context. — Estus Flask, Mar 19 '18 at 13:31

infinite loop with angularjs httpInterceptor injecting service using toastr

0 Answers0