arrays - 异步访问 Firebase 中的数组

Question

这是我的代码:

var userRef = new Firebase("https://awesome.firebaseio.com/users/");

var tokenRef = userRef.child(key+'/tokens');
tokenRef.once('value', function(snapshot){

  var userTokenSync = $firebase(tokenRef);
  var userTokens = userTokenSync.$asArray();


  console.log(userTokens);
  console.log(userTokens[0]);
        
  for(var i=0, len = userTokens.length; i < len; i++) {
     console.log(userTokens[i]);
  }
  console.log('done');
})

此代码从 firebase 获取用户的 token ，我只想浏览 token 数组。
这是控制台给我的:

如您所见，我无法访问该数组。你知道我该怎么做吗？
提前致谢。

Answer 1

欢迎来到异步加载 101。

  var userTokens = userTokenSync.$asArray();

  console.log(userTokens);
  console.log(userTokens[0]);

  for(var i=0, len = userTokens.length; i < len; i++) {
     console.log(userTokens[i]);
  }
  console.log('done');

该片段的第一行 开始从 Firebase 加载数据。但是加载可能需要一些时间。而且由于浏览器不想阻止事情，它会继续执行脚本。

当浏览器执行你的 console.log(userTokens);数据很可能尚未加载。所以它只是将对象作为占位符打印到控制台。

当它到达 for 时循环，数据可能已经或可能尚未从 Firebase 加载。

在某些时候，您单击了记录的 userTokens 旁边的箭头。 .到那时，数据已从 Firebase 加载，控制台显示最新数据。

该解决方案由 AngularFire 以 promise 的形式提供。 AngularFire promise 在 future 的某个时候为您提供数据。如果你有一段代码应该只在加载数据时执行，你可以这样写:

  var userTokens = userTokenSync.$asArray();

  console.log(userTokens);
  console.log(userTokens[0]);

  userTokens.$loaded(function(userTokens) {
    for(var i=0, len = userTokens.length; i < len; i++) {
      console.log(userTokens[i]);
    }
    console.log('done');
  });

  console.log('at last line, but not done yet');

更新

请注意，上面是何时使用 $loaded 的一个不好的示例。 .由于$loaded只会触发一次，它只会记录数组的初始内容。如果您只是想查看数据是否/何时加载，惯用的方法是添加 userTokens范围:

$scope.userTokens = userTokens;

并将其添加到您的 View /HTML:

<pre>{{ userTokens | json }}</pre>

AngularFire 现在将监视用户 token 何时以任何方式加载或修改，并在发生这种情况时告诉 AngularJS 更新 View 。

另见这些:

Firebase, AngularJS and GeoFire - wait for response from factory

Firebase angularfire child.$asObject give properties undefined

angularfire - why can't I loop over array returned by $asArray?

Passing variable in parent scope to callback function

Trying to get child records from Firebase

是的......我们经常收到这个问题。