Les promises sont une fonctionnalité de Javascript qui permet de travailler et d’organiser un code asynchrone correctement. Dans cet article je vous explique comment les promises s’utilisent et comment les coupler avec le fameux Async/Await dont on entend parler partout.
Tout d’abord, pour bien comprendre l’utilisation des promises, il faut bien intégrer ce qu’est un code asynchrone. Un code asynchrone est un code qui exécute des fonctions qui mettent un temps indéterminé pour les exécuter… Ahah je vous déjà vos grands yeux pour certains. 😉
Je vous donne tous de suite un exemple pour que tout le monde comprenne bien.
Qu’est ce qu’un code asynchrone?
Voici donc un petit bout de code qui se charge de faire une requête Ajax pour récupérer un objet JSON et afficher le résultat dans la console du navigateur:
Sur le papier rien de bien compliqué, mais je vous déconseille d’utiliser ce code dans vos projets!!
En effet, ce bout de code effectue une opération dite « asynchrone » et donc il se peut que celui-ci ne fonctionne pas correctement à tous les coups. Peut-être même qu’il ne fonctionne pas du tout pour la plupart d’entre vous. Normale je vais vous expliquer pourquoi.
Comment fonctionne un code asynchrone?
La première partie du code effectue une requête Ajax avec fetch() et retour le reculait dans une variable. Le detail qui n’est pas visible c’est que la requête met quand même un certain temps à s’effectuer et donc à retourner la réponse. C’est pour cela que le code ne fonctionne pas correctement. Imaginez maintenant que vous devez effectuer une requête qui nécessite la réponse d’une requête précédente… le code devient vite impossible à écrire et même à relire.
Async/Await pour la programmation asynchrone
Pour résoudre le problème que nous avons avec ce bout de code, nous pouvons utiliser les outils que les promises mettent à disposition, et réécrie le code avec des « .then()/.catch() » pour s’assurer que nous avons la réponse avant de demander de l’afficher. Ou nous pouvons aussi utiliser la fonctionnalité Async/Await de Javascript pour structurer notre code et attendre que la réponse à la requête soit arrivée avant de vouloir directement afficher le résultat.
Voici que que cela donne:
Notez que n’utilisation d’await ne fonctionne que dans une fonction asynchrone (async).
Conclusion
Async/Await sont les principaux outils qui permettent d’organiser correctement un code applicatif asynchrone tout en s’assurant une gestion des erreurs facilitées. Maintenant je vous encourage à organiser votre code de façon à pouvoir utiliser un maximum de fois cette fonctionnalité. Cela vous aidera par la suite a lieu intégrer certain connectes présent dans de gros frameworks de développement comme Angular ou React.
Vous retrouverez tous les autres articles traitant du même sujet dans la section programmation.
Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.
Demande ta version numérique gratuite de mon livre Javascript Array Methods
