Requête Ajax, asynchrone et récupérer une donnée

Par Glaived, il y a 8 ans

Javascript

Bonjour,

j'aimerais comprendre comment faire une requête ajax pour récupérer derrière une information contenu dans la requête. Sachant que javascript est asynchrone, je comprend bien qu'avec une fonction comme :

function myFunction(){ $.ajax({ url: "https://foo.bar", dataType: "json", success: function(response){ return reponse; } }); }

Faire un myFunction(); executera bien la requête ajax, mais ne retournera pas de valeur. J'ai beau avoir regardé sur stackoverflow je n'ai pas compris ce que j'y ai vu, ni même réussie à faire un sandbox fonctionnel.

mon code

function getIDFromName(name){ $.ajax({ url: "https://api.twitch.tv/helix/games?name="+name, dataType: "json", headers: { "Client-ID": CLIENT_ID }, success: function(response){ if(response.data.length > 0 && response.data[0]["id"] != undefined){ // comment récupérer une donnée contenue dans response ? }} }); }

10 réponses

Pierrot01, il y a 8 ans

Salut,

$.ajax("https://api.twitch.tv/helix/games?name="+name) .done(function(data) { console.log(data); }) .fail(function() { alert( "Erreur Lecture db" ); }) .always(function() { // alert( "complete" ); });

@plus

Pierre

Glaived, il y a 8 ans

Ça ne répond pas à mon problème, ce que je souhaite, c'est récupérer la donnée à l'exterieur de la requête.

function myFunction() { $.ajax({ url: "https://jsonplaceholder.typicode.com/users", dataType: "json" }).done(function(data) { console.log(data); // object return data; // retourne data à la callback, et non à myFunction() }); } myData = myFunction(); // PROBLEME console.log(myData); // undefined
MaxLes, il y a 8 ans

Il faut désactiver l'async et que la fonction retourne quelque chose, un peu comme ça :

function myFunction() { let retour; $.ajax({ url: "https://jsonplaceholder.typicode.com/users", dataType: "json", async:false }).done(function(data) { retour = data; }); return retour; } myData = myFunction(); console.log(myData);
Pierrot01, il y a 8 ans

Salut,

async:false donne :
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

c'est chaud quand même ?

ça marche aujourd'hui mais demain ?

@plus

Pierre

Glaived, il y a 8 ans

Effectivement, j'avais survolé cette méthode mais étant deprecated, je pense qu'il y a bien un best way non ?

Pierrot01, il y a 8 ans

tu fais avec une promise ;)

myfunction étant le resolve

@plus

Pierre

MaxLes, il y a 8 ans

Il faut mieux utiliser async/await tu modifies ton code comme ça, car tu ne pourra jamais récupéré la valeur d'une requeste async directement
si tu mets un console.log dans ton done tu verra qu'il apparait après ton undefined.
Voilà une solution avec async et wait mais ne sachant pas ce que ton code fait après je ne peux pas t'aider plus.

async function myFunction() { return await $.ajax({ url: "https://jsonplaceholder.typicode.com/users", dataType: "json", }).done(function(data){ // Si besoin de faire un traitement supplémentaire par ex. data.push( {id: "66", name: "Max", username: "Doe",email: "max.doe@mail.com"} ); }); } myFunction().then(function(response){ // Quand on est ici la requete est finie response = le résultat // Tu continues ton traitement });
Glaived, il y a 8 ans

@MaxLes

En gros, je bosse sur une extension Chrome, un prototype, là pour le moment j'aimerais dégrossir le code en faisant des getter et setter sur l'API, l'idée c'était juste call une API, récupérer un ID (int) en fonction d'un du nom du jeu (string), le tout dans une fonction getIDFromName(string name)

J'ai l'impression que ya 10 milliard de façon de faire, j'ai pas la moindre idée de comment faire, et bien faire.

https://stackoverflow.com/a/15847321

Lui propose avec 2 fonction.... donc à chaque call j'ai 2 fonction, donc j'ai 8 billiard de fonction, c'est ça le javascript ? ^^"

MaxLes, il y a 8 ans

Tu pourrai le faire comme ça ?

/** Fonction d'appel a l'api **/ async function appelAPI(attributes) { return await $.ajax({ url: "https://jsonplaceholder.typicode.com/"+attributes, dataType: "json", }); } // Après tu l'utilises comme ça : appelAPI('users').then(function(response){ // Ici tu as récupéré tous utilisateurs }); appelAPI('user/1').then(function(response){ // Ici tu as récupéré l'utilisateur 1 });