使用从Firebase获取的数据获取Javascript

Question

Web开发新手。我使用Firebase作为我的后端，我有一种情况，我需要在数据库中查询一个值，并使用返回的值在另一个查询中匹配到同一个数据库。

这是我的代码：

function dataLoad() {

    var valueThatINeedToUseElsewhere

    userReference.on('value',function(users){
        var currentUser = firebase.auth().currentUser.uid
        users.forEach(function(user){
            if(user.key === currentUser) {
                valueThatINeedToUseElsewhere = user.val().userName
                console.log(valueThatINeedToUseElsewhere)
            }
        })
    })
    console.log(valueThatINeedToUseElsewhere)
}

IF条件内的console.log记录正确的值。但是，上面的最后一个console.log没有记录任何内容，尽管变量名称在'on'函数之外声明。为什么会这样？我怎样才能真正使用'on'函数之外的数据？我需要使用它在另一个数据检索操作中执行类似的IF条件。

谢谢！

Answer 1

你现在可能会尝试这样做：

var valueThatINeedToUseElsewhere;
dataLoad();
doSomethingWith(valueThatINeedToUseElsewhere);

不幸的是，这不起作用，因为（正如Doug所说）数据是从Firebase异步加载的。当您尝试使用valueThatINeedToUseElsewhere时，该值尚未加载。

为什么这不起作用，一对三测试

如果您放置一些这样的日志语句，这是最容易看到的：

console.log("Before starting to load value")
userReference.on('value',function(users){
    console.log("Loaded value")
})
console.log("After starting to load value")

运行此代码时，会打印：

  

开始加载价值之前

     

开始加载值

     

加载值

这可能不是您预期的顺序。但它完美地解释了为什么你在尝试时无法 {/ em> valueThatINeedToUseElsewhere：它还没有加载。

重构问题

我发现处理这种情况的最佳方法是重新构建问题。您当前的代码是用＆＃34的逻辑编写的;首先我们加载值，然后我们用值＆＃34;做一些事情。对于异步加载，最好将其框架为＆＃34;首先开始加载数据。一旦数据开始加载，就用它做一些事情＆＃34;。

在代码中看起来像：

function dataLoad() {
    userReference.once('value',function(users){
        var currentUser = firebase.auth().currentUser.uid
        users.forEach(function(user){
            if(user.key === currentUser) {
                var valueThatINeedToUseElsewhere = user.val().userName
                doSomethingWith(valueThatINeedToUseElsewhere)
            }
        })
    })
}

正如您所看到的，我们已将需要数据的代码移动到数据可用时触发的回调。这样，当您致电doSomethingWith时，可以保证数据可用。我还将代码更改为使用once，（正如Doug所说）更适合您的用例。

还需要采取两个步骤，以提高代码的灵活性和性能。

传入一个名为的函数加载数据

首先关闭：通过上次更新，对doSomethingWith的调用是硬编码的，这意味着dataLoad()和doSomethingWith紧密相连。让它们更加分离通常会更好。为此，我们可以将一个所谓的回调函数传递给dataLoad，然后在加载数据时调用它。这非常与once()已经类似。让我们在实践中看到：

function dataLoad(callback) {
    userReference.once('value',function(users){
        var currentUser = firebase.auth().currentUser.uid
        users.forEach(function(user){
            if(user.key === currentUser) {
                var valueThatINeedToUseElsewhere = user.val().userName
                callback(valueThatINeedToUseElsewhere)
            }
        })
    })
}

没有太大的不同。但现在您可以像这样调用dataLoad：

dataLoad(doSomethingWith);

一旦数据加载，将使用数据调用doSomethingWith。

按键加载数据

最后的改变是优化。您当前的代码正在加载所有用户，而您只需要一个并知道他们的密钥。通过以下方式加载特定用户效率更高：

function dataLoad(callback) {
    var currentUser = firebase.auth().currentUser.uid
    userReference.child(currentUser).once('value',function(users){
        var valueThatINeedToUseElsewhere = user.val().userName
        callback(valueThatINeedToUseElsewhere)
    })
}

Answer 2

on（）是异步的并立即返回，这意味着您的控制台日志将显示未定义的值。您传递给on（）的回调仅在结果可用时才会运行，并且不能保证会多快发生。您应该只在完成后使用异步调用中的值 - 不要尝试使代码阻塞，直到某些异步调用完成。

如果您只需要一次某个位置的值，也可以考虑使用once（）而不是on（）。您可以使用其返回的承诺在加载所需数据后链接一些额外的工作。它也是异步的（就像返回promise的所有其他方法一样）。

要详细了解Firebase API为何异步，以及这对您的应用有何意义，read this blog。