Discussion :

[yoshï]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Toufik83]

Bonjour,

Et si vous essayez de retourner le tableau des données avec return et utiliser la fonction de rappel (callback) then :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
async getURLPicture(data: UserItem[]) {
....
return data;
}

Puis la fonction onRefresh :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
onRefresh(): void {
       .....
       this.getURLPicture(data).then(d=>{
          console.log('Données :',d);//voyez vous cette ligne dans la console ?
          this.source.load(d);
          this.dataState = TableDataState.ready;
       });
 
}

[Doksuri]

async va de paire avec await non ? (je n'utilise pas souvent cette syntaxe : je prefere un bon gros .then() )

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
async maFunction(){...}
await result = maFunction();

[yoshï]

Merci beaucoup Toufik83.
La solution fonctionne très bien! Je vais juste rajouter un catch en cas de pb avec la callback.

@Doksuri

async va de paire avec await non ?

Oui le await est bien présent dans la fonction getURLPicture (il permet d'attendre la résolution des promises pour récupérer toutes les URL dans un tableau)

[mathieu]

je n'ai pas compris ce que cela apporte de mettre "await" à la ligne const urlsArray = await Promise.all(promises);.
il suffirait de faire le traitement dans "then" non ? comme cela par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
getURLPicture(data: UserItem[])
{
 
	const storage = firebase.storage();
	const promises = [];
 
	data.forEach(item => {
		const pathReference = storage.ref(item.userId + '/profile.jpg');
		promises.push(pathReference.getDownloadURL());
	})
 
	return Promise
		.all(promises)
		.then(urlsArray => {
			urlsArray.forEach((url, index) => {
				data[index]["picture"] = url;
			}
		})
	;
 
}

ou peut être encore plus simple en stockant la valeur après chaque "then" de "getDownloadURL" comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
getURLPicture(data: UserItem[])
{
 
	const storage = firebase.storage();
	const promises = [];
 
	data.forEach((item, index) => {
 
		const pathReference = storage.ref(item.userId + '/profile.jpg');
 
		promises.push(
			pathReference.getDownloadURL()
				.then(url => data[index]["picture"] = url)
		);
 
	})
 
	return Promise.all(promises);
 
}

[Dave Hiock]

\ô/

il suffirait de faire le traitement dans "then" non ?

il me semble aussi

Peut-être pour une clarification-lisibilité du code, c'est souvent ce que j'entend !