Bonjour bonsoir,

Je suis actuellement sur un projet OpenClassrooms et j'avoue avoir du mal avec l'asynchrone ; je pratique depuis des heures sans trouver cette maudite solution alors je fais appel à une âme charitable qui voudra bien m'aider !

Imaginons ce code :

// Imaginons cette fonction, son but serait de retourner juste le prix

function prixProduit(id)
{
    fetch("http://localhost:3000/api/products/" + id)
    .then(function(resultat){if (resultat.ok){return resultat.json();}})
    .then(function(data)
    {
        return data.price;
    })
}

// Je veux que cette ligne renvoi "4999" et non une promesse ou "undefined"
console.log(prixProduit("415b7cacb65d43b2b5c1ff70f3393ad1"));

Le but de cette fonction serait de renvoyer juste le prix du produit, 4999 en l'occurrence. Cependant, avec tous les tests que j'ai fait, je n'arrive qu'à obtenir une promesse ou un undefined...

Comment pourrais je procéder pour n'avoir qu'une simple valeur en retour avec return ?

Je vous remercie par avance.

Belle journée, soirée

Nuns

Salut, ca peut pas marcher, ton fetch est asynchrone, c'est à dire qu'il va prendre un certain à s'executer, mais pendant ce temps, javascript lui va passer à la ligne suivante, il va pas attendre la reponse du fetch. Pour lui c'est juste une fonction à lancer, une fois lancée, il passe à autre chose.

Et l'autre chose dans ton code, c'est le console.log, lui il s'execute instantanement, et comme fetch lui renvoie rien à ce moment, tu as un undefined.

Si tu veux afficher un console.log, il doit etre dans le then:

function prixProduit(id)
{
    fetch("http://localhost:3000/api/products/" + id)
    .then(function(resultat){if (resultat.ok){return resultat.json();}})
    .then(function(data)
    {
        console.log(data.price);
    })
}
 

Conclusion, si tu as besoin de data.price, ton code doit etre contenu dans le then.

Voici une petite video que j'ai fait sur le fetch, ca pourra peut-etre t'aider:

https://www.youtube.com/watch?v=2lt4HmLm8LE

Avec les nouvelles syntaxes de Javascript tu peux utiliser les mots clés async/await pour écrire du code asynchrone sous une forme synchrone (donc plus simple à gérer).

Le mot clés await dois être utiliser uniquement à l'intérieur du fonction async, si tu veux pouvoir l'utiliser partout tu peux englober tous ton code à l'intérieur d'une fonction async.

Un truc du genre:

(async function() {

	async function prixProduit(id) {
        const response = await fetch("http://localhost:3000/api/products/" + id)
        
        if(response.ok) {
        	const data = await response.json();
            return data.price;
        }
	}
 
	const price = await prixProduit("415b7cacb65d43b2b5c1ff70f3393ad1");
 
 	console.log(price);
})();

Je vous remercie tous les deux pour votre aide, j'ai pu me débloquer de la situation grâce à vos deux ressources.

À la revoyure