Weedoze Weedoze - 10 days ago 6
AngularJS Question

HttpRequestInterceptor display multiples times the same error

I added a

HttpRequestInterceptor
insie my AngularJS app to display a toastr every time a request fails.

angular.module('spwApp.factories')
.factory('httpRequestInterceptor', ['$q', '$injector', '$cookies', '$rootScope', function($q, $injector, $cookies, $rootScope) {
return {
'request': function($config) {
var token = $cookies.get('token');
$config.headers['Authorization'] = 'Bearer ' + token;
return $config;
},
'responseError': function(rejection) {
var toastr = $injector.get('toastr');
var $state = $injector.get('$state');
toastr.options = {
"closeButton" : true,
"preventDuplicates" : true,
"timeOut": "50000",
"extendedTimeOut" : "50000"
};
toastr.remove();
switch (rejection.status) {
case 401:
if ($state.current.name != 'login') {
$state.go('login');
toastr.info('Re-enter username/password', 'Invalid sessions', toastr.options);
}
break;
case 403:
toastr.error('You do not have the rights', 'Forbidden', toastr.options)
$state.go('home');
break;
case 404:
toastr.error('Cannot found', '??', toastr.options);
$state.go('home');
break;
case 500:
toastr.error('Unexpected error', 'Hum...', toastr.options);
$state.go('home');
break;
case -1:
toastr.error('Connection to server not possible', 'Ouch...', toastr.options);
$state.go('home');
break;
default:
toastr.error('That is not supposed to land here', 'Oops...', toastr.options);
$state.go('home');
break;
}
return $q.reject(rejection);
}
};
}]);


On certain page, I have to resolve multiple data from my server

.state('stateA', {
url: '/urlToStateA',
views: {
'content@stateA': {
templateUrl: 'app/stateA.html',
controller: 'controllerA',
controllerAs: 'vm',
resolve: {
dataA: ['myService', function(myService) {
return myService.getDataA();
}],
dataB: ['myService', function(myService) {
return myService.getDataB();
}],
dataC: ['myService', function(myService) {
return myService.getDataC();
}]
}
}
}
})


Thus when my server is turned off, each request will get a
rejection.status == -1
and then display the toastr
Connection to server not possible


The problem is that the line
toastr.remove();
does not work. It is supposed to remove all the toastr but does nothing.

How can I remove the toastr before adding a new one ? Can I replace the non-working
toastr.remove()
with some pure javascript to manually select and remove the toastr ?

Answer

You have to make some configuration changes to prevent more toastr's opening simultaneously.

The toastr configurations can be changed in config function of angular.

myApp.config(Config);

  function Config($httpProvider,toastrConfig) {

    $httpProvider.interceptors.push('interceptorService');

    angular.extend(toastrConfig, {
       autoDismiss: false,
       containerId: 'toast-container',
       maxOpened: 0,    
       newestOnTop: true,
       positionClass: 'toast-top-center',
       preventDuplicates: false,
       preventOpenDuplicates: true,
       target: 'body'
    });

  }  

preventOpenDuplicates: true this line will prevent the same message from displaying multiple times.

From Customizing the toastr link reference

  • autoDismiss: If set, show only the most recent maxOpened toast(s)
  • containerId: The name of the container where you want to append your toasts (the container will be created for you).
  • maxOpened: Maximum number of toasts displayed at once.
  • newestOnTop: Add new toasts on top of the old one. Put on false to put them on the bottom.
  • positionClass: The position where the toasts are added.
  • preventDuplicates: Prevent duplicates of the last toast.
  • preventOpenDuplicates: Prevent duplicates of open toasts.
  • target: The element to put the toastr container.