[Résolu] Code Async et Await par Flow-Wolf - page 1

16 juillet 2020 à 16:12:56

Salut,

je n'arrive pas à résoudre la 2e partie du code asynchrone de l'exercice JS

https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web/5577676-gerez-du-code-asynchrone

En fait mon soucis c'est de comprendre comment réutiliser la valeur return de la fonction compute...

En HTML j'ai ça:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="base.css">
  </head>
  <body>  
    <div id="result"></div>
    
    <script type="text/javascript" src="base.js"></script>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

et en JS :

async function getNumber1() {
  return 10;
}

async function getNumber2() {
  return 4;
}

async function compute() {
  const value1 = await getNumber1();
  const value2 = await getNumber2();
  return value1 + value2;
}

const result = document.getElementById('result');

compute()
  .then(function(data) {
      result.textContent = console.log(compute());
      }
     );

J'aimerai comprendre comment transformer le résultat de compute en une valeur car avec ce code ça me retourne : [object Promise] comme si rien ne s'était passé.

Merci de votre apuis

Anonyme

16 juillet 2020 à 17:36:04

Et ton data ligne 18 ?

Flow-Wolf

17 juillet 2020 à 15:14:54

Salut MatTheCat,

Mon data? il faut que je lui indique la valeur à récupérer, soit le return de compute non?

Mais du coup quelle est sa valeur du return de compute? Car value1 et value2 sont déclarées dans la fonction et donc non utilisable à l'extérieur

EDIT : Hahahaha !!!

Ok! j'y ai passé des heures hier... Merci
Le data donc dans la fonction asynchrone c'est le résultat de la fonction précédemment utilisé !! et donc la valeur que je cherchais...
Bingo merci

EDIT 2 :
Mais du coup il se passe quoi dans le code?

Je déclare ma fonction async (compute) qui s'exécute après les 2 autres (getNumber). Elle renvoie une valeur.

Ensuite je dis à cette fonction une fois qu'elle est réalisée et que ça c'est bien passé (qu'on a une valeur retour), je l'utilise.

C'est à peu prêt ça?

-
Edité par Flow-Wolf 17 juillet 2020 à 15:20:33

ninjavascript

21 juillet 2020 à 18:44:16

Flow-Wolf a écrit:

EDIT 2 :

Mais du coup il se passe quoi dans le code?

Je déclare ma fonction async (compute) qui s'exécute après les 2 autres (getNumber). Elle renvoie une valeur.

Ensuite je dis à cette fonction une fois qu'elle est réalisée et que ça c'est bien passé (qu'on a une valeur retour), je l'utilise.

C'est à peu prêt ça?

-
Edité par Flow-Wolf 17 juillet 2020 à 15:20:33

C'est exactement ça !

inoual

19 octobre 2020 à 12:30:15

Flow-Wolf a écrit:

Salut,

je n'arrive pas à résoudre la 2e partie du code asynchrone de l'exercice JS

https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web/5577676-gerez-du-code-asynchrone

En fait mon soucis c'est de comprendre comment réutiliser la valeur return de la fonction compute...

Bonjour,

Je bute à mon tour sur cet exercice, et franchement, je capte rien...

Possible de m'aider ?

ThéoFaller

5 novembre 2020 à 18:34:33 - Message modéré pour le motif suivant : Merci d'utiliser le bouton code du forum pour insérer votre code

ThereseGoguet1

10 novembre 2020 à 14:39:18

Je met ici un code qui "fonctionne".

Heureusement que je suis tombé sur ce topic car je suis complètement perdu dans ce cours.

Et je le trouve largement insuffisant pour toutes les notions qu'il doit transmettre.

async function getNumber1() {
  return 10;
}

async function getNumber2() {
  return 4;
}


// 1 :
async function compute() {
    console.log("compute:");
    num1 = await getNumber1();
    num2 = await getNumber2();

    console.log("num1 : " + num1);
    console.log("num2 : " + num2);
    res = num1 + num2;
    console.log("resultat : " + res);
    
    return res;
}


// 2 :
const dom_element_result = document.getElementById('result'); 
 
compute()
    .then(function(data) { //result ok => data have the elements returned by compute()
        dom_element_result.textContent = data;
    })
    
    .then(function(err) { //Error
        console.log("Erreur valuating result form function compute() " + err);
     });

Je n'ai d'ailleurs pas compris entièrement le mécanisme.

Si quelqu'un peut m'expliquer pourquoi dans la log de ma console j'obtiens le message d'erreur j'apprécierai beaucoup.

compute:
num1 : 10
num2 : 4
resultat : 14
Erreur valuating result form function compute()undefined

-
Edité par ThereseGoguet1 10 novembre 2020 à 14:40:55

Afajjay

15 décembre 2020 à 10:42:55

Bonjour,

C'est mon code: Il mache très bien

async function getNumber1() {
  return 10;
}
 
async function getNumber2() {
  return 4;
}
 
async function compute() {
  const value1 = await getNumber1();
  const value2 = await getNumber2();
  return value1 + value2;
}
 
const result = document.getElementById('result');
 
compute()
  .then(function(data) {
      result.textContent = data;
} );

-
Edité par Afajjay 15 décembre 2020 à 10:44:04

Jeireme

14 avril 2021 à 22:36:16

ThereseGoguet1 a écrit:

Je met ici un code qui "fonctionne".

Heureusement que je suis tombé sur ce topic car je suis complètement perdu dans ce cours.

Et je le trouve largement insuffisant pour toutes les notions qu'il doit transmettre.
async function getNumber1() {
  return 10;
}

async function getNumber2() {
  return 4;
}


// 1 :
async function compute() {
    console.log("compute:");
    num1 = await getNumber1();
    num2 = await getNumber2();

    console.log("num1 : " + num1);
    console.log("num2 : " + num2);
    res = num1 + num2;
    console.log("resultat : " + res);
    
    return res;
}


// 2 :
const dom_element_result = document.getElementById('result'); 
 
compute()
    .then(function(data) { //result ok => data have the elements returned by compute()
        dom_element_result.textContent = data;
    })
    
    .then(function(err) { //Error
        console.log("Erreur valuating result form function compute() " + err);
     });
Je n'ai d'ailleurs pas compris entièrement le mécanisme.

Si quelqu'un peut m'expliquer pourquoi dans la log de ma console j'obtiens le message d'erreur j'apprécierai beaucoup.
compute:
num1 : 10
num2 : 4
resultat : 14
Erreur valuating result form function compute()undefined
-
Edité par ThereseGoguet1 10 novembre 2020 à 14:40:55

Bonjour,

Votre dernière ligne dans la console n'est pas une erreur. Je pense qu'elle apparait car vous réutilisez then une deuxième fois pour surveiller l'apparition d'une erreur, au lieu de catch. Le dernier console.log() est alors lu, et indique une erreur inexistante : undefined.

C'est en sciant que Léonard de Vinci.

Code Async et Await

Supprimer

Modérer

Signaler le message aux modérateurs