HttpRequestInterceptor顯示的倍數乘以相同的錯誤

Question

我添加了一個HttpRequestInterceptor insie我的AngularJS應用程序顯示一個toastr每次請求失敗。

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

在特定網頁，我必須從我的服務器解決多個數據

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

因此，當我的服務器被關閉，每個請求將獲得rejection.status == -1，然後顯示toastr Connection to server not possible

問題是行​​不起作用。它應該刪除所有的命令，但什麼都不做。

如何在添加新托盤之前刪除托盤？我可以使用一些純JavaScript替換非工作的toastr.remove()手動選擇並刪除toastr？

Answer 1

您必須製作一些configuration changes以防止更多的toastr's同時打開。

toastr configurations可以在config函數中改變角度。

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這條線將防止相同的消息從顯示多次。

從Customizing the toastr link reference

• autoDismiss：如果設置，只顯示最近maxOpened吐司（S）
• 數據筒：要追加你的祝酒詞容器的名稱（容器將爲你創建）。
• maxOpened：一次顯示的最大吐司數。
• newestOnTop：在舊的麪包上添加新麪包。假裝把它們放在底部。
• positionClass：添加麪包的位置。
• preventDuplicates：防止最後的敬酒重複。
• preventOpenDuplicates：防止打開的土司重複。
• target：放置toastr容器的元素。