AngularJS使用UI-Router处理拒绝的响应

时间:2014-05-26 20:28:07

标签: angularjs promise angular-ui-router

我有一个服务,它在Angular中包装我的API调用:

var ConcernService = {

    list: function (items_url) {
        var defer = $q.defer();
        $http({method: 'GET', 
            url: api_url + items_url})
            .success(function (data, status, headers, config) {
                defer.resolve(data, status);
            })
            .error(function (data, status, headers, config) {
                defer.reject(data, status);
            });
        return defer.promise;
    },

然后我的应用配置UI-Router

    .config(function($stateProvider){

        $stateProvider

        .state('default', {
            url: '/',
            resolve: {
                tasks: function ($stateParams, ConcernService) {
                    return ConcernService.list('tasks/').then(
                        function (tasks)   { return tasks; },
                        function (reason)  { return []; }
                    );
                },
                ...
            }
        }
    });

这是我可以使用的最基本的配置,如果遇到403404等,它基本上只返回一个空对象,我可以在视图模板中处理它。

我的问题是,获取视图/模板的其他详细信息的最佳方法是什么,例如拒绝reasonstatus。它应该在tasks对象中返回还是单独返回?

1 个答案:

答案 0 :(得分:7)

首先,您的第一段代码有deferred anti pattern,让我们解决一下:

list: function (items_url) {
    return $http.get(api_url + items_url); // $http already returns a promise
},

另请注意,延期拒绝和履行是单一价值,因此您的多个返回值在此处不起作用。

现在,让我们来看看路由器。首先,您的第一个履行处理程序是多余的。

.state('default', {
        url: '/',
        resolve: {
            tasks: function ($stateParams, ConcernService) {
                return ConcernService.list('tasks/'); // result.data contains the data here
            },
            ...
        }

现在,我们遇到的问题是在拒绝的情况下会发生什么?

好吧,听听$stateChangeError

$rootScope.$on('$stateChangeError', 
function(event, toState, toParams, fromState, fromParams, error){ ... })

在这里,您可以通过拒绝来聆听更改状态失败。