Attente de la résolution d'une promise dans une fonction appelante
Bonjour,
J'essaye de me mettre à Javascript (non sans mal) et je rencontre quelques difficultés avec le traitement d'une tâche asynchrone.
Je fais une application Angular qui récupère des données stockées via le service Firebase.
Dans mon component j'ai une interface userItem qui contient entre autre un id et une picture (pour l'URL d'une image de profil).
Je récupère les URL des fichiers qui sont dans le storage de Firestore via la fonction getDownloadURL() qui est une méthode qui renvoie une promise (traitement asynchrone).
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| async getURLPicture(data: UserItem[]) {
const storage = firebase.storage();
const promises = [];
data.forEach( (item) =>{
const pathReference = storage.ref(item.userId + '/profile.jpg');
promises.push(pathReference.getDownloadURL());
})
const urlsArray = await Promise.all(promises);
for (let index = 0; index < data.length; index++){
data[index].picture = urlsArray[index];
}
} |
Cette fonction marche bien. Elle commence par lancer "en parallèle" les fonctions getDownloadURL() pour récupérer toutes les URL dans un tableau puis elle met à jour les pictures pour chaque user
Mon problème est qu'elle est appelée dans une autre fonction onRefresh()
Code:
1
2
3
4
5
6
7
| onRefresh(): void {
.....
this.getURLPicture(data)
this.source.load(data);
this.dataState = TableDataState.ready;
} |
Malheureusement l'affichage, géré par cette fonction onRefresh(), se fait avant que le travail de la fonction getURLPicture ne soit terminé. Résultat les user.picture sont undefined et les photos de profil ne s'affichent pas.
C'est sans doute une question très simple pour un pratiquant de ce langage mais comment puis je faire pour attendre la fin de l'exécution de la fonction asynchrone getURLPicture dans la fonction qui l'appelle.
Merci beaucoup
