Bonjour,

J'essaye de récupérer la réponse de ma requête mais je suis bloqué.
J'ai bien des données qui me sont renvoyées, je veux juste les stocker.
Je cherche à avoir le xhr.responseText dans ma variable data, mais ça me met undefined dans la console

j'ai aussi essayé de l'afficher avec document.write et de mettre le contenu de la page dans une variable, qui devient "empty string".
Aussi essayé d'appeler une fonction dans le if pour tenter de sauvegarder le resultat dans une variable. Echec aussi.

Comment faire ? Merci pour votre aide.

var data ; 

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'https://api.binance.com/api/v3/ticker/24hr?symbol=BTCUSDT');
xhr.onreadystatechange = function() {
  if (xhr.readyState  ==XMLHttpRequest.DONE) { 
    data = xhr.responseText ; 
  }
};

xhr.send();

console.log(data); 

Parce que tel quel, ton console.log est probablement exécuté avant que la réponse ne te parvienne ( les joies de l'asynchrone ).

Si tu met console.log(data) après ta ligne 7, dans le corps du callback de onreadystatechange, tu as quelque chose ?

Merci pour ta réponse,

Oui si je met console.log(data) dans le if ça fonctionne. Et si je le met à la ligne 8 ça affiche aussi.
Mais ça ne résout pas mon problème

Sinon il n'y a pas un moyen de "bloquer" le script tant que la réponse ne m'est pas parvenu ?

Edit :

En mettant "false" dans xhr.open, ça m'a l'air de fonctionner.

var data ; 

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'https://api.binance.com/api/v3/ticker/24hr?symbol=BTCUSDT',false);
xhr.onreadystatechange = function() {
  if (xhr.readyState  ==XMLHttpRequest.DONE) {
    
    data = xhr.responseText ; 
   
  }
};

xhr.send();

document.write(data)

-
Edité par Sooyouz92 15 septembre 2021 à 11:32:41

Oui, avec l'argument false, tu demandes explicitement à ce que la requête XMLHttpRequest soit effectuée de manière synchrone ( donc javascript attend sagement le résultat avant de poursuivre ).

Sinon il y a différents moyens de gérer l'asynchrone ( javascript continue l'exécution du code sans attendre le résultat de la requête, ce qui fait que data n'a pas encore de valeur au moment où tu demandes le console.log ), mais je commence tout juste à y comprendre quelque chose  donc je préfère ne pas te dire de bêtises. En gros il faut traiter la réception des données sous forme d'évènement. Quand les résultats arrivent, ça déclenche une fonction dans laquelle tu peux traiter les résultats. Et il faut donc soigneusement éviter de travailler sur ces données dans le script principal, où elles ne seront probablement pas encore disponibles.

Petite doc MDN sur XMLHttpRequest :

Utiliser XMLHttpRequest - Référence Web API | MDN

qui explique assez bien la démarche. Tes données pourront être traitées dans la callbck de l'eventListener correspondant à des données reçues avec succès, et pas ailleurs. Par exemple, si tu veux afficher les données reçues, cette callback pourra modifier ton document ( manipulation du DOM ), si tu veux que les données soient affichées quand l'utilisateur clique sur un bouton, ton script principal fait que ce bouton affiche "Les données ne sont pas encore reçues", et dans la callback, tu remplace l'affichage de ce message par l'affichage de tes données.

Merci pour tes explications, je suis une bille en code. Je vais me renseigner sur toutes ces pistes

-
Edité par Sooyouz92 15 septembre 2021 à 12:04:43

Pas de quoi. Je peux pas dire que je sois une pointure ( par exemple je n'ai jamais encore eu l'occasion d'essayer des XMLHttpRequests, mais je commence à assimiler quelques principes

Bonjour,

L'asynchrone c'est ce qui rends le js intéressant et performant, plutôt que de rendre le js synchrone, essaye plutôt de réfléchir avec une logique asynchrone. Tout le code où tu as besoin de la réponse, tu peux le mettre quand tu as la réponse.

Je suis d'accord avec piero5673, tous ces concepts sont assez nouveaux pour moi, parce que j'ai appris le js il y a plus de dix ans, et que beaucoup de choses ont bien changé de ce point de vue là ( jamais entendu parler d'asynchrone dans les tutos que j'ai lu à cette époque, bien que XMLHttpRequest existait déjà ), mais ils apportent une dynamique nouvelle à javascript. Simplement il faut revoir un peu sa manière de penser un page internet, et voir le document fourni par le serveur comme une base sur laquelle on va pouvoir déployer des fonctionnalités.

Une bonne connaissance de l'asynchrone et de la manipulation du DOM permettent de faire beaucoup de choses, et transformer une simple page statique en une sorte d'application, qui peut minimiser les interactions avec le serveur ( demander quelques données JSON plutôt que de recharger des pages complètes ) et fluidifier l'utilisation de ton site.

Après, si je peux te donner ce simple conseil, concentre-toi déjà sur ton projet de base, et quand tu en auras une version satisfaisante, mets-toi au défi de l'améliorer.
( j'avoue moi-même avoir laissé un setTimeOut() pour contourner le problème d'un traitement asynchrone dans mon projet actuel. Je sais que je dois y revenir plus tard, et j'ai appris pas mal de trucs sur l'asynchrone qui me permettront de faire plus "propre", mais pour le moment je prend un peu le temps de "me faire plaisir" en faisant avancer une autre partie du projet qui me semble plus facile ).
Garde simplement à l'esprit qu'il existe des moyens comme les mots clé async / await, les propriétés .then() et .catch() des promises, et aussi la gestion par les callbacks des eventListeners sur lesquelles tu peux trouver tout un tas de docs et d'exemples.