Récupérer les données de la requête AJAX

Bonjour à toutes et à tous,

Je viens vous poser une question qui est certainement terriblement basique, mais je ne parviens à trouver la solution et ça me rend bientôt fou.

J'aimerai créer une fonction JS dans laquelle s'exécute une requête AJAX visant à récupérer des données que je veux utiliser par la suite.

J'ai le code suivant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function ajaxBase(cible) { const xhr = new XMLHttpRequest(); xhr.open("get", `${cible}`, true); xhr.send(); xhr.onload = function () { if (this.status === 200) { const data = JSON.parse(this.responseText); return data; } }; }

---

J'aimerai pouvoir faire appel à ma fonction "ajaxBase()" dans ma page JS pour récupérer les données et les gérer ensuite comme bon me semble en écrivant qqch comme :

Code:

---

1 2	const donneesRecues = ajaxBase('page.txt');

---

Sauf que je n'y arrive pas. Le "return data" de ma fonction callback ne m'est pas retourné et ma variable "const donneesRecues" reste donc désespérément "undefined". La solution est certainement évidente, mais elle m'échappe. Je sais que le "return data;" ne fonctionne pas car il est au sein de la fonction callback, mais lorsque je le place hors de celle-ci, la variable "data" n'est plus dans la portée et n'existe pas.

Merci d'avance si vous êtes en mesure de m'aider.

Thufir Hawat

Au temps pour moi,

Personne ne m'a encore répondu jusque-là et tant mieux car j'ai trouvé la solution à mon problème.

Il suffit de faire appel aux promesses et à Async Await :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function ajaxBase(cible) { return new Promise(function (resolve) { const xhr = new XMLHttpRequest(); xhr.open("get", `${cible}`, true); xhr.send(); xhr.onload = function () { if (this.status === 200) { const data = JSON.parse(this.responseText); resolve(data); } }; })   }

---

Et ensuite, d'utiliser le bout de code ci-dessous au sein d'une fonction "Async" :

Code:

---

1 2	const donneesRecues = await ajaxBase('page.txt');

---

Merci à ceux qui m'ont lu et ont peut-être hésité à me répondre. Un peu de patience et de réflexions m'ont finalement permis de m'en sortir.

Thufir Hawat

Bonjour,
pourquoi s'e$$3@£.er avec une Promise en wait comme tu utilises un objet XMLHttpRequest().

Il te suffit de rendre synchrone ta requête, la réponse sera ainsi disponible dans la continuité de ton script :

Code:

---

1 2 3 4 5 6

function ajaxBase(cible) { const xhr = new XMLHttpRequest(); xhr.open("get", `${cible}`, false); xhr.send(); return JSON.parse(xhr.responseText); }

---

Ce n'est effectivement pas recommandé car il y a bocage du script en attendant la réponse mai spas moins pire qu'avec un wait.

Ce qui se fait « traditionnellement », en respectant l’asynchrone, est de passer une fonction, dite callback, en paramètre, fonction de traitement à exécuter lorsque le serveur répond.

Code:

---

1 2 3 4 5 6 7 8 9 10 11

function ajaxBase(cible, fctCallBack) { const xhr = new XMLHttpRequest(); xhr.open("get", `${cible}`, true); xhr.send(); xhr.onload = function() { if (this.status === 200) { // appel de la fonction de traitement fctCallBack(JSON.parse(this.responseText)); } }; }

---

Tu pourrais également regarder du côté de l'API Fetch qui est une façon un peu plus « moderne » de voir les choses pour peu que tu n'ai pas à supporter IE.

Citation:

---

Personne ne m'a encore répondu jusque-là

---

et oui les intervenants sur les forums le font sur leur temps de libre et sont rarement assis devant leur écran en attendant une discussion à laquelle ils peuvent réponde ;)

Citation:

---

et tant mieux car j'ai trouvé la solution à mon problème.

---

Tu vois que cela à du bon :mrgreen: