AngularJs http get响应未定义但数据存在于success函数内

时间:2015-10-29 05:30:38

标签: javascript angularjs

新角色。我试图从http get方法获取json响应。

我的代码是,

app.factory('getdata', function ($http, $q){
  this.getlist = function(){       
    alert('1');
    return $http.get('http://www.w3schools.com/angular/customers.php',{'Access-Control-Allow-Origin': 'localhost:*'})
    .then(function(response) {
      console.log('response'); console.log(response.data); //I get the correct items, all seems ok here
        alert('2');
        return response.data;
      });            
  }
  return this;
});
/* Stream page controller */
app.controller('streamCtrl', function($scope,getdata, $ionicSlideBoxDelegate, $timeout, $ionicScrollDelegate, $location, $sce){
  $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }
  getdata.getlist()
  .then(function(arrItems){
   $scope.sliders = arrItems;         
 });
alert($scope.sliders);

我收到的警告就像1,' undefined'和2 但是$ scope.sliders有数据。因为一旦我调整屏幕大小并且我可以在

中获得正确的警报
getdata.getlist().then(function(arrItems) {
  $scope.sliders = arrItems;         
  alert($scope.sliders);
});

2 个答案:

答案 0 :(得分:6)

获取提醒的原因是undefined ,因为您尚未在控制器中定义$scope.sliders ,而http请求是异步的,因此alert($scope.sliders);从响应中获取data并将该数据设置为$scope.sliders之前的函数调用。

只有在获得成功回复后才能获得alert($scope.sliders);值。

其他可能性是,您可以设置$scope.sliders = {},然后在调用alert($scope.sliders);函数{}显示实际响应时,使用then显示警告alert。{ / p>

原始plunker基于问题

检查新plunker

中的评论和更新代码

答案 1 :(得分:4)

$http是一个异步调用,所以会发生的情况是您在第6行时触发了一个http调用,而在行号10 将执行>因为角度中的所有http调用都是异步的。

enter image description here

这就是你得到undefined

的原因

如果您想在响应之后做任何事情,只需执行http承诺中的内容即。在.then功能块中,如下所示

getdata.getlist()
  .then(function(response){ // http promise block
     $scope.sliders = response.data;
     console.log($scope.sliders);
});