Soucis temps d'acquisition données serveur sur une API

Probleme résolu avec ce code:

const tempExt1 =[]
var tempExt2 = []
var tempInt1 =[]
var tempCave1 =[]
var dateServer1 =[]

document.addEventListener('DOMContentLoaded', function() {
json24();
async function json24(){

     const response = await fetch('http://localhost:8080/api/temps');

    data = await response.json();

      var i=0;
      for (let r of data){
        tempExt1[i]=r.tempExt;
        tempInt1[i]=r.tempCave;
        tempCave1[i]=r.dateServer;
        dateServer1[i]=r.tempInt;
        i+=1
      }

          var ctx = document.getElementById('myChart').getContext('2d');

          new Chart(ctx, {
            type: 'line',
            data: {
              labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
              datasets: [{
                label: 'Tempetrature des dernière 24 heures',
                data: tempExt1,
                borderWidth: 1
              }]
            },
            options: {
              responsive: true,
              scales: {
                y: {
                  suggestedMin: 20,
                  beginAtZero: true
                }
              }
            }
          });
         };
  });

Je ne sais pas pourquoi exactement là ça fonctionne, donc si quelqu'un peu m'expliquer ça serait nickel.

Merci

Hello :)

Alors c'est un truc qui a été mal foutu dans JS x)

En gros dans tu fait ta fonction comme ça

promise.then(response => response.json())
  .then(commits => {                                        
    var i=0
    for (let r of commits){
      tempExt1[i]=r.tempExt;
      tempInt1[i]=r.tempCave;
      tempCave1[i]=r.dateServer;
      dateServer1[i]=r.tempInt;
      i+=1
    }
    i=0
    var tempExt2=[]
    for(let res of tempExt1){
      console.log(res);
      tempExt2[i]=res
      i+=1
    }
  });

Tu lance une promise, donc tu est dans un process de promise, tu dis à la promise de passer la reponse en json, avec ton then tu lui dit que quand la réponse est bien arrivé en json tu doit faire telle action, sauf que tu est toujours dans la promise, du coup tu n'as pas de json tu as une pending promesse

Dans ton deuxieme code

    const response = await fetch('http://localhost:8080/api/temps');

    data = await response.json();

Tu définit une variable, le await c'est pour lancer une promise (pour simplifier x)), la promise se lance, il n'y a pas de then, la promise termine son process, et place le vrai json dans la variable

Et la ta variable a vraiment le résultat du json, et pas une pending (une instance en attente)

Bref la différence c'est que dans le premier code tu était toujours dans la configuration de ta promise alors que dans ton deuxième code tu as quitté l'instance :p La deuxième version c'est bien ce qu'il faut faire ^^

Après si tu veux passer par des then/catch, il faut utiliser un paquet comme Axios par exemple

Merci pour les explications popotte,

Donc si je résume les promesses c'est pour quand on ne veut pas faire attendre le systeme et que l'on a pas besoins des données à l'ouverture de la page web.
Cela permet de continuer le chargement des données pendant l'ouverture de la page.

Alors que await et async prépare les données et attend le chargement de celles ci avant de continuer le reste du code.

C'est bien cela?

En soit oui c'est bloquant dans l'idée mais dans le principe cela reste une promesse derrière.

Le mieux serait de créer le chart sans data, de fetch les data et de mettre le retour dans le charte. Et pendant que les data se chargent tu peux afficher un truc sur ton graphe pour dire "en cours de chargement".

Après c'est si seulement tu veux aller plus loin.

De rien :)

Alors les promesse c'est pour lancer un process à la suite, niveau architecture tu peux enchainer des process d'une instance avec les then, dans ton exemple tu a fait un then en mettant commits en argument, tu pensais recevoir le resultat de la promesse, et donc que le process était fini à partir du then

Mais nope, quand tu fait un then dans une promesse tu est toujours dans une promesse :p

Reprends ton code qui ne fonctionne pas et dans ton then mets console.log(commits) tu devrais avoir une pending promise ou un truc du genre, enfin une instance qui veut dire que la promise ne s'est pas encore lancée mais est toujours en configuration et attends de voir ce que tu veux faire dessus :p

Après le système de Promise c'est pas vraiment adapté à ce que tu veux faire, en théorie tu veux faire un Promise.all mais bon c'est le genre de truc qui va vite virer au bricolage, async/await c'est plus adapté pour un simple fetch ^^