Использование данных, возвращенных из Firebase fetch Javascript

on () является асинхронным и немедленно возвращается, что означает, что в журнале консоли будет отображаться неопределенное значение. Обратный вызов, который вы передаете on (), будет запущен только тогда, когда будут доступны результаты, и нет гарантии, как быстро это произойдет. Вы должны использовать значение из асинхронного вызова только после его завершения - не пытайтесь создать блок кода, пока не будет завершен какой-либо асинхронный вызов.

Также рассмотрите возможность использования once () вместо on (), если вам нужно значение в определенном месте только один раз. Вы можете использовать его возвращенное обещание, чтобы связать некоторую дополнительную работу после того, как он загрузит нужные данные. Он также является асинхронным (как и все другие методы, возвращающие обещание).

Чтобы узнать больше о том, почему API Firebase асинхронны и что это означает для вашего приложения, прочитай этот блог.

Скорее всего, вы сейчас пытаетесь сделать что-то вроде этого:

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

К сожалению, это не работает, поскольку (как говорит Дуг) данные загружаются из Firebase асинхронно. К тому времени, когда вы пытаетесь использовать valueThatINeedToUseElsewhere, значение еще не загружено.

Почему это не работает, тест один-три-два

Проще всего в этом убедиться, если вы разместите несколько таких операторов журнала:

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

Когда вы запускаете этот код, он печатает:

Before starting to load value

After starting to load value

Loaded value

Вероятно, это не тот порядок, которого вы ожидали. Но это прекрасно объясняет, почему вы не можете использоватьvalueThatINeedToUseElsewhere при попытке: он еще не загружен.

Переосмысление проблемы

Лучший способ справиться с этой ситуацией, который я нашел, - это переосмыслить проблему. Ваш текущий код написан с логикой «сначала мы загружаем значение, затем мы что-то делаем со значением». Для асинхронной загрузки лучше оформить это как «сначала начните загрузку данных. Как только данные начали загружаться, сделайте с ними что-нибудь».

В коде, который выглядит так:

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, что (как сказал Дуг) лучше для вашего варианта использования.

Необходимо предпринять еще два шага, чтобы повысить гибкость и производительность вашего кода.

Передавая функцию, которая называется однажды, данные загружаются

Во-первых: в этом последнем обновлении вызов 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)
    })
}