Content de vous revoir. Aujourd’hui, nous apprendrons ensemble comment créer une fonction asynchrone et comment l’utiliser. Let’s go !

En effet, il existe deux façons de créer une fonction asynchrone en JavaScript à savoir :

        ✅ L’utilisation de l’objet Promise

        ✅ L’utilisation du combo async/await

1- L’objet Promise

L’objet Promise (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais. Cet objet à travers son exécuteur reçoit deux arguments à savoir les fonctions resolve et reject.

         ✅ resolve est la fonction qui se déclenche lorsque tout s’est bien passé lors de l’exécution de votre fonction.

          ✅ reject est la fonction qui se déclenche en cas d’erreur lors de l’exécution de votre fonction.

Voici le squelette de l’utilisation de l’objet Promise :

Dans l’exemple ci-dessous, nous créerons une fonction asynchrone qui fait la somme de deux nombres:

Comme vous pouvez le voir, notre fonction asynchronousAddition prend en argument deux nombres à savoir number1 et number2.
Cette fonction retourne un objet Promise qui à son tour suivant nos conditions exécutera la fonction resolve ou la fonction reject.
Dans notre cas, la fonction resolve s’exécute si et seulement si les deux nombres saisis sont vraiment des nombres et elle nous renverra la somme de ces deux nombres. Sinon, la fonction reject s’exécutera et nous renverra le message d’erreur indiqué.

Pour exécuter notre fonction, nous ferons comme ceci:

Nous remarquons que l’exécution d’une fonction Promise n’est pas comme ce que nous avons l’habitude de faire. Il faudra donc bien maîtriser la syntaxe.

        ✅ Le mot clé then nous permet de récupérer le résultat provenant de la fonction resolve.

        ✅ Le mot clé catch nous permet de récupérer l’information provenant de la fonction reject.

Pour finir, un dernier exemple en cas d’erreur :

2- La fonction async/await

async/await est une nouvelle façon d’exécuter les fonctions asynchrones depuis l’arrivée de ES6. La logique demeure presque la même que l’objet Promise mais les syntaxes diffèrent. Ce qu’il faut retenir c’est que les fonctions async/await n’exécutent jamais la fonction reject si l’on considère qu’il s’agit de la fonction qui renvoie l’erreur. Seul le résultat de la fonction resolve est renvoyé lorsque l’opération a réussi.

Voici le squelette d’une fonction async/await :

        ✅ Le mot clé async est utilisé lors de la déclaration de la fonction

        ✅ Le mot clé await est placé juste avant l’appel de la fonction asynchrone à exécuter

Au premier regard, nous pouvons déjà affirmer que les fonctions async/await facilitent l’exécution synchrone des fonctions asynchrones précédemment créées grâce à l’objet Promise. Elles permettent d’éviter l’encombrement des « then » et « catch » ainsi que l’imbrication de promesses.

En allant sur la base de notre précédente fonction liée à la somme asynchrone de deux nombres, voici ce que donnerait son exécution avec une fonction async/await :

Dans ce cas, tout s’est bien passé car les deux paramètres sont des nombres. Voici un autre exemple où la condition liée au nombre n’est pas respectée :

Nous sommes à la fin de notre article. Nous espérons que vous avez appris une nouvelle chose avec cet article. Si vous avez des questions posez-les en commentaire. N’oubliez pas de vous abonner à notre newsletter. À la semaine prochaine pour un nouvel article  et bonne semaine de travail.