Résultat d'une promesse

Objectif

  • Exploiter le résultat d'une promesse

Mise en situation

Nous savons désormais que l'on instancie une promesse avec l'objet Promise et que l'on gère la mise à jour de son état avec les méthodes resolve et reject.

Nous allons désormais pouvoir aborder de façon plus détaillée l'utilisation de cet objet dans le code. Comment déclencher le traitement de la promesse et comment traiter les retours de celle-ci quand la méthode resolve ou reject est appelée ?

MéthodeGérer les callbacks avec .then()

L'objet Promise est un objet qui représente le succès ou l'échec d'une opération asynchrone.

À ces états, il va falloir attacher des comportements, des callbacks. C'est grâce à la méthode .then() de l'objet Promise qu'il sera possible d'effectuer cette liaison.

1
const scrutin = new Promise(function (resolve, reject) {
2
        // On récupère le % du résultat de l'élection pour le candidat 1
3
        var resultat = getResultatDuScrutin("Candidat1");
4
        if(resultat > .50){
5
            resolve("Candidat 1 est élu");
6
        } else {
7
            reject("Candidat 1 a perdu");
8
        }
9
    }
10
);
11
12
scrutin.then(
13
    (result) => console.log(result),
14
    (error) => console.log(error)
15
);
16
17
/*
18
Si getResultatDuScrutin("Candidat1") == 0.3
19
//"Candidat 1 a perdu"
20
Si getResultatDuScrutin("Candidat1") == 0.6
21
//"Candidat 1 est élu"
22
*/
La méthode .then() dispose de deux paramètres :
  • Le premier correspond à la fonction exécutée en cas de succès. Celle-ci disposera d'un paramètre, ici result, qui sera valorisé par l'argument transmis à la fonction resolve.
  • Le second correspond à la fonction exécutée en cas d'échec. Celle-ci disposera d'un paramètre, ici error, qui sera valorisé par l'argument transmis à la fonction reject.
Une promesse ne pouvant pas changer d'état entre fulfilled et rejected, seule l'une des deux fonctions sera exécutée.
MéthodeAttraper les erreurs avec .catch()
Il est impératif d'indiquer quel comportement adopter en cas d'erreur : cela est rendu possible grâce à la méthode .catch() .
Cette méthode sera déclenchée par l'état rejected d'une Promise.
1
var myPromise = new Promise((resolve, reject) => {
2
    /*[...]*/
3
    reject("Une erreur est survenue");
4
};
5
6
myPromise.catch((error) => console.log(error));
7
8
//Résultat : 
9
//Une erreur est survenue
MéthodeExécuter du code systématiquement avec .finally()
Il se peut que l'on veuille exécuter du code quel que soit le résultat de la Promise, c'est-à-dire qu'elle soit fulfilled ou rejected.
Pour cela, il existe la méthode .finally(). Cette méthode n'aura aucun paramètre et il sera impossible de savoir si la promesse est fulfilled ou rejected.
1
var myPromise = new Promise((resolve, reject) => {
2
    if(/*[...]*/)
3
        resolve("C'est un succès");
4
    else {
5
        reject("Une erreur est survenue");
6
    }
7
};
8
9
myPromise.finally(() => console.log("Toujours executée"));
10
11
//Résultat : 
12
//Toujours exécutée
MéthodeEnchaîner les méthodes
L'utilisation des méthodes .then() , .catch() et .finally() n'est pas exclusif. Ces méthodes peuvent être chaînées.
1
var myPromise = new Promise((resolve, reject) => {
2
    if(myAsyncFunction()) //Fonction asynchrone retournant un booléen
3
        resolve("C'est un succès");
4
    else {
5
        reject("Une erreur est survenue");
6
    }
7
};
8
9
myPromise
10
    .then((result) => console.log(result))
11
    .catch((error) => console.log(error))
12
    .finally(() => console.log("Toujours executée"));
13
14
//Si myAsyncFunction() === true
15
//Résultat:
16
//C'est un succès
17
//Toujours executée
18
19
//Si myAsyncFunction() === false
20
//Résultat:
21
//Une erreur est survenue
22
//Toujours executée
ComplémentFonctionner de façon asynchrone
Une autre manière de résoudre les problèmes asynchrones est l'utilisation des mots-clés async et await.
Nous allons pouvoir placer le mot clé async devant une déclaration de fonction (ou une expression de fonction, ou encore une fonction fléchée) pour la transformer en fonction asynchrone.
Utiliser le mot clé async devant une fonction va faire que la fonction en question va toujours retourner une promesse. Dans le cas où la fonction retourne explicitement une valeur qui n'est pas une promesse, alors cette valeur sera automatiquement enveloppée dans une promesse.
Le mot clé await est uniquement valide au seil de fonctions asynchrones définies avec async.
Ce mot clé permet d'interrompre l'exécution d'une fonction asynchrone tant qu'une promesse n'est pas résolue ou rejetée. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution.
1
<code>
2
async function test(){
3
    const promise = new Promise((resolve, reject) => {
4
        setTimeout(() => resolve('On m’attend avant de continuer!'), 2000)
5
    });
6
    
7
    let result = await promise; //Attend que la promesse soit résolue ou rejetée
8
    alert(result);
9
}
10
11
12
test();
13
14
</code>
15
ExempleUtiliser la méthode then()
1
const getResultatDuScrutin2 = async (candidat) => {
2
  // appel asynchrone (requête serveur par exemple)
3
}
4
5
// La promesse de la fonction scrutin() est remplacée par async 
6
const scrutin = async () => {
7
  // await indique que l'on attendra le resultat de getResultatDuScrutin2() pour retourner le resultat
8
  return resultat = await getResultatDuScrutin2("Candidat1");    
9
}
10
11
scrutin().then(
12
  (resultat => {
13
    if(resultat > .50){
14
      console.log("Candidat 1 est élu");
15
    } else {
16
      console.log("Candidat 1 a perdu");
17
    }
18
  })
19
)
SyntaxeÀ retenir
  • La méthode .then() de l'objet Promise permet de récupérer le résultat d'une promesse, qu'elle soit fulfilled ou rejected.
  • La méthode .catch() permettra de traiter les échecs.
  • Enfin, la méthode .finally() permettra d’exécuter du code à la suite d'une promesse, sans en connaître le résultat.