HttpRequestInterceptor 显示多次相同的错误

Question

我在我的 AngularJS 应用程序中添加了 HttpRequestInterceptor 以在每次请求失败时显示 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然后显示toastrConnection to server not possible

问题是 toastr.remove(); 行不起作用。它应该删除所有的 toastr 但什么也没做。

如何在添加新烤面包机之前移除烤面包机？我可以用一些纯 javascript 替换非工作 toastr.remove() 以手动 select 并删除 toastr 吗？

Answer 1

您必须制作一些 configuration changes 以防止更多 toastr's 同时打开。

可以在angular的config函数中更改toastr configurations。

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 toast(s)
containerId: 您要附加 toast 的容器的名称（将为您创建该容器）。
maxOpened:一次显示的最大吐司数。
newestOnTop: 在旧 toast 之上添加新 toast。穿上 false 将它们放在底部。
positionClass:添加toasts的位置
preventDuplicates: 防止重复最后一个吐司。
preventOpenDuplicates: 防止重复打开 toasts。
target: 放置 toastr 容器的元素。

HttpRequestInterceptor 显示多次相同的错误

HttpRequestInterceptor display multiples times the same error

angularjs

angular-http-interceptors

angular-toastr