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 ?

[Doksuri]

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 ?

bah si... justement... developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

La méthode Promise.all() renvoie une promesse (Promise) qui est résolue lorsque l'ensemble des promesses contenues dans l'itérable passé en argument ont été résolues ou qui échoue

[Sinbad93]

Je suis étonné de voir que ce sujet n'a pas particulièrement posé de problème à d'autres avant moi,
Ce que j'en conclus c'est que lorsque que je fais un requête asynchrone le mieux est d'utilisé/ d'afficher directement mes données à l'endroit prévu plutôt que de les conserver dans un array ou autre pour les retravailler (même si je peux passer par une fonction pour diviser le code).
Je comprends alors que les requêtes asynchrone sont donc fait essentiellement pour cela, afficher ou récupérer des données directement sur la page. Ce qui du coup demande forcément une logique de gestion de la database compartimentés, minutieuse et impeccable afin de recevoir les données précisément comme je les souhaite pour ne pas avoir les retravailler.
Il est d'après moi toujours possible mais fastidieux de détecter leur chargement final avec des getter/setters.
Je vous remercie pour votre aide, je compte passer le sujet en résolu mais j'attend un peu au cas où quelqu'un aurais quelque chose à ajouter sur le sujet.

[Sinbad93]

bah si... justement... developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Ok super je n'avais pas saisi merci

[Sinbad93]

Je pensais avoir compris mais finalement pas,
j'ai passé directement mes données sur la page, plutôt que de les mettre dans une array,
je pensais que les données s'afficherais progressivement une fois que la promesse serait résolu, mais il semblerait que la page se charge avant l'arrivée des données et que cela ne s'actualise pas de manière dynamique. Donc je ne comprend vraiment pas comment se servir judicieusement des promesses et requetes asynchrones.
Si quelqu'un à la lumière, puisse t'il m'éclairer ! lol

[Doksuri]

et le code qui va avec ?

[Sinbad93]

le voici

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
24
25
26
function getOneProduct(product_id){
  let data;
  fetch('http://localhost:3000/api/things/' + product_id)
  .then(async response => {
    data = await response.json()
  .then(data => loadHTMLTable(data));})}
 
 
function loadHTMLTable(data) {
  const tableau = document.querySelector('table tbody');
 
let tableauHtml = "";
 for (i in data){
      tableauHtml += "<tr>";
      /*tableauHtml += `<td><img class="little_picture" src='${data[i]['imageUrl']}'></td>`;*/
      tableauHtml += `<td>${data[i]['name']}</td>`;
      tableauHtml += `<td>${data[i]['price']}</td>`;
      tableauHtml += `<td> Quantité <span class=quantity>${productCountBefore(data[i]['_id'])}</span>
      <button onclick=onclick="removeProductToBucketClick()" >-</button>
    <button onclick="addProductToBucketClick()" >+</button></td>`;
      tableauHtml += "</tr>";
 }
  /*rentre dans le DOM */
  tableau.innerHTML = tableauHtml;
}
     })}

Je précise que les données sont valides, la requête fonctionne, si je fais un console.log de data après un setTimeOut

[Doksuri]

d'ou sors-tu cette syntaxe du fetch ?

fetch('http://localhost:3000/api/things/' + product_id)
.then(async response => {
data = await response.json()
.then(data => loadHTMLTable(data));
})

Code javascript :

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

1
2
3
4
5
function getOneProduct(product_id){
        fetch('http://localhost:3000/api/things/' + product_id)
            .then(response => response.json())
            .then(data => { loadHTMLTable(data); });
    }

pourquoi tu as })} a la fin ?

[Sinbad93]

Merci pour VOTRE aide Doksuri et les autres membres,
j'ai compris, je m'en tiens donc au bilan sur requ async que j'ai fait plus haut, pour moi c'est ok.
Les deux derniers posts sont une faute de ma part, il y avait simplement un soucis sur ma fonction loadHtmldata,
Au niveau de la requête fetch, elle fonctionne Doksuri, c'est la bonne syntaxe pour de l'asynchrone, la tienne est synchrone. D'où la différence.
J'arrive bien à afficher les données avec ma requête, à condition bien sûr de les afficher directement (je dirais même mieux progressivement vu que async) et de ne pas les récupérer dans une liste ou autre.
N'hésitez pas à me mp si vous souhaiter poursuivre sur le sujet,
Bon code à tous

[Doksuri]

il y a un quiproquos quelque part car fetch, est de base asynchrone... developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch

Cela fournit aussi une méthode globale fetch() qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.