為什麼我的 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);
})

一旦資料加載，您就可以使用Promise 繼續處理:

一旦資料加載，您就可以使用Promise 繼續處理:

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

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;
}

將getUsers 函數標記為非同步，並使用wait 關鍵字暫停執行，直到Promise 解決：

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

你可以現在使用以下函數：透過了解Firebase 中的非同步執行，您可以有效地從資料庫存取資料並避免潛在的未定義引用。

以上是為什麼我的 Firebase 引用在「once()」函數之外變得未定義？的詳細內容。更多資訊請關注PHP中文網其他相關文章！