Discussion :

[Sinbad93]

Bonjour,
Quelque chose m'échappe, lorsque je fait une requête Fetch asynchrone, je suis dans l'attente de recevoir des données.
Ensuite je souhaite manipuler ces données, comme par exemple les ajouter dans une array pour pouvoir travailler dessus de manière globale.
Mais ce qu'il se passe c'est que je travaille sur une array undefined car la promesse ne s'est pas résolu.
Comment faire pour que mon array push les données reçu uniquement lorsqu'elle sont chargés et pas à l'état de promesse ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var allData = [];
 
function getOneProduct(product_id){
  let data;
  fetch('http://localhost:3000/api/things/' + product_id)
  .then(async response => {
    data = await response.json()
  .then(data => requestData = data);
    allData.push(requestData);
/* ici je rentre une promise dans mon array, et donc ensuite mon code ne fonctionne pas lorsque je veux travailler sur mon array*/
}
)}
 
console.log(allData); /*me retourne une promise, comment faire à partir de là pour demander à mon code de s'exécuter seulement quand les données sont arrivés ?*/

J'ai pas mal cherché et cela n'a pas l'air d'être un soucis pour la plupart des développeurs, j'ai peut être raté quelque chose ?
Alors oui biensur je pourrais utiliser un set timeout random de 1 à 2 s, mais quel interêt ? et personne ne télécharge des données à la même vitesse...

[mathieu]

à la place de "allData.push", passez les données à une fonction et vous pourrez ensuite analyser les données dans cette fonction.

[Doksuri]

si tu veux separer ta logique de recuperation de data & ta logique de traitement de donnees, ta function peu etre une promesse elle-meme

Code javascript :

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
const allData = [];
 
function getOneProduct(product_id) {
    return new Promise(resolve => {
        fetch(`http://localhost:3000/api/things/${product_id}`)
            .then(res => res.json())
            .then(data => {
                resolve(data);
            })
    });
}
 
getOneProduct(tonId)
    .then(data => {
        console.log('data recuperee : ', data);
        allData.push(data);//si jamais tu veux t'en servir ailleur
    });

[Sinbad93]

Bonjour, Merci à tous les deux pour votre aide,
Doksuri, la proposition n'a rien changé, je ne peux pas travailer directement sur allData tant que je ne suis pas sur que toutes les données sont implantés...
mathieu, en effet le fait de travailler dans une fonction est intéressant mais finalement ça ne me permet toujours pas de savoir si mes données sont chargées.

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
22
23
 
var allData = [];
 
function getOneProduct(product_id){
  let data;
  fetch('http://localhost:3000/api/things/' + product_id)
  .then(async response => {
    data = await response.json()
  .then(data => requestData = data);
    useData(requestData);
}
)}
 
 
function useData(data){
  allData.push(data);
  if (allData.length === 5){
  for (i in allData){
    console.log(allData[i]);
  }}
}
 
getOneProduct(/*je passe 5 id avec une boucle*/)

Voici le résultat, effectivement en mettant une condition avec if, cela permet d'attendre les 5 tours de boucle dans getOneProduct et à ce moment les données sont chargés, mais cela ne me parait pas propre :
-si les données mettent plus de temps à charger avec une autre connexion ou pour x ou y raison
-si je dois appeler un autre type de données plus lourdes qui ne seront pas chargés avant la fin de la boucle

Comment faites vous habituellement pour vous assurez que la promesse est résolu avant de travailler sur les données ?
Merci de votre attention et de votre aide

[NoSmoking]

Bonjour,
regarde du côté de Promise.all().

[Sinbad93]

Bonjour NoSmoking,
Merci pour ton aide,
Je connais (théoriquement) Promise.all(), si je ne dis pas de bêtise il me semble que cela sert à enchainer plusieurs promesses en simultanées, mais cela ne permet toujours pas de demander à ton programme d'attendre la résolution de la promesse pour effectuer une tâche en particulier ?