函数内的 Firebase 查询 returns null

Question

我正在尝试使用 javascript 和 firebase 创建学生出勤跟踪器应用程序。

但是我有一个问题，我正在尝试在函数内部查询并使用函数 return 那些数据。

但是当我尝试时，return什么都没有。 'undefined'

这是我的代码

var root = 'https://path.firebaseio.com';
function initFireSubjects(){
   var db = {};
   db.connection = new Firebase(root + '/subjects');
   db.addSubject = function (year, code, name) {
       this.connection.child(year).push({
           code: code,
           name: name
       });
    };
    db.getAll = function (year) {
        var value;
        this.connection.child(year).on('value', function (snapshot) {
            value = snapshot.val();
        });
        return value;
    };
}

这是我用来测试它的代码

var db = initFireSubjects();
var test = db.getAll('2014');
console.log(test);

数据结构如下所示

subject:{
    '2014':{
        randomKey1:{
            code:'eng1',
            name:'English 1'
        },
        randomKey2:{
            code:'math1',
            name:'Mathematics 1'
        },
        randomKey3:{
            code:'sci1',
            name:'Science 1'
        }
    },
    '2015':{
        randomKey4:{
            code:'polsci1',
            name:'Political Science 1'
        },
        randomKey5:{
            code:'comprog',
            name:'Computer Programming'
        }
    }
}

如果我这样做的话，情况是我可以提取数据

db.getAll = function(year){
    var value;
    this.connection.child(year).on('value',function(snapshot){
        value = snapshot.val();
        console.log(value);
    }
}

我不知道为什么它不能以面向对象的方式拉取数据。

有输入吗？

谢谢。

Answer 1

您所看到的与 OO 几乎没有关系，但一切都与 Firebase（与大多数现代网络一样）本质上是异步的这一事实有关。

当您使用 on 向 Firebase 注册事件处理程序时，Firebase 启动以检索 并监控 数据地点。由于检索数据可能需要一些时间（并且更新的数据可能随时到达）浏览器继续执行您的 JavaScript。一旦数据可用，就会调用您的回调函数。

如果我们以稍微不同的方式编写您的代码，则更容易看出发生了什么：

/* 1 */ db.getAll = function (year) {
/* 2 */     var value;
/* 3 */     this.connection.child(year).on('value', db.onValue);
/* 4 */     return value;
/* 5 */ };
/* 6 */ db.onValue = function(snapshot) {
/* 7 */     value = snapshot.val();
/* 8 */     console.log(value);
/* 9 */ });

当您的 getAll 函数执行时，它首先声明一个 value 变量。在 3 行中，它告诉 Firebase 在从服务器获取年份值时调用 db.onValue。 Firebase 开始检索该值，但您的 JavaScript 继续执行。所以在第 4 行你然后 return value，它仍然是未初始化的。所以你 returning undefined.

有时，您请求的值会从 Firebase 的服务器返回。发生这种情况时，将调用 onValue 函数并在第 8 行打印出年份。

有一件事可能会帮助您接受为什么这是有用的：如果另一个现在更新您的 Firebase 中的年份，onValue 函数将再次被调用。 Firebase 不仅会检索数据一次，还会监视数据更改的位置。

异步加载并不是 Firebase 独有的。几乎每个在 JavaScript 开始为现代网络编程的人都会在某个时候被这个问题困扰。你能做的最好的事情就是迅速接受并拥抱异步性（这甚至是一个词吗？）并处理它。

处理它，通常意味着您将要使用新值执行的操作移动到回调函数内部。因此，我在第 8 行添加的 console.log 也可能会用 document.querySelector('#currentyear').textContent = value.

之类的内容更新您的 UI

另请阅读此答案（它使用的是 AngularFire，但问题是相同的）：Asynchronous access to an array in Firebase 以及从那里链接的其他一些问题。

函数内的 Firebase 查询 returns null

Firebase Query inside function returns null

javascript

oop

firebase