Weedoze Weedoze - 10 months ago 38
AngularJS Question

HttpRequestInterceptor display multiples times the same error

I added a

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

.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"
switch (rejection.status) {
case 401:
if ($state.current.name != 'login') {
toastr.info('Re-enter username/password', 'Invalid sessions', toastr.options);
case 403:
toastr.error('You do not have the rights', 'Forbidden', toastr.options)
case 404:
toastr.error('Cannot found', '??', toastr.options);
case 500:
toastr.error('Unexpected error', 'Hum...', toastr.options);
case -1:
toastr.error('Connection to server not possible', 'Ouch...', toastr.options);
toastr.error('That is not supposed to land here', 'Oops...', toastr.options);
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
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
with some pure javascript to manually select and remove the toastr ?

Answer Source

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.


  function Config($httpProvider,toastrConfig) {


    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.