[A21] Explication du fonctionnement de async/await seul et avec la méthode then().

Bonjour!
Dans ce post je vais parler de la façon que j'ai utilisée pour faire fonctionner une partie de mon code de façon asynchrone.
Il y a beaucoup de contenu dans ce post, je vais tenter d'être bref alors lisez bien le tout avant de l'introduire dans votre code.

Terminologie

• Fonction longue = La fonction qui prend trop de temps à s'exécuter et nécessite une éxécution acynchrone.
  
• async = asynchrone
  
• Fonction acync = La fonction qui contient les commandes qui utilise le résultat de la fonction longue
  

Comment utilisé les méthode await/async et les objets promesses?
Les méthodes await/async sont très utiles lorsqu'une commande prend un peu trop de temps pour s'exécuter et que d'autres commande qui necessitait la première d'être terminer avant de s'exécuter.

Comment ça marche?
Il faut savoir que la méthode async/await utilise les objets promesses pour fonctionner de façon async. Les objets promesses peuvent être considéré comme des objets qui contiennent un état et une valeur. L'état est déterminé par la méthode utilisé pour résoudre la promesse et la valeur (communément le résultat de la fonction longue) est déterminé par le paramètre que vous donnez à la méthode utilisé.

• La première de ces deux méthodes est resolve(param);. Cette méthode est utilisé lors d'une l'exécution réussi de votre fonction longue.
  
• La deuxième méthode est reject(param);. Cette méthode est utilisé lorsqu'une erreur survient dans votre fonction longue et que l'exécution n'a pas été complété correctement.
  Ces méthodes retourne un objet promesse résolu avec le paramètre que vous lui donnez. Ceci va permettre au await dans votre fonction async de bloquer et de laisser le temps au code critque de s'exécuter.
  

Comment structurer le code?
Vous devez d’abord déclarer votre fonction longue en vous assurant qu'il retourne bien une promesse qui a été résolu avec resolve() et votre résultat en paramètre.
S’il est possible qu’une ou plusieurs erreurs se produise dans votre code asynchrone, utilisez reject() pour résoudre la promesse en donnant une erreur. Vous pouvez donner la raison de l'erreur en paramètre dans reject().

Voici la structure de base:

Code:


/* Fonction qui doit attendre après la fin d'un calcul avant de continuer son exécution. */
async function maFonctionAsync(num1, num2) {
    /* Attend un objet promesse de type resolve() ou reject() et l'enregistre dans la variable resultatCalcul */
    var resultatCalcul = await fonctionCalcul(num1, num2);

    /* Manipulation du résultat */

    return resultatCalcul;
}

/* Fonction qui fait un calcul très long */
function fonctionCalcul(num1,num2) {
    var resultat;

    /* Façon #1 */
   /* Création de l'objet promesse qui va exécuter le calcul. L'objet promesse est ensuite retourné. */
    var promesse = new Promise((resolve, reject) => {
        resultat = (num1+num2);
        resolve(resultat);
    });
    return promesse;

    /* Façon #2*/
    resultat = (num1+num2);
    return Promise.resolve(resultat);
}


Points importants:

1. Une fonction contenant un await doit être async.
   
2. Await signifie qu'il va arrêter d'exécuter le code jusqu'à ce qu'il reçoive un object promesse.
   
3. Vous devez resolve() ou reject() la promesse pour qu'elle soit considérée comme terminé et que await arrête de bloquer.
   

Comment utiliser la méthode then() et cascade de fonctions async.
La méthode then() est très utile pour permettre l'appel de plusieurs étapes (fonctions) l'une à la suite de l'autre de façon async. Par exemple si vous avez plusieurs étapes de vérification pour confirmer la connexion d'un usager à votre site.

Comment ça marche?
La méthode then() permet d'appeler un fonction async et de faire déclancher autre chose lorsqu'il à terminé la première. Ceci permet donc d'apeller fonction après fonction par blocs et toujours lorsque la précédente se termine en retournant un objet promesse. On peut ainsi structurer notre code pour que 'A' ce fasse avant 'B' et ainsi de suite...
A, then=>B, then=>C etc...

Comment structurer le code?
Il faut d'abord déclarer une fonction async et ensuite on peut soit enchainer d'autres fonctions déja déclaré ou enchainé avec des fonctions déclaré dans le then().

Voici la structure de base:

Code:


/* Fonction qui doit attendre après la fin d'un calcul avant de continuer son exécution. */
async function maFonctionAsync(num1, num2) {
    /* Attend un objet promesse de type resolve() ou reject() et l'enregistre dans la variable resultatCalcul */
    var resultatCalcul = await fonctionCalcul(num1, num2);

    /* Manipulation du résultat */

    return resultatCalcul;
}

/* Appel de la fonction async et enchainement des autres fonctions. Façon #1 : Lorsque les fonctions sont déja déclaré ailleurs. */
maFonctionAsync(1,2).then(
    siReussi(),
    siErreur()
).then(
    siReussi2(),
    siErreur2()
).then(
    /* etc... */
).catch(function (err) {
    /* Traitement des erreurs si vous en lancer dans vous fonctions */
});
 
/* Appel de la fonction async et enchainement des autres fonctions. Façon #2 : Lorsque les fonctions ne sont pas déclaré ailleur. */
maFonctionAsync(1,2).then(
    siReussi() {
        /* Choses à faire si réussi... */
        return promesse;
    },
    siErreur() {
        /* Choses à faire si pas réussi... */
        throw(error);
    }
).then(
    siReussi2() {
        /* Choses à faire si réussi2... */
        return promesse;
    },
    siErreur2() {
        /* Choses à faire si pas réussi2... */
        throw(error);
    }
).then(
    /* etc... */
).catch(function (err) {
    /* Traitement des erreurs. */
});


Points importants:

1. La méthode then() prend deux paramètre! Faites attention pour ne pas les mélanger: then(paramRéussi, paramErreur)
   
2. Si vou avez plus que deux fonctions enchainées, Assurez-vous que vous retournez une promesse resolve ou reject pour que le prochain then() puisse s'exécuter sans erreurs.
   
3. Aussi, si vous avez plus que deux fonctions enchainer ensemble, peu importe si la promesse est resolve ou reject, il faut absolument retourner un resolve ou reject pour que le code puisse continuer à s'exécuter. Si vous voullez sortie de l'enchainement, lancer un erreur est la façon la plus simple.
   

Voila! J'espère que cela à pu vous aider.
Merci et à la prochaine!

[Jimmy]