Maison > interface Web > js tutoriel > Comment éviter la perte de référence lors de la récupération de données de manière asynchrone avec Firebase ?

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

Mary-Kate Olsen
Libérer: 2024-11-07 01:19:03
original
782 Les gens l'ont consulté

How Do You Prevent Reference Loss When Fetching Data Asynchronously with 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
}
Copier après la connexion

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
})
Copier après la connexion

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);
})
Copier après la connexion

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);
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal