在 Angular 中保持超出获取请求的范围

Question

我有以下代码：

  $http({
    method: 'GET',
    url: 'http://localhost:8080/getStuff'
  }).then(function successCallback(response) {
      $scope.stuffData= response.data.length;
    }, function errorCallback(response) {
    });

console.log("amount is:" +$scope.stuffData);


});

在这种情况下，我的日志给出：

amount is:undefined

其他一些 SO 问题建议运行 $scope.$apply 以使我的范围持续存在。为此，我收到以下错误：

angular.js:13920 Error: [$rootScope:inprog] $digest already in progress

保持我的范围的正确方法是什么？即，将 get 请求的值分配给范围变量的正确方法是什么？

Answer 1

HTTP 请求异步运行。为了处理这个概念，您必须使用promises。

Angular 使用回调函数来处理异步 HTTP 调用。

在您的情况下，$scope.stuffData 未定义，因为 console.log 在 http 请求在 .then() 回调函数中获取数据之前运行。

如果您在.then() 函数中添加了console.log，就会解决此问题。

Answer 2

console.log() 是在获取数据之前执行的（http 调用是异步的），因此该值尚未定义。尝试检查函数内部的值，成功后：

$http({
    method: 'GET',
    url: 'http://localhost:8080/getStuff'
  }).then(function successCallback(response) {
      $scope.stuffData= response.data.length;
       console.log("amount is:" +$scope.stuffData);
    }, function errorCallback(response) {
       console.log("Response error"); 
    });
});

Answer 3

HTTP 调用是异步的。您的console.log 可能在您的应用检索数据之前被调用。调用console.log 时，$scope.stuffData 尚未定义。

将您的console.log 移至.then。

$http({
    method: 'GET',
    url: 'http://localhost:8080/getStuff'
}).then(function successCallback(response) {
      $scope.stuffData = response.data.length;
      console.log("amount is:", $scope.stuffData); // <-- It should work
}, function errorCallback(response) {
});

Answer 4

try with this one please--

$http({
    method: 'GET',
    url: 'http://localhost:8080/getStuff'
  }).then(function successCallback(response) {
      var obj = JSON.parse(response); 
      $scope.stuffData= obj.data.length;
      $scope.$apply();
      console.log($scope.stuffData);
    }, function errorCallback(response) {
    });




});