如何在httpProvider responseError拦截器中传播错误

时间:2018-03-09 13:05:50

标签: angularjs

我们有以下代码用于表单验证:

            $scope.masterModel.$save().then(function (data) {
                $scope.masters.data.push(data);
                $location.path('/master/edit/' + data.id);
            }).error(function (data) {
                $scope.errors = data.data;
            });

现在我们添加了代码,通常会在全局级别上将代码500服务器错误捕获到app.js

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($injector) {

        return {
            'responseError': function (rejection) {
                // do something on error
                if (rejection.status === 500) {
                    var angularModalService= $injector.get("ModalService");
                    angularModalService.showModal({
                        templateUrl: "templates/common/session.html",
                        controller: "ModalController"
                    }).then(function (modal) {
                        modal.element.modal();
                        modal.close.then(function (result) {
                            if (result) {

                            }
                        });
                    });
                }
            }
        };
    });
}]);

只要我们添加此代码,第一个代码中的错误回调就不再起作用了。

我认为我们必须以某种方式在responseError回调中传播错误,但是它是如何工作的?

AngularJS版本是1.5.11

1 个答案:

答案 0 :(得分:1)

你需要"拒绝拒绝"在拦截器中并返回它以便传播错误:P



 var app=   angular.module('MyApp', []);
 
 app.controller('Controller', function($scope, $http, $q) {
           
  $http.get("http://www.example.invalid/fake.json")
    .then(function(response) {
      console.log("success");
    }, function(error) {
      console.log("controller error handler");
    });
});


app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($injector, $q) {

        return {
            'responseError': function (rejection) {
                console.log("interceptor error handler");
            
                // do something on error
                if (rejection.status === 500) {
                  // do something...                  
                }
                
                return $q.reject(rejection);
            }
        };
    });
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
    <div ng-controller="Controller">
    </div>
</div>
&#13;
&#13;
&#13;

如您所见,我添加了一行

 return $q.reject(rejection);

在拦截器的末尾。您可以检查控制台并查看现在两条消息都已记录。