JavaScript Async/Await en 5 minutes
Prérequis
- Comprendre la notions du code asynchrone ;
- Comprendre les Promesses en JS
Considérations générales
Cas d’usage
async et await sont des mots clés qui font partie du corps de JavaScript (Ils fonctionnent aussi bien dans le navigateur que du côté serveur).
Les deux mots clés permettent d’écrire du code, des fonctions, asynchrones c’est-à-dire des instructions ou expressions qui mettent un peu de temps à s’exécuter comme par exemple la résolution d’une promesse, un appel à une API avec fetch, …
Fonction asynchrone
Dans la suite de cette rédaction, nous appelons fonction asynchrone, une fonction, dont à sa déclaration, est précédée du mot clé async et qui, dans sa portée, peut apparaître l’opérateur await dans une expression.
La fonction ainsi définie dégage un comportement asynchrone basé sur une promesse écrite de façon simple (évitant de chaîner les blocs then et catch).
Utilisation de async et await
Commençons par la syntaxe d’une fonction asynchrone :
Syntaxe
nomDeLaFonction : C’est le nom de votre fonction.
parametres : Le(s) paramètre(s) de la fonction déclarée.
instructions : Le corps de la fonction. Ce sont des instructions dans lesquelles on aura forcement le mot clé await, le plus souvent dans une expression.
Description
Dans les instructions de cette fonction, lorsque nous utilisons await, nous disons à cette fonction d’interrompre son exécution jusqu’à ce que la promesse passée soit résolue. L’exécution de cette fonction reprendra quand la promesse sera résolue et renverra la valeur de cette résolution (resolve ou reject).
Il sied de noter que lorsque cette fonction est en pause en attendant la résolution de la promesse, s’il y a une fonction qui l’appelle, cette dernière continuera son exécution car, implicitement, à partir du mot clé async, elle reçoit une promesse renvoyée par la fonction asynchrone.
Dans la syntaxe ci-dessus, expression est une promesse ou une autre valeur dont on veut attendre la résolution tandis que valRetour est la valeur de la promesse lorsqu’elle résolue. Comme signalé ci-haut, cette ligne interrompt l’exécution de la fonction en attendant la résolution de la promesse. Quand cette promesse est résolue (tenue ou rompue), la valeur est renvoyée, et l’exécution de la fonction reprend. Notons que si la valeur de expression n’est pas une promesse, elle est convertie en une promesse ayant cette valeur en cas d’une promesse tenue ; par contre, si la promesse est rompue, l’expression await lève une exception qui spécifie la raison de l’échec. Cette exception peut être gérée avec un bloc try/catch (Plus tard dans cette article).
Note : Le mot clé await ne peut etre utilisé que dans une fonction async. Si vous tentez de l’utiliser hors de la fonction
Exemples
- Partons d’un cas simple où nous avons une fonction qui nous retourne une promesse que nous allons résoudre avec une fonction asynchrone :
Dans cette fonction nous retournons une promesse qui est tenue au cas où nous générons un nombre inférieur à 0.5 mais rompue dans le cas contraire.
- Résolution avec then
A l’appel de la fonction thenFunction, nous aurons dans la console: soit “Promesse tenue 0.343…”, par exemple, dans le cas de résolution de la promesse (bloc then) ; ou soit “Promesse rompue 0.775…”, par exemple dans le cas de rejet de la promesse (bloc catch).
- Résolution avec async/await
Lorsque nous appelons la fonction asyncFunction, Nous aurons notre message de promesse tenue lorsque le nombre généré est inférieur à 0.5. Par contre, en cas de promesse rompue, ce que nous aurons c’est une grosse erreur plus ou moins incompréhensible. Pour gérer cette erreur, rendons-nous dans la gestion de l’erreur avec async/await.
Gestion d’erreur dans une fonction asynchrone
Dans cette section, nous allons utiliser deux autres mots clés : try et catch pour capturer les erreurs dans une fonction asynchrone lorsque la promesse a été rompue.
Syntaxe de try/catch
Dans la portée try, nous allons mettre les instructions à exécuter dans le cas de résolution de notre promesse et dans le bloc catch, nous allons gérer le cas d’une promesse rompue ou rejetée.
Dans la pratique, la résolution de notre promesse avec async/await se fera donc de la manière suivante :
Cette fois à l’appel de cette fonction, en cas de promesse rompue, le message de rejet de la promesse sera affichée en console et pas la fameuse erreur floue.
2. Exemple d’utilisation des async/await avec l’API Fetch
Comme vous le savez, l’API fetch nous permet de consommer une API et nous renvoie une promesse que nous pouvons gérer avec les mots clés async/await.
Dans cette fonction nous faisons appel à l’API de github et tentons d’accéder aux données de l’utilisateur GloireMutaliko21. Vu que fetch renvoie une promise, nous disons à notre fonction d’interrompre(await) l’exécution jusqu’à ce que la promesse soit résolue. Une fois tenue, cette nouvelle promesse est stockée dans response et nous attendons sa résolution avant de stocker les données dans responseData.
Astuce: Avec cette structure, équivalence avec les promesses est l’utilisation de deux blocs then successifs (vu que nous avons deux await) et un bloc catch pour gerer les exceptions.
Conclusion
Dans cet article nous avons parlé brièvement des mots clés async et await en JavaScript. Nous avons vu que le cas d’usage de ces deux mots clés est surtout pour l’écriture des fonctions asynchrones. Nous avons vu que ces mots clés nous permettent de résoudre des promesses d’une manière très simple et très propre que le chaînage des blocs then et catch.
Un point essentiel a retenu notre attention : la gestion d’erreurs (exceptions) dans une fonction asynchrone avec les mots clés try et catch avant de chuter avec la consommation d’une API en utilisant fetch.
Nous n’avons fait que survoler les notions très basiques mais pour approfondir, je vous conseille de consulter la documentation officielle et/ou de me contacter en privé pour d’autres échanges.
Cordialement !!!