[英]Angularjs: Promises
I'm doing some small exercises to learn AngularJS, trying to understand how to work with promises at the moment. 我正在做一些小练习来学习AngularJS,试图了解如何使用promises。
In the following exercise, I'm trying to get some data async. 在下面的练习中,我试图获取一些异步数据。 I can see the data in the console.log but the promise is returned NULL.
我可以在console.log中看到数据但是promise返回NULL。
Anyone experienced can give me some advice to understand what I'm doing wrong ? 有经验的人可以给我一些建议,以了解我做错了什么? Thanks for looking!
谢谢你的期待!
angular.module('questions', [])
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainCtrl',
resolve: {
'MyServiceData': function(EntriesService) {
return EntriesService.promise;
}
}
})
})
.service('EntriesService', function($http) {
var entries = null;
var promise = $http.get('entries').success(function (data) {
entries = data;
});
return {
promise: promise,
all: function() {
return entries;
}
};
})
.controller('MainCtrl', ['$scope', 'EntriesService', function($scope, EntriesService) {
console.log('Promise is resolved: ' + EntriesService.all());
$scope.title = "Q&A Module";
$scope.entries = EntriesService.all() || [];
$scope.addMessage = function() {
$scope.entries.push({
author: "myAuthor",
message: $scope.message
});
};
}]);
/ * ** * ** Thanks everyone for your help so far * ** * * / / * ** * **感谢大家到目前为止的帮助* ** * * /
After taking the advice of @bibs I came up with the following solution, that's clear using ngResource: 在听完@bibs的建议后,我提出了以下解决方案,使用ngResource很清楚:
angular.module('questions', ['ngResource'])
.factory('EntriesService', function($resource){
return $resource('/entries', {});
})
.controller('MainCtrl', ['$scope', 'EntriesService', function($scope, EntriesService) {
$scope.title = "Q&A Module";
$scope.entries = [];
EntriesService.query(function(response){
$scope.entries = response;
});
$scope.addMessage = function() {
$scope.entries.push({
author: "myAuthor",
message: $scope.message
});
};
}]);
You should access the data in the callback. 您应该访问回调中的数据。 Since
entries
maybe empty before the data arrives, the all()
function is not quite useful in this case. 由于
entries
在数据到达之前可能为空,因此在这种情况下, all()
函数并不十分有用。
Try this, you should be able to chain then()
method to synchronously get data. 试试这个,你应该能够链接
then()
方法来同步获取数据。
.service('EntriesService', function ($http) {
var services = {
all: function () {
var promise = $http.get('entries').success(function (data) {
entries = data;
}).error(function (response, status, headers, config) {
//error
});
return promise;
},
someOtherServices: function(){
var promise = ....
return promise;
}
return services;
}
});
$scope.entries = [];
EntriesService.all().then(function(data){
$scope.entries = data;
});
If you want the data returned by the server to be immediately reflected in your view: 如果您希望服务器返回的数据立即反映在您的视图中:
.service('EntriesService', function($http) {
var entries = [];
var promise = $http.get('entries').success(function (data) {
for (var i = 0; i < data.length; i++) {
entries[i] = data[i];
}
});
return {
promise: promise,
all: entries
};
})
.controller('MainCtrl', ['$scope', 'EntriesService', function($scope, EntriesService) {
$scope.title = "Q&A Module";
$scope.entries = EntriesService.all;
$scope.addMessage = function() {
$scope.entries.push({
author: "myAuthor",
message: $scope.message
});
};
You may want to check out $resource
to do this for you: http://docs.angularjs.org/api/ngResource.$resource 您可能需要查看
$resource
来为您执行此操作: http : //docs.angularjs.org/api/ngResource.$resource
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.