Comment éviter la perte de référence lors de la récupération de données de manière asynchrone avec Firebase ?

Explorer la nature asynchrone de Firebase : résoudre la perte de référence

Firebase, associé à AngularJS, permet une récupération efficace des données, y compris des listes d'utilisateurs. Bien qu'accéder à la liste des utilisateurs avec la fonction once() ne pose aucune difficulté, la récupérer au-delà de la portée de cette fonction s'avère insaisissable. Cet article explore les causes sous-jacentes et propose des solutions complètes.

Comprendre le piège asynchrone

La récupération de données de Firebase fonctionne de manière asynchrone, ce qui rend l'exécution du code non linéaire. Pour illustrer cela, considérons l'extrait de code suivant :

this.getUsers = function() {
    var ref = firebase.database().ref('/users/');
    ref.once('value').then(function(snapshot) {
        // User list processing
        console.log(users); // Output: All users
    });
    console.log(userList); // Output: Undefined
}

Lors de l'exécution, la sortie attendue de la liste d'utilisateurs à la fin reste insaisissable, malgré la récupération réussie dans le bloc then(). Cela est dû au fait que le code s'exécute dans le désordre :

1. Journal "avant d'attacher l'écouteur"
2. Attacher l'écouteur pour récupérer les données utilisateur
3. Journal "après avoir attaché l'écouteur"
4. Une fois l'auditeur terminé, enregistrez « got value » et traitez la liste d'utilisateurs
5. Enregistrez « non défini » puisque la liste d'utilisateurs n'a pas encore été attribuée

Stratégies de capture de la Liste des utilisateurs

1. Utiliser le rappel

Une approche directe consiste à déplacer tout le code dépendant de la liste d'utilisateurs dans la fonction de rappel. Cela restructure la logique de « charger la liste puis imprimer » à « imprimer chaque fois que la liste est chargée ».

ref.once('value', function(snapshot) {
    // User list processing
    console.log(users); // Output: All users
})

2. Tirer parti des promesses et des rappels

Les promesses offrent une solution plus élégante, vous permettant de renvoyer une promesse à partir de votre fonction getUsers(). Cela vous permet d'utiliser le rappel once() comme avant, mais avec un emballage de promesse supplémentaire :

this.getUsers = function() {
    return ref.once('value').then(function(snapshot) {
        // User list processing
        return users;
    })

...

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

3. Adoptez Async/Await

Avec l'utilisation de promesses, vous pouvez profiter de la syntaxe async/wait pour une approche plus synchrone :

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

Cependant, c'est important à noter que la fonction getUsers() reste une fonction asynchrone, nécessitant que le code appelant gère la promesse ou le futur en conséquence.

En adoptant ces stratégies, vous pouvez exploiter efficacement les capacités asynchrones de Firebase et éviter la perte de référence au-delà la portée de la fonction once().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!