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 ?
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.
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. 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!