Comprendre et Utiliser les Promesses en JavaScript

Utiliser les promesses
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre JavaScript ES6 - Les fondamentaux
Revoir le teaser Je m'abonne
3,5
Transcription

69,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
3,5
69,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

L'objectif de cette vidéo est de vous permettre de comprendre et d'appliquer les promesses en JavaScript pour gérer efficacement l'asynchronisme dans vos applications web. Vous apprendrez également à gérer les erreurs et à structurer votre code de manière plus maintenable.

Découvrez comment les promesses en JavaScript permettent de gérer des opérations asynchrones de manière efficace et structurée.

Dans cette leçon, nous explorons les promesses en JavaScript, un outil puissant pour gérer l'asynchronisme dans vos applications web. Une promesse est un objet global qui attend l'exécution d'un programme, offrant une gestion simplifiée des cas d'erreur et des étapes d'exécution.

Nous commençons par créer une promesse avec le constructeur New Promise, prenant en paramètre les fonctions resolve et reject. À travers des exemples concrets, vous verrez comment utiliser setTimeout pour simuler des tâches asynchrones, et comment le mot-clé then permet d'attendre l'achèvement des promesses avant de poursuivre l'exécution du code.

Nous analysons également les méthodes resolve et reject pour renvoyer des valeurs ou gérer les erreurs. Vous apprendrez à structurer votre code asynchrone de manière plus lisible et maintenable, en garantissant que les étapes successives ne s'exécutent qu'une fois l'opération précédée réussie ou échouée.

Enfin, vous verrez l'usage des blocs catch pour gérer les erreurs de manière élégante et garantir la robustesse de votre application.

Voir plus
Questions réponses
Qu'est-ce qu'une promesse en JavaScript ?
Une promesse est un objet utilisé pour représenter l'achèvement ou l'échec, éventuel, d'une opération asynchrone et sa valeur résultante.
Comment utilise-t-on la méthode 'then' avec une promesse ?
On utilise la méthode 'then' pour exécuter du code après que la promesse soit résolue. Elle prend un callback fonction qui sera exécuté avec la valeur résolue de la promesse.
Quelle est la différence entre 'resolve' et 'reject' dans une promesse ?
'resolve' est utilisé pour marquer une promesse comme réussie et fournir une valeur de résultat, tandis que 'reject' marque une promesse comme échouée et fournit une raison de l'échec.
On va voir ici les promesses. La promesse c'est un objet global, comme vous avez vu String, Numbers, Maths, etc. En JavaScript on y a accès et on va pouvoir mettre à l'intérieur une fonction qui va attendre l'exécution d'un programme. On va voir qu'il y a une espèce de façon un petit peu particulière de l'écrire et du coup on va pouvoir attendre l'exécution du programme. Je vais reprendre mon exemple avec cette timeout et cette fois-ci on va garder notre console.log de tout à l'heure qui était bonjour. Et pour créer une nouvelle promesse on va faire une fonction qu'on va appeler promise. C'est une fonction et qui retourne le constructeur New Promise comme ceci, qui prend un callback avec Resolve et Reject qui sont des fonctions qui vont nous permettre de définir à partir de quel moment la promesse doit être résolue ou doit être rejetée. C'est un petit peu comme avec le try-catch, on va avoir une gestion des cas d'erreur et le Resolve il faut bien le placer une fois que tout est exécuté correctement. Là par exemple on va pouvoir faire le setTimeout qui prend un callback avec toujours nos 2000 millisecondes. Et ici dans notre callback on avait notre console.log bonsoir et ensuite j'ai terminé l'exécution de ma promesse donc je vais pouvoir appeler la fonction Resolve. Je vais vous montrer que si on log Promise comme ceci on voit qu'il y a une promesse qui est en pending, c'est à dire qui attend d'être résolue. Je vais vous montrer comment on peut attendre avec les promesses et du coup choisir dans quel ordre on a envie d'exécuter le code. Et du coup on a bonjour qui apparaît et on a toujours bonsoir parce qu'on n'a pas encore exécuté la logique d'attente de la promesse. Pour attendre on va utiliser le mot clé Zen. Et Zen ça prend un callback et ensuite on peut exécuter quelque chose. Donc là en fait je vais lui dire réalise ma promesse puis ensuite fais ça. Donc au lieu d'avoir bonjour bonsoir on va avoir normalement bonsoir et bonjour à la suite avec un petit temps d'attente au début parce que bonsoir met 2000 millisecondes à s'exécuter. Donc voilà vous voyez cette fois-ci on a bonsoir et bonjour qui vont s'exécuter. Le point Zen ça permet d'attendre que l'exécution de la promesse soit terminée pour ensuite exécuter le reste de la logique du code. Tout ce que vous allez mettre en dehors du point Zen va rester asynchrone et ne va pas être impacté par ce point Zen. Vous allez me dire pourquoi on fait ça ? Pourquoi on bloque le code ? C'est quand même un avantage de ne pas avoir du code qui se bloque. Enfin c'est quand même un avantage d'avoir du code asynchrone. Le fait est que de temps en temps vous allez peut-être par exemple faire un appel à une base de données pour récupérer des informations, des articles pour votre blog ou ce genre de choses. Et vous n'allez pas pouvoir les afficher sur votre site parce que vous ne les avez pas récupérés. Donc en faisant ça vous êtes sûr que vous allez terminer votre appel à la base de données et récupérer correctement les données. Et ensuite vous allez pouvoir continuer l'exécution du code dans le point Zen et récupérer dans le callback justement la donnée que vous avez envie de récupérer. Si par exemple ici je résous avec une valeur, vous pouvez mettre une variable, peu importe. Et bien ici je vais récupérer un élément et je peux très bien le logger en même temps. Et vous allez voir que Resolve est capable justement de passer une valeur à ce callback qui est dans le point Zen. Donc vous voyez, bonjour 42, le 42 vient d'ici. Le reject ça va être la même chose. On va pouvoir faire un reject par exemple ici. Et on va avoir donc notre point Zen comme ceci qui va s'exécuter une fois que le Resolve a fonctionné. Et on va avoir un point Catch qui va nous permettre de catcher les erreurs en cas de problème. C'est un petit peu à la manière du try-catch, ça ne va pas impacter l'exécution de votre code, tout va continuer à s'exécuter. Mais on va rentrer dans ce point Catch et du coup on va avoir cette fameuse erreur. Et là normalement c'est pareil, c'est une valeur qu'on va passer ici dans Error, donc on va récupérer notre 42. Donc là je rentre uniquement dans le 42, alors dans la console ici les erreurs sont moins parlantes. J'aurais pu par exemple faire ça, si vous avez envie de quelque chose d'un petit peu plus sympa. Mais bon tout ça c'était pour vous montrer qu'on rentre bien dans le point Catch et qu'on a une erreur. Ici Error 42 et on ne rentre pas dans le point Zen parce qu'on a utilisé le reject. Vous pouvez utiliser Resolve et Reject bien sûr dans la promesse, vous allez peut-être avoir une exécution de code beaucoup plus longue. Comme je vous disais, vous faites un appel à la base de données, vous récupérez vos articles, vous allez Resolve avec vos articles et vous allez les récupérer ici dans le callback. Si jamais la base de données a planté ou qu'elle vous renvoie une erreur, vous allez pouvoir aussi voir à l'intérieur de cette promesse qu'il y a une erreur qui s'est produite. Et du coup vous allez pouvoir faire un reject pour anticiper la mauvaise exécution du programme.

Programme détaillé de la formation

8 commentaires
3,5
8 votes
5
4
3
2
1
C0C23DAC-E0F0-4671-A5DA-98CC3C3F0FD7@cyberlibris.studi.fr
Il y a 2 weeks
Commentaire
RAS
elephorm-1344761@addviseo.com
Il y a 4 months
Commentaire
Le cours sont pas assez adaptés pour une personne qui débute un peu les langages informatiques
85F76F55-E9A7-4111-B6B2-79CB51A205B9@cyberlibris.studi.fr
Il y a 7 months
Commentaire
EXCELLENT
93DAC8BB-E168-4366-B5BE-6F3D0B39B74D@cyberlibris.studi.fr
Il y a 9 months
Commentaire
super
wastiaux.william
Il y a 2 years
Commentaire
Un peu léger, le cour survole toutes les notions de bases. L'idéal est de visionner les cours en x2.
Si vous êtes novices, vous pourrez rentrer rapidement dans le monde du js.
michaellaunay
Il y a 3 years
Commentaire
Bonne formation pour qui sait déjà programmer dans un autre langage. Une formation sur Javascript avancé serait fort appréciée ;-)
olivierousmail
Il y a 3 years
Commentaire
Formation inadaptée pour un débutant, donne des concepts sans les expliquer, qu'est ce qu'un tableau ? qu'est ce qu'une fonction ? focalise tout le premier module sur l'utilisation de constantes alors qu'on est loin de les utiliser régulièrement.

Formation faite pour revenir dessus après avoir suivi une "réelle" formation sur les bases de Javascript.
lepajollecfranck
Il y a 3 years
Commentaire
Très bons contenus et bonnes explications. Manque d'un second module pour aller plus loin dans l'exemple.

Nos dernières formations JavaScript
  • Apprendre Vue JS 3
    Découvrir
    Apprenez à créer des applications web modernes avec notre formation "Apprendre Vue JS 3". Rejoignez-nous et maîtrisez ce puissant framework JavaScript ! 🚀 #VueJS #FormationWeb #Développement
    11h47 91 leçons
  • Savoir programmer en Node.js
    Découvrir
    Apprendre à programmer en Node.js
    2h14 15 leçons
  • Apprendre Javascript - Les fondamentaux
    Découvrir
    Apprendre le langage de programmation JavaScript
    2h55 29 leçons 4,50 / 5