javascript - AngularJS - $scope 变量不在函数外部存储数据

Question

我的 Controller 中有一个像这样的非常简单的函数:

fetchUsers = function () {
  UserService.getUsers().
  success(function(data, status) {
    $scope.users = data.users;
    console.log($scope.users);
  });
};

fetchUsers();

console.log($scope.users);

它基本上是使用 service 从 API 检索一些数据，函数内部的 console.log 工作正常并且将一个数组发送到 [Object Object] 的控制台，我可以打开它并查看我所有的用户没有问题。但是，当我通过调用 fetchUsers() 并运行 console.log 将它放在函数之外时，我只是得到一个返回的空数组，其中 [] 输出到控制台。

谁能想到会导致这种情况的任何事情？我有点困惑。

Answer 1

啊，我看到你终于被 javascript 的异步代码击中了。并非一切都按顺序运行。

例如如果我有这段代码

setTimeout(function(){
    var test = 'hello';
    console.log('first test : ' + test);
}, 1000)

console.log('second test : ' + test);

您会注意到，第二个测试不会返回任何内容，即使之前设置了测试(根据行号)。现在你可能会想，那么你将它设置为 1000 毫秒(但尝试使用相同的代码并将其设置为 0 秒，你会看到相同的效果。这是由于用于管理异步代码的事件循环 -基本上你的 setTimeout 中的任何内容都放在优先级的末尾，这意味着当调用第二个控制台日志时 - 测试尚未定义。

为什么要异步？浏览器的问题是 UI 和 javascript 在同一个线程上运行，所以想象一下，如果 setTimeout 卡在那里并等待整整 1 秒，您的 UI 中的任何内容都不起作用 - 它会卡住。

话虽如此，异步代码的另一个重要用途是对服务器的 http 请求。这些请求可能需要不同的时间，这意味着如果您使用同步代码，您的 UI 将会卡住。想象一下 facebook - 它不断从其服务器检索数据。

回到您的代码，下面的这个方法从服务器检索数据

UserService.getUsers().
  success(function(data, status) {
    $scope.users = data.users;
    console.log($scope.users);
  });

success 函数内的内容同样是异步的，因此无论您在其后放置什么都会立即运行，而 success 函数内的任何内容都会在您的“ promise ”或请求得到满足后运行。

因此你可能有

fetchUsers();

console.log($scope.users);

但注意 $scope.users 是在这个 console.log 之后设置的