尝试从服务加载数据,我收到以下错误消息:Error: undefined is not an object (evaluating 'ProfileService.getProfile(1).then
。
ProfileController可
这里发生错误......
vm.user = {};
vm.loadProfile = function() {
ProfileService.getProfile(1).then(function(profileData) {
console.log(profileData);
vm.user = profileData;
})
};
vm.loadProfile()
ProfileService
function getProfile(id) {
var profile = [];
$log.debug('Getting profile with id: ' + id);
StubFactory.getProfileData().then(function(result) {
for(var i = 0; i < result.data.profiles.length; i++) {
if(result.data.profiles[i].id === id) {
profile = result.data.profiles[i];
}
}
$log.debug('Getting contacts for profile with id: ' + id);
profile.contacts = [];
StubFactory.getContactsData().then(function(result) {
for(i = 0; i < profile.contactMapper.length; i++) {
for(var j = 0; j < result.data.contacts.length; j++) {
if(profile.contactMapper[i] === result.data.contacts[j].id) {
profile.contacts.push(result.data.contacts[j]);
}
}
}
});
$log.debug('Getting documents for profile with id: ' + id);
profile.documents = [];
StubFactory.getDocumentsData().then(function(result) {
for(i = 0; i < profile.documentMapper.length; i++) {
for(var j = 0; j < result.data.documents.length; j++) {
if(profile.documentMapper[i] === result.data.documents[j].id) {
profile.documents.push(result.data.documents[j]);
}
}
}
});
$log.debug('Completed load for profile with id: ' + id);
$log.info(profile);
return profile;
});
}
StubFactory
function getContactsData() {
return $http.get('data/contacts.json');
}
function getProfileData() {
return $http.get('data/profiles.json');
}
function getDocumentsData() {
return $http.get('data/documents.json');
}
日志如下......
[Warning] Unexpected CSS token: : (main.css, line 4919)
[Warning] Unexpected CSS token: : (main.css, line 8199)
[Warning] Unexpected CSS token: : (main.css, line 8207)
[Debug] Getting profile with id: 1 (angular.js, line 14326)
[Error] Error: undefined is not an object (evaluating 'ProfileService.getProfile(1).then')
loadProfile@http://localhost:9000/scripts/controllers/profile.js:17:35
http://localhost:9000/scripts/controllers/profile.js:22:19
$controllerInit@http://localhost:9000/bower_components/angular/angular.js:10717:40
nodeLinkFn@http://localhost:9000/bower_components/angular/angular.js:9594:45
compositeLinkFn@http://localhost:9000/bower_components/angular/angular.js:8903:23
publicLinkFn@http://localhost:9000/bower_components/angular/angular.js:8768:45
link@http://localhost:9000/bower_components/angular-route/angular-route.js:1222:11
invokeLinkFn@http://localhost:9000/bower_components/angular/angular.js:10274:15
nodeLinkFn@http://localhost:9000/bower_components/angular/angular.js:9663:23
compositeLinkFn@http://localhost:9000/bower_components/angular/angular.js:8903:23
publicLinkFn@http://localhost:9000/bower_components/angular/angular.js:8768:45
update@http://localhost:9000/bower_components/angular-route/angular-route.js:1171:36
$broadcast@http://localhost:9000/bower_components/angular/angular.js:18343:33
http://localhost:9000/bower_components/angular-route/angular-route.js:733:40
processQueue@http://localhost:9000/bower_components/angular/angular.js:16689:39
http://localhost:9000/bower_components/angular/angular.js:16733:39
$digest@http://localhost:9000/bower_components/angular/angular.js:17827:36
$apply@http://localhost:9000/bower_components/angular/angular.js:18125:31
done@http://localhost:9000/bower_components/angular/angular.js:12233:53
completeRequest@http://localhost:9000/bower_components/angular/angular.js:12459:15
requestLoaded@http://localhost:9000/bower_components/angular/angular.js:12387:24 – "<div ng-view=\"\" class=\"ng-scope\">"
(anonymous function) (angular.js:10859)
invokeLinkFn (angular.js:10276)
nodeLinkFn (angular.js:9663)
compositeLinkFn (angular.js:8903)
publicLinkFn (angular.js:8768)
update (angular-route.js:1171)
$broadcast (angular.js:18343)
(anonymous function) (angular-route.js:733)
processQueue (angular.js:16689)
(anonymous function) (angular.js:16733)
$digest (angular.js:17827)
$apply (angular.js:18125)
done (angular.js:12233)
completeRequest (angular.js:12459)
requestLoaded (angular.js:12387)
[Debug] Getting contacts for profile with id: 1 (angular.js, line 14326)
[Debug] Getting documents for profile with id: 1 (angular.js, line 14326)
[Debug] Completed load for profile with id: 1 (angular.js, line 14326)
[Info] {id: 1, firstName: "Robert", lastName: "Emery", address: "95 Guild Street, London, N14 3UF", type: "tenant", …} (profile.js, line 115)
profile.js, line 115
是ProfileService
中的以下代码行:$log.info(profile);
。
答案 0 :(得分:2)
您的问题与承诺的异步行为有关,这很好。因此,要获取数据,您有两种方法:
首先方式是链接.then
个事件并从最后callbackfunction
调用promise result
。
代码如下所示:
<强> ProfileController可强>
vm.user = {};
vm.loadProfile = function() {
ProfileService.getProfile(1, callBackfunc); // pass callback function
};
function callBackfunc(profileData){
vm.user = profileData;
}
vm.loadProfile();
<强> ProfileService 强>
function getProfile(id, callBackfunc) {
var profile = [];
// chain .then events
$log.debug('Getting profile with id: ' + id);
StubFactory.getProfileData().then(function(result) {
for(var i = 0; i < result.data.profiles.length; i++) {
if(result.data.profiles[i].id === id) {
profile = result.data.profiles[i];
}
}
$log.debug('Getting contacts for profile with id: ' + id);
profile.contacts = [];
StubFactory.getContactsData().then(function(result) {
for(i = 0; i < profile.contactMapper.length; i++) {
for(var j = 0; j < result.data.contacts.length; j++) {
if(profile.contactMapper[i] === result.data.contacts[j].id) {
profile.contacts.push(result.data.contacts[j]);
}
}
}
$log.debug('Getting documents for profile with id: ' + id);
profile.documents = [];
StubFactory.getDocumentsData().then(function(result) {
for(i = 0; i < profile.documentMapper.length; i++) {
for(var j = 0; j < result.data.documents.length; j++) {
if(profile.documentMapper[i] === result.data.documents[j].id) {
profile.documents.push(result.data.documents[j]);
}
}
}
$log.debug('Completed load for profile with id: ' + id);
$log.info(profile);
callBackfunc(profile); // callback function called.
});
});
});
}
第二种方式是使用$q
服务并使用它的$q.all()
方法。
然后你的代码就像:
let promises = [promisegetProfileData(), promisegetContactsData(), promisegetDocumentsData()];
$q.all(promises).then((values) => {
var profile = [];
// assign ProfileData values[0]
// assign ContactData values[1]
// assign DocumentData values[2]
callBackFunc(profile);
});