AngularJS:如何实现全局错误处理程序并显示错误

AngularJS: How to implement global error handler and show errors

本文关键字：错误 全局 处理 程序 显示 实现 何实现 AngularJS      更新时间：2023-09-26

对于我的网页，我有几个角度应用程序。对于这些应用程序，我想创建一个全局错误处理程序，用于跟踪代码为 500、401 等的错误并将其显示为警报。

这是我到目前为止所拥有的：

我创建了一个全局错误处理程序模块，然后将其注入到我的应用程序中

angular.module('globalErrorHandlerModule', [])
    .factory('myHttpInterceptor', ['$rootScope', '$q', function ($rootScope, $q) {
        return {
            'responseError': function (rejection) {
                if(rejection.status == 500){
                    // show error
                }
                return $q.reject(rejection);
            }
        };
    }])
    .config(function ($httpProvider) {
        $httpProvider.interceptors.push('myHttpInterceptor');
    });
angular.module('myApp', ['globalErrorHandlerModule'])

现在我正在努力解决的实际上是在警报中显示错误。最好的方法是什么？我尝试创建一个单独的错误应用程序并注入错误模块并在两者之间共享数据工厂，但数据永远不会在应用程序中更新。像这样：

angular.module('globalErrorHandlerModule', [])
    .factory('myHttpInterceptor', ['$rootScope', '$q', 'Data', function ($rootScope, $q, Data) {
        return {
            'responseError': function (rejection) {
                if(rejection.status == 500){
                    // set error
                    Data.error.message = '500 error';
                }
                return $q.reject(rejection);
            }
        };
    }])
    .factory('Data', function () {
        var _error = {
            message: "init"
        };
        return {
            error: _error
        };
    })
    .config(function ($httpProvider) {
        $httpProvider.interceptors.push('myHttpInterceptor');
    });
angular.module('globalErrorHandlerApp', ['globalErrorHandlerModule'])
    .controller('GlobalErrorCtrl', function ($scope, Data) {
        $scope.test = Data.error.message;
    });

然后显示错误，如下所示：

<div ng-controller="GlobalErrorCtrl">
         Error {{test}}    
</div>

但如前所述，我只看到我的初始值，没有更新错误消息。我也尝试过广播，但也没有用。我相信有更好的方法来实现这样的东西，我只是还没有找到它。感谢您为我指明正确方向的任何提示。

试试这个

angular.module('globalErrorHandlerApp', ['globalErrorHandlerModule'])
.controller('GlobalErrorCtrl', function ($scope, Data) {
    $scope.test = Data.error;
});

观察对象比监视字符串更好。让我知道是否帮助你

<div ng-controller="GlobalErrorCtrl">
     Error <span> {{test.message}}   </span>  
</div>
相关文章：