Dans cette leçon vidéo en français, l’instructeur explique comment gérer les promesses JavaScript en utilisant les mots‑clés async et await, en les comparant à l’approche traditionnelle then/catch. Après un rappel sur le fonctionnement des promesses (resolve/reject, setTimeout pour simuler un délai), il montre comment créer une fonction qui génère un nombre aléatoire pair et renvoie une promesse. Il introduit la gestion d’erreurs avec try‑catch et throw, puis montre comment déclarer une fonction asynchrone avec le préfixe async et suspendre son exécution avec await jusqu’à ce que la promesse soit résolue. Des exemples concrets illustrent le comportement pending, la différence de temps d’attente selon que la promesse est fulfilled ou rejetée, et la nécessité d’utiliser await uniquement à l’intérieur d’une fonction async. L’objectif est de fournir aux apprenants une syntaxe plus lisible et « conventionnelle » pour le chaînage de promesses, tout en soulignant les contraintes et bonnes pratiques.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon sur le JavaScript. Aujourd'hui, nous allons voir une autre méthode pour manipuler les promesses, en l'occurrence à l'aide des mots-clés async et await. Dans la dernière vidéo, nous avons vu qu'une promesse permet de différer un traitement. En effet, elle ne délivre pas une valeur au moment même mais seulement une promesse de cette valeur-là, et quand celle-ci sera disponible alors elle sera transmise au script pour poursuivre son exécution sans bloquer le traitement qui ne dépend pas de la promesse. Pour gérer une promesse, on utilise les méthodes then et catch. Cependant, dans le cas du chaînage de promesses, on se retrouve avec un code un peu différent de la structure dont on a l'habitude de voir dans un programme informatique. C'est pour cette raison qu'il existe une méthode qui permet de gérer les promesses à l'aide des mots-clés async et await, et ce qui a pour effet de créer un code plus convivial. Reprenons le code de la dernière fois. Nous avons lancé une instance de l'objet Promise et dans cette dernière on génère un nombre aléatoire qui est censé être pair. Alors s'il est pair, dans ce cas la promesse est fulfilled, c'est-à-dire qu'il a réussi. Et si le nombre est impair, dans ce cas la promesse échoue et la fonction à l'exécuter est exécutée. Dans tous les cas, on affiche le message soit nombre pair ou bien nombre impair. Bien sûr, la gestion de celle-ci est faite avec les méthodes then et catch. Réexécutons. Alors on a nombre pair et là c'est nombre impair, c'est-à-dire que la promesse a échoué. On va modifier légèrement ce code. On va intégrer un temporisateur qui permet de retarder l'exécution. Par exemple ici, on va appeler le resolve à travers la méthode setTimeout. On mettra une fonction anonyme en guise de premier argument et la durée par exemple c'est 500 millisecondes. C'est une écriture fléchée qui permet de simplifier la saisie de la fonction. On fait la même chose pour l'reject avec la même durée. Et là on obtient le même résultat mais avec un retard de 500 millisecondes dans les deux cas. En fait c'est une simulation du monde réel où on attend une réponse qui proviendra d'un serveur ou bien d'une API par exemple et ça risque de prendre un peu de temps. Et c'est justement l'utilité des promesses, c'est gérer des cas pareils. Ce qu'on va voir aujourd'hui c'est une écriture qui permet de gérer différemment les promesses. Le principe ça reste le même mais on va juste invoquer deux mots-clés qui sont async et await. On va par exemple lui créer une fonction qui permet de générer un nombre pair qui s'appelle genNbPair et comme résultat de retour cette fonction va nous retourner une promesse et en guise d'argument on va juste placer la fonction resolve parce que la fonction reject on va la gérer différemment. Maintenant on va faire appel au mot-clé try-catch qu'on a vu avant pour la gestion des erreurs. Dans notre cas on va généralement boire aléatoire comme ça, c'est le même code. Puis on va vérifier sa parité, c'est-à-dire que finalement on va grouper ce code. Si le nombre est pair, dans ce cas on exécute la fonction resolve qui est passée en guise d'argument de la promesse. Sinon on On va lancer manuellement une erreur personnalisée avec le mot-clé throw. Et en guise de message, on mettra par exemple nombre impair, comme ça. Puis on va mettre catch qui reçoit un argument qu'on appellera error, comme ça. Et dans le catch, on va simplement afficher un message dans la console. Et ce message n'est rien d'autre que la propriété message de l'erreur qu'on a récupérée. Et ce message c'est nombre impair. Maintenant c'est bon, on peut retirer ce code. Ensuite on va créer une autre fonction qu'on va baptiser appel. Dans celle-ci on va recevoir le nombre aléatoire qui a été généré par la première fonction qu'on appellera nbr. Comme ça, et on va afficher ce nombre. Maintenant on appelle la fonction que l'on vient de créer. Regardons ce que ça donne. Ça me donne pending, c'est-à-dire que la promesse est en cours, et c'est tout à fait naturel parce que si vous regardez le code, vous allez voir qu'au moment de l'exécution de la fonction appel, j'ai j'essaie de récupérer le nombre nbr qui est généré par la fonction précédente, celle qui contient la promesse. Et juste après j'affiche le nombre alors que ce nombre n'a même pas encore été généré parce que la promesse prend du temps pour se résoudre, en l'occurrence 500 millisecondes. Bien sûr cela arrive uniquement si la promesse renvoie le fulfilled, c'est-à-dire un succès. Mais sinon dans le cas contraire on n'a pas d'attente, c'est-à-dire on est censé afficher le message directement. Et là ça se rapproche un peu de la situation réelle, c'est-à-dire imaginez que vous avez affaire à une base de données et que vous voulez l'interroger via une requête. Pour que la réponse parvienne jusqu'à vous, ça risque de prendre un peu de temps. Alors en attendant, vous pouvez rien faire, c'est-à-dire que tout le traitement qui dépend de la base de données doit rester en attente. Par contre, le reste du traitement, ça peut s'exécuter normalement. Pour résoudre ce problème, on va invoquer la notion d'une fonction asynchrone. Pour ce faire, on va juste préfixer notre fonction appel à l'aide du mot-clé async, c'est-à-dire que cette fonction est susceptible d'accueillir un traitement qui peut être différé dans le temps, c'est-à-dire qu'il va prendre un certain temps pour s'exécuter. C'est justement le cas de la fonction que l'on a appelée ici. Alors pour dire au script que cette fonction risque de prendre un peu de temps, on va la préfixer par le mot-clé await. Dans ce cas, tout le code qui va suivre et qui est inclus dans la fonction appel va attendre que la réponse parvienne jusqu'à lui et c'est à ce moment-là que l'exécution se poursuivra. C'est-à-dire désormais, quand j'exécute la fonction appel, on va générer un nombre aléatoire via la fonction initiale et puisque cette génération va durer à peu près 500 millisecondes dans le cas où la promesse renvoie un résultat positif, c'est-à-dire un fulfilled dans notre cas, C'est à ce moment-là qu'on va afficher le résultat. Réexécutons. Maintenant on voit que le résultat prend un certain temps pour parvenir jusqu'à nous, mais finalement on affiche le bon message qui est nombre pair. Dans le cas d'un nombre impair, il n'y a pas d'attente parce qu'on n'a pas programmé un temporisateur. Voilà encore, et ça marche. Alors c'est ça l'idée derrière l'utilisation des mots-clés async et await. En réalité, ça n'a pas changé grand-chose par rapport à ce que nous avons vu la dernière fois, c'est-à-dire avec les mots-clés then et catch. Il y a juste la structure du programme qui a un peu changé. En fait, ça se rapproche un petit peu de ce qu'on a l'habitude de voir dans les programmes informatiques, c'est-à-dire une structure d'imbrication si vous voulez. Alors désormais, vous avez à votre disposition 2 méthodes pour gérer les promesses, soit la méthode classique avec les mots-clés then, catch, ou bien la méthode des fonctions asynchrones avec les mots-clés async et await. J'ai oublié de spécifier un détail, si vous voulez faire appeler le mot-clé await, il est obligé de le faire dans une fonction asynchrone, c'est-à-dire await va de pair avec le mot-clé async. Merci pour votre attention et à la vidéo prochaine.
