javascript - Firebase，异步检索数据

Question

我在 javascript 中写了一个 promise 来延迟动画，直到从我的 firebase 数据库中检索到一些数据。问题是由于某种原因，promise 不起作用，并且代码没有异步运行。我没有正确使用这个 promise ，还是有其他问题？

var name = document.querySelector('.name')

new Promise (function() {
        firebase.database().ref('users/' + userId ).on('value', function(snap) {
            console.log('first');   
            name.innerText = snap.child('name').val();
        });
    }).then(console.log('second'));

我的问题是，当我检查控制台时，我发现代码没有异步运行，我会看到消息以错误的顺序记录，先是“第二”，然后是“第一”。

Answer 1

第一个问题是(正如我对 cartant 的回答的评论)on() 处理程序可以被多次调用，因此不能被视为 promise 。

如果你只关心节点的当前值，你可以使用once()，它返回一个promise:

var name = document.querySelector('.name')

firebase.database().ref('users/' + userId ).once('value', function(snap) {
    console.log('first');   
    name.innerText = snap.child('name').val();
}).then(function() { console.log('second') });

或者，如果您也确实关心值的变化，您可能希望继续使用on()。但在那种情况下，您应该传入一个回调。

var name = document.querySelector('.name')

firebase.database().ref('users/' + userId ).on('value', function(snap) {
    console.log('first');   
    name.innerText = snap.child('name').val();
});

如果你想明确地检测其中的第一个值，做这样的事情:

var name = document.querySelector('.name'),
    isFirst = true;

firebase.database().ref('users/' + userId ).on('value', function(snap) {
    console.log('first');   
    name.innerText = snap.child('name').val();
    if (isFirst) {
        console.log('second');
    }
    isFirst = false;
});