$http POST 请求响应在服务中返回一个 JSON 对象,但在控制器中调用时它是未定义的
$http POST request response returning a JSON object in service, but when called in the Controller it is undefined
我几乎有一个服务,其中包含通过 AngularJS 中的 $http 服务进行一些 REST 方法调用的功能。然后在控制器中访问和调用这些方法。
当通过控制器调用该方法时,打印到服务控制台的数据正是我所期望的,即 JSON 对象。但是一旦该函数 returns 它的数据返回到控制器,它就变得不确定了。
我不太确定这是什么原因,希望深入了解为什么会发生这种情况,它与范围界定或垃圾收集有关吗?
谢谢!
这里是服务 'hub'
this.getAllHubs = function() {
$http({
method: 'GET',
url: 'https://****.com',
}).then(function successCallback(response) {
console.log('In hub.js ' + JSON.stringify(response.data));
this.hubs = response.data;
return response.data;
}, function errorCallback(response) {
// Error response right here
});
};
正如预期的那样,第一个控制台输出正确地打印了对象
这是控制器代码
app.controller('HubCtrl', HubCtrl);
HubCtrl.$inject = ['$scope','hub'];
function HubCtrl($scope,hub) {
$scope.hubs = hub.getAllHubs();
console.log('In ctrl ' + $scope.hubs);
$scope.addHub = function(_hub) {
console.log('In Ctrl ' + _hub);
hub.addHub(_hub);
};
}
您没有return函数this.getAllHubs
的数据。
this.getAllHubs = function() {
return $http({ // Put a return here
method: 'GET',
url: 'https://****.com',
}).then(function successCallback(response) {
console.log('In hub.js ' + JSON.stringify(response.data));
this.hubs = response.data;
return response.data;
}, function errorCallback(response) {
// Error response right here
});
};
而且这还不够,因为return值实际上是一个$q Promise,要使用promise的值:
function HubCtrl($scope,hub) {
// getAllHubs() now returns a promise
var hubsPromise = hub.getAllHubs();
// We have to '.then' it to use its resolved value, note that this is asynchronous!
hubsPromise.then(function(hubs){
$scope.hubs = hubs;
console.log('In ctrl ' + $scope.hubs);
});
$scope.addHub = function(_hub) {
console.log('In Ctrl ' + _hub);
hub.addHub(_hub);
};
}
我几乎有一个服务,其中包含通过 AngularJS 中的 $http 服务进行一些 REST 方法调用的功能。然后在控制器中访问和调用这些方法。
当通过控制器调用该方法时,打印到服务控制台的数据正是我所期望的,即 JSON 对象。但是一旦该函数 returns 它的数据返回到控制器,它就变得不确定了。
我不太确定这是什么原因,希望深入了解为什么会发生这种情况,它与范围界定或垃圾收集有关吗?
谢谢!
这里是服务 'hub'
this.getAllHubs = function() {
$http({
method: 'GET',
url: 'https://****.com',
}).then(function successCallback(response) {
console.log('In hub.js ' + JSON.stringify(response.data));
this.hubs = response.data;
return response.data;
}, function errorCallback(response) {
// Error response right here
});
};
正如预期的那样,第一个控制台输出正确地打印了对象
这是控制器代码
app.controller('HubCtrl', HubCtrl);
HubCtrl.$inject = ['$scope','hub'];
function HubCtrl($scope,hub) {
$scope.hubs = hub.getAllHubs();
console.log('In ctrl ' + $scope.hubs);
$scope.addHub = function(_hub) {
console.log('In Ctrl ' + _hub);
hub.addHub(_hub);
};
}
您没有return函数this.getAllHubs
的数据。
this.getAllHubs = function() {
return $http({ // Put a return here
method: 'GET',
url: 'https://****.com',
}).then(function successCallback(response) {
console.log('In hub.js ' + JSON.stringify(response.data));
this.hubs = response.data;
return response.data;
}, function errorCallback(response) {
// Error response right here
});
};
而且这还不够,因为return值实际上是一个$q Promise,要使用promise的值:
function HubCtrl($scope,hub) {
// getAllHubs() now returns a promise
var hubsPromise = hub.getAllHubs();
// We have to '.then' it to use its resolved value, note that this is asynchronous!
hubsPromise.then(function(hubs){
$scope.hubs = hubs;
console.log('In ctrl ' + $scope.hubs);
});
$scope.addHub = function(_hub) {
console.log('In Ctrl ' + _hub);
hub.addHub(_hub);
};
}