为什么我的 Firebase 引用在'once()”函数之外变得未定义？

为什么Firebase会在once()函数之外丢失引用？

Firebase使用异步处理，这意味着从数据库检索数据不是依次执行。因此，在 userService.getUsers 函数中附加侦听器后立即尝试访问用户列表将不会产生所需的输出。

提供的代码片段：

.service('userService', [function() {
    this.getUsers = function() {
        var users;
        var userList;
        var ref = firebase.database().ref('/users/');
        ref.once('value').then(function(snapshot) {
            users = snapshot.val();
            for(var key in users) {
                users[key].id = key;
                // do some other stuff
            }
            console.log(users); // outputs all users
        }).then(function(){
            userList = users; 
            console.log(userList); // outputs all users
        },(function(error){
            alert('error:  ' + error);
        });
        console.log(userList); // outputs 'undefined'
    }
}]);

演示了这一点异步行为。控制台输出将为：

before attaching listener
after attaching listener
got value

要解决此问题，您有三个选项：

1。在回调中使用用户列表：

将所有对用户列表进行操作的必要代码移至回调中：

ref.once('value', function(snapshot) {
        users = snapshot.val();
        for(var key in users) {
            users[key].id = key;
        }
        console.log(users); // outputs all users
    })

2.返回一个 Promise：

从 userService.getUsers 返回一个 Promise 并将后续操作链接到它：

this.getUsers = function() {
    var ref = firebase.database().ref('/users/');
    return ref.once('value').then(function(snapshot) {
        users = snapshot.val();
        for(var key in users) {
            users[key].id = key;
            // do some other stuff
        }
        return(users);
    }).catch(function(error){
        alert('error:  ' + error);
    });
}

一旦数据加载，您就可以使用 Promise 继续处理:

userService.getUsers().then(function(userList) {
    console.log(userList);
})

3.使用 Async 和 Await（需要 ES2017 支持）：

将 getUsers 函数标记为异步，并使用 wait 关键字暂停执行，直到 Promise 得到解决：

this.getUsers = async function() {
    var ref = firebase.database().ref('/users/');
    const snapshot = await ref.once('value');
    const users = snapshot.val();
    for(var key in users) {
        users[key].id = key;
        // do some other stuff
    }
    return users;
}

你可以现在使用如下函数：

async function getAndLogUsers() {
    const userList = await userService.getUsers();
    console.log(userList);
}

通过了解 Firebase 中的异步执行，您可以有效地从数据库访问数据并避免潜在的未定义引用。

以上是为什么我的 Firebase 引用在'once()”函数之外变得未定义？的详细内容。更多信息请关注PHP中文网其他相关文章！