我有一个服务,它在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 []; }
);
},
...
}
}
});
这是我可以使用的最基本的配置,如果遇到403
,404
等,它基本上只返回一个空对象,我可以在视图模板中处理它。
我的问题是,获取视图/模板的其他详细信息的最佳方法是什么,例如拒绝reason
和status
。它应该在tasks
对象中返回还是单独返回?
答案 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){ ... })
在这里,您可以通过拒绝来聆听更改状态失败。