javascript - 使用 AngularJS 加载和使用数据

Question

我想了解它的逻辑，所以我只发布一些通用代码:

1) 我使用服务“loadData”从 JSON 文件获取数据:

return {
        myData: function(){
           return $http.get(path + "data.json");
        }
}

2)在主 Controller 中:

loadData.myData().then(function(result){
      $scope.vm.myData = result.data;
});

然后，无论我在哪里寻找:

console.log($scope.vm)

我拥有包含数据的所有对象，相反，如果我查找:

console.log($scope.vm.myData)

我总是“未定义”，而且我也不能在任何函数中使用它(唯一的方法是在上面的函数中查找它)。我想要的只是在开始时获取一些数据，然后在需要的地方使用它。

Answer 1

如果您的代码看起来像这样，那么第二个控制台语句将在异步调用返回之前(即在 promise 解析之前)触发。

loadData.myData()
   .then(function(result) {
      $scope.vm.myData = result.data;
      console.log(1, $scope.vm);  // Runs when the promise resolves
   });
console.log(2, $scope.vm);  // Runs once the data is requested (no guarantee the promise has resolved yet).

因此，任何需要访问调用返回的数据的工作必须放在then函数内，否则您无法保证数据是正确的可用。

上面的输出是:

2 undefined
1 [your data object]

有关 Angular 中的 Promise 和异步调用的更多信息，这是一个很棒的资源，并且附带漫画! http://andyshora.com/promises-angularjs-explained-as-cartoon.html