HttpRequestInterceptor Anzeige multiples mal der gleiche Fehler

Question

Ich habe eine HttpRequestInterceptor ins meine AngularJS App hinzugefügt, um eine toastr jedes Mal anzuzeigen, wenn eine Anfrage fehlschlägt.

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); 
      } 
     }; 
    }]); 

Auf bestimmte Seite, ich mehrere Daten von meinem 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(); 
       }] 
      } 
     } 
    } 
}) 

So, wenn mein Server ausgeschaltet zu lösen haben wird, wird jede Anfrage eines rejection.status == -1 und dann zeigt die toastr Connection to server not possible

Das Problem ist, dass die Zeile toastr.remove(); nicht funktioniert. Es soll alle Toastr entfernen, tut aber nichts.

Wie kann ich den toastr entfernen, bevor ich einen neuen hinzufüge? Kann ich das nicht funktionierende toastr.remove() durch etwas reines Javascript ersetzen, um das Toastrad manuell auszuwählen und zu entfernen?

Answer 1

Sie müssen einige configuration changes machen, um mehr toastr's gleichzeitig zu öffnen zu verhindern.

Die toastr configurations kann in config Funktion Winkel geändert werden.

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 diese Linie wird die gleiche Nachricht von der Anzeige mehrmals verhindern.

Von Customizing the toastr link reference

• autoDismiss: Wenn gesetzt, zeigen nur den jüngsten maxOpened Toast (n)
• containerId: Der Name des Containers, in dem Sie Ihren Toast angehängt werden sollen (die Container wird für Sie erstellt).
• maxOpened: Maximale Anzahl der gleichzeitig angezeigten Toasts.
• nearestOnTop: Fügen Sie neue Toasts auf dem alten hinzu. Ziehen Sie falsch an, um sie auf den Boden zu legen.
• positionClass: Die Position, an der die Toasts hinzugefügt werden.
• preventDuplicates: Verhindern Duplikate des letzten Toast.
• preventOpenDuplicates: Vermeiden Sie Dubletten von offenen Toasts.
• Ziel: Das Element, um den Toastr Container zu setzen.