Heim > Web-Frontend > js-Tutorial > Hauptteil

Warum wird meine Firebase-Referenz außerhalb der Funktion „once()' undefiniert?

Susan Sarandon
Freigeben: 2024-11-07 02:54:03
Original
462 Leute haben es durchsucht

Why Does My Firebase Reference Become Undefined Outside the `once()` Function?

Warum verliert Firebase die Referenz außerhalb der Funktion Once()?

Firebase nutzt asynchrone Verarbeitung, was bedeutet, dass das Abrufen von Daten aus der Datenbank nicht erfolgt nacheinander ausgeführt. Daher führt der Versuch, unmittelbar nach dem Anhängen eines Listeners in der Funktion userService.getUsers auf die Benutzerliste zuzugreifen, nicht zur gewünschten Ausgabe.

Der bereitgestellte Codeausschnitt:

.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'
    }
}]);
Nach dem Login kopieren

Demonstriert dies asynchrones Verhalten. Die Konsolenausgabe wäre:

before attaching listener
after attaching listener
got value
Nach dem Login kopieren

Um dieses Problem zu beheben, haben Sie drei Möglichkeiten:

1. Verwenden Sie die Benutzerliste im Rückruf:

Verschieben Sie den gesamten erforderlichen Code, der auf der Benutzerliste ausgeführt wird, in den Rückruf:

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

2. Geben Sie ein Versprechen zurück:

Geben Sie ein Versprechen von userService.getUsers zurück und verketten Sie nachfolgende Vorgänge damit:

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);
    });
}
Nach dem Login kopieren

Sie können das Versprechen dann verwenden, um die Verarbeitung fortzusetzen, sobald die Daten geladen sind :

userService.getUsers().then(function(userList) {
    console.log(userList);
})
Nach dem Login kopieren

3. Verwenden Sie Async und Await (erfordert ES2017-Unterstützung):

Markieren Sie die getUsers-Funktion als asynchron und verwenden Sie das Schlüsselwort „await“, um die Ausführung anzuhalten, bis das Versprechen gelöst ist:

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;
}
Nach dem Login kopieren

Das ist möglich Verwenden Sie nun die Funktion wie folgt:

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

Durch das Verständnis der asynchronen Ausführung in Firebase können Sie effektiv auf Daten aus Ihrer Datenbank zugreifen und potenzielle undefinierte Referenzen vermeiden.

Das obige ist der detaillierte Inhalt vonWarum wird meine Firebase-Referenz außerhalb der Funktion „once()' undefiniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!