使用 .catch() 处理 $routeChangeError

Question

我正在使用 ngRoute 做一些基本的路由。我定义了一个使用 $http 的服务并将其插入 resolve。通常我在服务中明确使用 $q，但这次我使用内置的 .then 和 .catch，并且它不像往常一样工作。这是我得到的精简版：

app.config(["$routeProvider", "$locationProvider", 
    function($routeProvider, $locationProvider){
        $locationProvider.html5Mode(false);

        $routeProvider
            .when("/", {
                templateUrl: "views/index.html",
                controller: "indexCtrl",
                resolve: {
                    myData: function(myService){
                        return myService.getMyData();
                    }
                }
            })

            .otherwise({
                templateUrl: "views/404.html"
            });
    }]);

服务：

app.factory("myService", ["$http", "$route", function($http, $route){
    return {
        getMyData: function(){
            return $http.get("www.url.com")
                .then(function(data){
                    return data;
                })
                .catch(function(err){
                    return {err: "There was an error"};
                })
        }
    }
}]);

以及处理错误的控制器：

app.controller("errorCtrl", ["$rootScope", function($rootScope){

    $rootScope.$on("$routeChangeError", function(event, current, previous, rejection){
        console.log("err", rejection);
    })

}]);

并且在视图中：

<body ng-app="App" ng-controller="errorCtrl" ng-view>

问题是 catch() 返回的值没有传递给 routeChangeError 处理程序的 rejection 参数。我通常会用 deferred.reject(data) 传递数据，但我不知道为什么 .catch() 不能以同样的方式工作。事实上，.catch 块似乎根本没有被击中。如果我进入服务并尝试破坏某些东西，这会触发控制器中的 routeChangeError 处理程序，但不会触发 catch 块。只是想知道是否有人可以提供一些关于这里发生的事情的见解？

Answer 1

如果您 return 来自 catch，您已经 处理了 错误，并且最终的承诺将得到履行。另见 Chained promises not passing on rejection。

如果您想要拒绝，您将需要重新throw一个错误（或return一个被拒绝的承诺）：

getMyData: function(){
    return $http.get("www.url.com")
    .catch(function(err){
        throw new Error("There was an error");
    })
}

（我也去掉了无用的.then(identity)）

使用 .catch() 处理 $routeChangeError

Handling $routeChangeError with .catch()

javascript

angularjs

angular-promise