Maîtriser le JavaScript asynchrone : rappels, promesses et async/await

1. Introduction du cours: Bienvenue sur Mastering Asynchronous JavaScript l' aide des rappels, des promesses et des mots clés d' promesses et Je m'appelle Wessel et je serai votre professeur tout au long de ce cours Je suis ravi de vous présenter l'un des concepts les plus cruciaux du monde du développement JavaScript, à gestion des opérations asynchrones un peu difficile au début, mais c'est une étape essentielle pour créer des applications Web efficaces et non bloquantes. Dans ce cours en particulier, je décompose les sujets complexes en taille et de facilité à comprendre applications ou API Ces connaissances vous permettront de travailler sur plusieurs tâches à la fois sans ralentir votre application. Voici donc un aperçu de ce que nous aborderons dans ce cours en particulier Nous allons donc commencer par les rappels et nous verrons comment vous pouvez les utiliser dans votre application basée sur un script de travail Nous passerons ensuite aux promesses, qui constituent une alternative moderne et puissante aux rappels Nous apprendrons ces deux concepts ou tous ces concepts tout au long du cours à l'aide d' exemples concrets et de manière pratique. Enfin, nous explorerons les mots clés async et wait, et vous écrirez du code asynchrone qui ressemble et se comporte exactement comme du code qui ressemble et se comporte exactement Et c'est simple et vraiment très puissant. Nous allons découvrir ces possibilités et ces concepts tout au long de ce cours À la fin de ce cours, vous aurez une solide compréhension de l'écriture de code asynchrone dans le monde du script Ja Ce cours s'adresse aux développeurs de tous niveaux. Que vous soyez un développeur de scripts Ja de niveau avancé qui cherche simplement à certains concepts dans un script Ja synchrone, vous pouvez vous inscrire à ce cours ou que vous soyez un débutant souhaitant explorer ce concept de rappels, de promesses, d' attente asynchrone, vous pouvez vous inscrire et tirer inscrire Et si vous êtes développeur de niveau intermédiaire, ce cours vous aidera certainement également. Ce cours s'adresse donc aux développeurs de tous niveaux. Comme je l'ai dit, que vous soyez un grand développeur de niveau intermédiaire ou un professionnel de niveau avancé. D'accord, vous allez tirer quelque chose de ce cours. Maintenant, êtes-vous prêt à améliorer vos compétences en ja Script ? Je suis super excitée. Débutons ensemble ce cours. 2. Démarrer un merveilleux voyage avec une configuration initiale: Salut, tout le monde. Donc, pour exécuter JavaScript, nous allons effectuer une configuration sur notre machine locale, n'est-ce pas ? Maintenant, bien sûr, vous pouvez exécuter JavaScript en cliquant avec le bouton droit de la souris comme ceci dans le navigateur , en vous dirigeant vers la console et en écrivant des traitements JavaScript ici. Mais cela n'est pas idéal si vous souhaitez écrire des scripts longs et volumineux pour des applications Web destinées à la production. Maintenant, c'est là que vous avez besoin d'une installation sur votre machine locale. Donc, ce que nous allons faire, c'est utiliser un IDE. Si vous ne connaissez pas ce terme IDE, il signifie environnement de développement intégré, qui vous donne l'ensemble des outils nécessaires pour écrire du code et l'exécuter. Je vais donc rechercher du code Visual Studio car c'est ce que nous allons utiliser. Maintenant, si un code Visual Studio est déjà installé sur votre système, ou si vous savez comment l' installer, c'est très bien. Mais je suppose que vous ne l'avez pas installé sur votre système au profit des étudiants qui ne sont pas au courant de ce processus. Je vais donc me rendre sur ce site Web en particulier, code.visualstudio.com OK ? Un peu de zoom. Maintenant, la capture d'écran que vous voyez montre à quoi ressemble le code de Visual Studio, d'accord ? Et vous pouvez voir qu'il y a un surlignage syntaxique que vous pouvez voir. L'interface est donc surlignée dans une couleur différente. Les accessoires des boutons sont surlignés dans une couleur différente. Voici donc tous les avantages de l'IDE, d'accord ? Vous pouvez voir la belle structure de dossiers sur le côté gauche. Il y a un terminal ci-dessous avec tout le code couleur et tout ça. Il offre de nombreux avantages au développeur. Donc, si vous faites défiler la page vers le bas, vous pouvez voir les supports de code de Visual Studio. Au moment où j'enregistre cette vidéo, elle prend en charge de nombreux langages de programmation, d'accord ? Vous pouvez même ajouter des extensions. Maintenant, que sont les extensions ? Les extensions étendent ou étendent essentiellement les capacités du code Visual Studio par défaut. OK ? Donc, si vous souhaitez ajouter un support pour Python, d'accord ? Donc plus de support pour Python. Vous pouvez donc ajouter cette extension. Si vous souhaitez ajouter un support pour GeucPiloto, vous souhaitez utiliser l'IA lors de la programmation, vous pouvez ajouter Get up Copilot Vous pouvez voir qu'il existe des tonnes d'extensions, et qu'il existe un marché d'extensions sur lequel vous pouvez télécharger et installer tout cela, et c'est gratuit. Vous pouvez voir Git up Copilot, un peu. Tout cela met donc en évidence différentes fonctionnalités. Vous pouvez personnaliser les thèmes de couleurs, les paramètres et les profils. Il y a beaucoup de choses, d'accord ? Il a une très bonne intégration avec le système de contrôle des mouvements et tout ça OK ? Vous pouvez donc consulter ce site Web et parcourir ce qu'il a à offrir. Mais si vous faites défiler l'écran vers le haut, vous verrez ici ce bouton de téléchargement pour Windows, d'accord ? Maintenant, si vous êtes sur Mac ou Linux, vous allez voir l'option de téléchargement correspondant à votre système d'exploitation approprié. Ou si vous ne le voyez pas pour une raison ou une autre, vous pouvez accéder à d'autres plateformes et vous pouvez voir quelles sont toutes les plateformes prises en charge ici. OK ? J'ai donc déjà installé le code Visual Studio sur mon système, donc je ne vais pas l'installer, mais l'installation est très simple. C'est comme n'importe quelle application que vous installez sur le système. Il n'y a pas de configuration complexe même pour Mac, c'est plus facile, et vous pouvez le voir ici, il existe plusieurs versions, par exemple si vous utilisez une puce Intel, vous pouvez installer celle-ci vous utilisez une puce Intel, . Apple Silicon, tu as celui-ci ici. Et aussi pour les systèmes basés sur Linux Ubuntu ici, vous avez la possibilité de télécharger et d'installer. OK ? Maintenant, je l' ai définitivement installé sur mon système, d'accord ? Alors voilà, je l'ai installé comme vous pouvez le voir. OK ? Donc, si vous l'installez et que vous l'ouvrez pour la première fois, voici ce que vous allez voir. C'est ainsi qu'il va vous mettre en valeur. Votre point de vue peut être légèrement différent car je suis déjà un utilisateur de Visual Studio Code Je vois donc les projets récents que j'ai utilisés. Donc je vais juste fermer ça, d'accord ? Et voilà qu'il me demande : « Hé, tu n'as encore ouvert aucun dossier. Oui, vous pouvez ouvrir des dossiers ici dans la barre latérale gauche, et cela vous montrera l'arborescence. Vous pouvez créer des fichiers et les gérer à partir d'ici même, ou vous pouvez même cloner un dépôt. Et comme je l'ai dit, il s' intègre très bien aux systèmes de contrôle Git of Ocean. Vous pouvez donc également en faire usage. D'accord ? Maintenant, ce que je vous demanderais à tous de faire, c'est de vous rendre dans votre structure et de créer un dossier, lorsque vous allez pratiquer Jascript OK ? C'est donc mon dossier dans lequel je vais m' entraîner à Ja Script, d'accord ? Et ouvrez simplement ce dossier ici dans le code Visual Studio. Ouvrez le dossier, vous pouvez dire « ouvrir un dossier » et vous pouvez accéder au dossier que vous venez de créer. Ou bien, si vous êtes sous Windows, vous avez le choix. Vous pouvez cliquer avec le bouton droit de la souris. Vous pouvez dire Afficher plus d'options, et vous pouvez dire ouvrir avec le code Visual Studio ici. Ouvrez avec le code ici. Voilà ce que c'est. Il s'agit donc de Visual Studio, qui n'est pas du code Visual Studio, c'est différent. Vous devez donc jeter un œil à ce logo. OK ? Celui-ci. OK ? Et si vous dites ouvert, vous verrez le dossier s'ouvrir ici. OK. Maximisez-le. OK ? Tu peux voir. Maintenant, j'ai deux instances ou deux fenêtres ou du code Visual Studio ici. OK ? Il s'agit du dossier que j'ai créé et qui s'appelle JavaScript. Et c'est ici que je vais créer tous mes fichiers liés au script Ja et tout ce que je vais apprendre. Donc c'est à peu près tout. J'espère que vous avez également réussi à effectuer cette configuration sur votre système. 3. Maîtriser les rappels : La base du JavaScript asynchrone: Le moment est donc venu de parler de callbacks. Maintenant, qu'est-ce qu'un rappel ? Ainsi, par définition, un rappel est une fonction qui est passée en argument à une autre fonction OK ? Fonction transmise en tant qu'argument à une autre fonction et exécutée après d'un événement ou d'une opération spécifique. Maintenant, laissez-nous comprendre en détail pourquoi vous avez besoin de ce que l' on appelle des rappels OK ? Permettez-moi donc de vous donner un exemple. Maintenant, il y aura des scénarios dans lesquels vous travaillerez sur une sorte de code dans lequel vous devrez effectuer une sorte d' événement externe ou une interface avec un système externe, d'accord ? peut prendre un peu de temps, ce n'est peut-être pas instantané comme les opérations de base, mais cela peut nécessiter un certain temps que votre système devra peut-être attendre pour obtenir le résultat, d'accord ? Par exemple, un appel d'API. Donc, si vous effectuez un appel d'API, vous attendriez généralement la réponse de l'appel d'API, n'est-ce pas ? Ce n'est pas comme si vous déclenchiez l'appel d'API et que vous obteniez une réponse instantanée. Ce n'est pas comme ça. Vous avez déclenché un appel d'API, vous attendez la réponse, vous obtenez la réponse, puis vous l'utilisez. OK ? Simulons donc un scénario dans lequel nous effectuons un appel d'API. OK. Donc, ce que je ferais, c'est simuler un scénario à l' aide de la fonction de temporisation. OK ? Donc, en JavaScript, nous avons ce qu'on appelle un délai d'attente, OK, qui peut essentiellement être utilisé pour définir un délai de votre côté OK ? Permettez-moi donc de vous donner un exemple ici. OK ? Disons que j' ai ce message. OK, donc je peux dire « Console point log » ici. OK. Et je peux dire immédiat. Maintenant, ce message sera affiché immédiatement, n'est-ce pas ? Ce n'est pas comme s'il serait affiché au bout d'un moment ici, n'est-ce pas ? Il serait affiché immédiatement. OK ? Mais il y aura des scénarios dans lesquels je pourrais vouloir provoquer un retard. Donc, dans ce cas, vous pouvez utiliser le temps mort. Vous pouvez donc dire « fixez une heure d'ici ». OK. Je peux avoir une fonction comme celle-ci, o. Et ce serait une fonction anonyme, sans paramètres. Je peux dire Csol log, je peux dire retard. Quelque chose comme ça. Et je peux même régler le délai. Disons 2000. Maintenant, 2000 correspond à des millisecondes, ce qui signifie qu'il sera retardé Je peux donc enregistrer ça. Vous pouvez voir immédiatement et au bout de 2 secondes, vous verrez un retard ici, n'est-ce pas ? C'est ainsi que cela fonctionne. Si j'ajoute trois points ici, si je l'enregistre, vous verrez immédiatement, puis un délai. OK ? Alors pourquoi apprenons-nous ce qu'est le timeout en ce moment ? Pourquoi parlons-nous de temps mort ? Parce que nous allons utiliser le délai d'attente pour simuler un exemple de quelque chose qui dépend d'un système externe, comme un appel d'API, n'est-ce pas ? L'appel d'API prendra un peu de temps, non ? Par exemple, vous allez envoyer votre demande au serveur, puis le serveur traitera la demande. Je vais m'adresser à la base de données, qui vous communiquera les données. OK ? Il y a donc un petit délai, environ 1 seconde ou 2 secondes, selon rapidité avec laquelle les choses se passent de votre côté, n'est-ce pas ? Il y aura donc un retard, et comment simuler un retard ? Nous simulerons le délai dans le code R à l' aide du timeout Hein ? Disons que j'ai un bout de code ici. OK. Ce que je vais faire, c'est créer une fonction. OK ? Il y a donc une fonction. J'appellerai cette fonction pour récupérer des données ici. OK ? Je n'ai pas besoin de paramètres ici. OK. Et je vais définir le délai d'expiration ici comme ça. OK. Et je peux vraiment utiliser les fonctions des flèches ici. OK ? Au lieu de l'ancienne syntaxe, je peux passer aux fonctions de flèche. Et ici, je peux parler de données extraites du serveur. OK ? Je peux donc obtenir des données à partir de. OK. Et ici, je peux ajouter un délai de 2 secondes. OK ? C'est donc chose faite. C'est bon. Et ce que nous pouvons faire, c'est appeler cela en particulier. OK. Disons donc que j'ai, je peux dire que j'ai une fonction ici. Je peux dire traiter les données ici, d'accord ? Et ici, je peux dire récupérer des données, quelque chose comme ça. OK. C'est ce que j'appelle. Et j'appelle Process Data. OK ? Je dis, d'accord, donc je dis traiter les données. OK. Quelque chose comme ça. Ce qui se passe, c'est que j' appelle d' abord les données de processus, comme vous pouvez le voir, les données de processus. Process Data appelle alors fetch data, et fetch data effectue une sorte d'opération, comme parler à un EPI ou autre, et obtient OK ? Si je l'enregistre, d'accord, vous verrez le délai et les données provenant du serveur au bout de 2 secondes. OK ? Donc pour l'instant, je vais juste supprimer ceci, je vais juste le commenter puisque nous avons compris ce qu'est le délai Mais ici, ce que nous essayons de faire , c'est de récupérer les données et les données sont récupérées dans un délai de 2 secondes OK ? Maintenant, disons si nous récupérons les données et que nous obtenons une sorte de réponse que nous voulons capter OK. Supposons que nous extrayons les données et nous obtenions une réponse du serveur que nous voulons récupérer Je vais donc avoir un retour hypothétique ici, qui représentera Supposons qu'il s'agisse des données représentées par le serveur. OK ? Il s'agit d'exemples de données. OK ? Ce qui se passerait dans ce cas c'est que je peux obtenir les données ici. Je peux dire de laisser les données ici. OK. Je peux faire un journal de console ici. OK, je peux voir des données, quelque chose comme ça. Si je l'enregistre, vous verrez que je n'obtiens aucune sortie. Je suis indéfini. OK ? Cela n'a pas fonctionné car récupération des données a un retard, n'est-ce pas ? Ce truc a donc mis 2 secondes à revenir. OK ? Mais que s'est-il passé, est-ce que cela a été exécuté avant que cela ne revienne, n'est-ce pas ? Cela a un délai de 2 secondes. Donc, cette chose n'a pas attendu que son exécution soit terminée et qu'elle y revienne avec le résultat. Au lieu de cela, il l'a exécuté en premier. Hein ? Donc, ce qui s' est passé, c'est que nous n'avons pas été définis Les données ont donc été renvoyées, mais ce code a été exécuté et cela n'a pas fonctionné comme prévu, n'est-ce pas ? Imaginez maintenant avoir un appel d' API ici, véritable appel d'API au lieu d'un délai d'attente ici J'ai un appel d'API et je reçois une réponse du serveur Maintenant, je dois attendre pour obtenir la réponse du serveur, non ? Je ne peux pas passer directement à l'étape suivante, n'est-ce pas ? Et c'est là que les rappels entrent en jeu, non ? C'est un besoin de rappel. Vous pouvez donc voir cet exemple, en supposant que vous subissiez ici une opération quelconque qui entraîne un certain retard. D'accord, environ 2 secondes. Et nous avons simulé ce délai à l' aide de cette fonction de temporisation définie Donc, en supposant que vous subissez une opération qui cause un retard, accord, c'est ainsi que les choses fonctionneraient sans rappels, n'est-ce pas Vous avez donc besoin d'un rappel, qui est une fonction transmise en tant qu'argument à une autre fonction et exécutée après fin d'un événement ou d'une opération spécifique Maintenant, quel est l' événement dans notre cas ? Dans notre cas, l'événement est cette opération de récupération ou cette opération différée que nous avons. OK ? Alors, comment les choses pourraient-elles fonctionner ? Permettez-moi de mettre à jour cet exemple ici, d'accord ? Donc, ce que je ferais, c'est qu'on me rappellerait ici, quelque chose comme ça OK. Et ce que nous pouvons faire, c'est me le faire ou, vous savez, plutôt que de modifier cet exemple, je copierais simplement cet exemple, d'accord. Et nous créerions, je garderais cet exemple intact et j' aurais un rappel ici, d'accord ? Et je vais le dire par téléphone ici. OK, donc je le fais pour que nous ayons les deux exemples et que nous puissions différencier la différence. OK ? Vous pouvez donc voir ici récupérer des données et j'appelle fetch data avec rappel OK ? Donc, récupérez les données avec un rappel, je peux avoir un rappel ici. OK ? Il s'agit d'un rappel. OK. Maintenant, ici, je peux appeler ces données de processus avec rappel, d'accord ? Et c'est d'ici que l' on appelle. Maintenant, la façon dont je modifierais cela est de prendre ces données comme paramètre ici. OK, je m'en débarrasserais ici. OK. Il s'agit donc de la fonction de rappel qui serait exécutée une fois cette opération terminée Donc, cette opération de temporisation, une fois qu'elle est terminée, nous devons imprimer les données, n'est-ce pas J'accepte donc les données en tant que paramètre ici et je fais un journal de console, d'accord. Ce que je ferais, c'est chaque fois que j'appelle ces données de processus, avec un rappel Ce que je ferais, c'est qu' au lieu de l'appeler, je dirais récupérer les données avec un rappel ici J'appellerais immédiatement cette fonction ici, et je la passerais en argument, cette fonction comme celle-ci J'utilise donc les rappels maintenant. Et si je sauvegarde ceci, d'accord, permettez-moi d'ajouter ceci, d'ajouter quelque chose ici avec un rappel. OK ? Et cela se fait avec le rappel et je reçois les données. Je vais ajouter un liquide de refroidissement. OK ? Maintenant, ici, plutôt que de revenir, ce que je peux faire, c'est dire ici. Je dois d'abord créer des données, d'accord ? Je vais donc parler de données. C'est équivalent à quelque chose comme ça. Voici donc les données. Supposons donc qu' il s'agisse des données renvoyées par le serveur. Maintenant, je vais prendre ces données, je vais dire callback et je vais les transmettre aux données, quelque chose comme ça Si je l'enregistre, vous verrez que le premier n'est pas défini. Vous pouvez voir les données du serveur, les données du serveur, et ici vous les voyez avec le rappel, n'est-ce pas ? Les données du serveur sont donc imprimées deux fois à cause de ce journal de console. Donc, si je m'en débarrasse, et si je l'enregistre, vous verrez les données du serveur. C'en est donc un, et puis vous avez des exemples de données de rappel ici J'espère donc que cela est clair quant à l'utilisation du rappel ici, quel est le cas d'utilisation Donc, ici, il s'agissait d'une fonction qui était censée être exécutée lorsque les données étaient renvoyées avec succès. OK ? Donc, ici, si vous voyez que les données ont été renvoyées avec succès, cette fonction était en cours d'exécution, comme le code qu'elle contient, n'est-ce pas ? Donc, au lieu de le faire, nous avons transmis cette fonction elle-même. Donc, ici, vous pouvez voir que cette fonction elle-même est passée ici à une autre fonction, d'accord ? Il s'agit d'une fonction qui interagit avec l'API ou qui effectue une opération qui cause un retard, d'accord ? Et ici, cette fonction est transmise en tant que rappel. OK. Donc, une fois l' opération terminée, la fonction de rappel est appelée avec les données et arrivent ici et les impriment ici, n' données arrivent ici et les impriment ici, n'est-ce pas ? J'espère donc que c'est clair. Donc, au lieu de devenir indéfinie maintenant, c'est que toute cette opération est en attente Il attend 2 secondes jusqu'à ce que les données soient récupérées. Ensuite, ces données de processus avec rappel sont appelées avec les données reçues du serveur, puis elles sont imprimées sur le contrôleur, quelle que soit l' opération que vous souhaitez effectuer et que vous pouvez ajouter ici OK. C'est ainsi que fonctionne le rappel, et j'espère que l'on comprend pourquoi c'est important OK ? Maintenant, une dernière chose que je voudrais vous montrer ici, c'est que vous pouvez avoir des rappels, comme des rappels en cas de réussite, ainsi que des erreurs, C'est donc quelque chose que je souhaite vous montrer à tous. OK ? Donc, ce que vous pouvez faire, c'est qu'avant passer aux rappels avec succès et erreurs, je veux également vous montrer une syntaxe ici, qui est celle des fonctions de rappel anonymes OK. Donc, voici ce que nous faisons est dans cet exemple particulier, si je le copie. OK. Ce n'est pas anonyme, n'est-ce pas ? Permettez-moi donc de mettre à jour ces deux points. OK. Je vais juste dire non ici. OK. Et celui-ci n' est pas non plus ici. OK. J'espère que tout est à jour. C'est bon. Maintenant, ce qui se passe, c'est que nous transmettons cette fonction à cette fonction particulière ici, n'est-ce pas ? Nous pouvons donc raccourcir la syntaxe. Ce que je peux simplement faire, c'est simplement couper ça , ici, je peux simplement dire fonction. Je peux simplement accepter les données ici et je peux simplement y aller, oups, je n'ai pas eu besoin d' un paese frisé, je peux simplement les coller comme ça OK ? Maintenant, ce n'est pas nécessaire, c'est ainsi que la syntaxe devient, avec anonymous. Je peux dire qu'il n'y en a pas ici. Je peux l'enregistrer et vous verrez les données du serveur avec rappel avec non, vous pouvez augmenter ce délai à 3 secondes. Voyons comment cela fonctionne. C'est bon. Vous pouvez voir les données du serveur, les données avec rappel et les données avec non Ou si je le mets à jour à 10 secondes, cela devrait bien fonctionner. OK, en fait, une erreur ici, c'est d'appeler fetch data avec callback OK. Cela fait donc toujours référence à la fonction cool, mais je vais également la mettre à jour avec Annan ici Je me demandais pourquoi cela ne reflétait pas les changements en quelques secondes. Vous pouvez donc voir ici au bout de 10 secondes, Annan se reflétera ici Tu peux voir. OK, tu peux voir. Cela a donc parfaitement fonctionné avec une syntaxe plus courte. Il s'agit donc d'un exemple de fonctions de rappel anonymes. OK ? Maintenant, je voudrais parler des rappels en cas de réussite et d'erreur Maintenant, il y aura des scénarios dans lesquels, si vous passez un appel à l'EPA, d'accord, il est possible que les choses réussissent ou non, n'est-ce pas ? Je vais donc le copier ici. Disons qu'il y a une opération que nous voulons effectuer. OK. Je dirais qu'avec une erreur de réussite, quelque chose comme ça. Vous pouvez avoir deux rappels ici. Succès, rappel et vous pouvez avoir une erreur, un rappel, quelque chose comme ça OK. Donc, ce qui se passe, c'est qu'ici à l' intérieur, dans le délai imparti, vous pouvez avoir du code Disons que j'ai un code. Curd. OK. Une erreur s'est produite, disons, je vais garder ces deux points vrais. Disons que c'est une valeur booléenne ici. OK. Maintenant, oups, si une erreur s' est produite, alors je dois appeler Success callback, n'est-ce appeler Success callback, Rappel réussi avec certaines données, je peux transmettre certaines données comme une erreur Cordon ou quelque chose comme ça. OK ? Et si ce n' est pas le cas, alors je peux vous dire « oui ». OK. Et au lieu de cela, je peux dire, d'accord, donc si ce n'est pas une erreur, alors vous pouvez probablement continuer comme ça normalement. OK, tu peux l'avoir . Et au lieu d'appeler callback ici, vous direz, oups, cela ne devrait pas être Cela devrait être un rappel de réussite. Et en fait, s'il s'agit d'une erreur, vous appellerez le rappel d'erreur ici, quelque chose comme ça, non ? C'est ainsi que se dérouleront les appels, non ? Et vous pouvez voir, nous allons donc changer cela à quatre, d' accord, 4 000 millisecondes ici. OK. Maintenant, ce que vous pouvez faire, c'est que ces deux rappels peuvent également être créés ici OK ? Donc ici, je peux dire fonction. OK. Donc, si vous vous basez sur succès comme celui-ci, vous pouvez parler de données ici. OK. Et ci-dessous, vous pouvez dire « non confirmer ». Il devrait y avoir un journal à points sur la console ici, et vous pouvez dire « succès OK ». Et vous pouvez faire imprimer des données sur la console. OK. Maintenant, vous pouvez également dupliquer la même chose en cas d'erreur. Vous pouvez donc dire, en cas d'erreur, « OK, comme ça ». Et au lieu de succès, vous pouvez dire erreur et les données s' afficheront. OK ? Il s'agit donc de deux fonctions. Maintenant, ce que vous pouvez faire, c'est en appelant ceci, en appelant les données de récupération Donc, si vous dites « récupérer les données avec succès » et « erreur », vous pouvez dire « OK » en cas de succès Sur le succès d'abord, parce que vous avez défini le rappel de réussite en premier, n'est-ce pas ? Et puis, par erreur, quelque chose comme ça. Maintenant, si vous l'enregistrez, vous ne devriez voir aucune erreur s'afficher car nous avons simulé la situation d'erreur Vous pouvez voir qu'une erreur s'est produite, n'est-ce pas ? Vous pouvez donc le voir, et ceci est en cours d'impression. Une erreur s'est produite, non ? Vous pouvez maintenant passer de cet exemple à l'exemple de fonction anonyme. Tout d'abord, il s'agit d'un exemple de réussite et d'erreur. OK ? Vous pouvez également le rendre aléatoire, afin que je puisse utiliser les points mathématiques aléatoires Point mathématique aléatoire ici. OK. Si vous dites point mathématique aléatoire, c'est une méthode intégrée à un objet mathématique. Vous pouvez donc voir que cela me donne des valeurs aléatoires de 0 à 1. Vous pouvez le voir ici sur la console. OK. Maintenant, je peux dire que le point mathématique est aléatoire inférieur à 0,5. Cela me donnera une valeur booléenne, vraie, parfois vraie, parfois fausse Je peux donc faire copier et ajouter cette condition ici. OK ? Donc, cette erreur s'est produite, la condition est maintenant dynamique, n'est-ce pas ? Donc, si je sauvegarde ceci, vous pouvez voir l'erreur, vous pouvez voir l'erreur et succès sera assez dynamique. Maintenant, si je le sauvegarde à nouveau, maintenant c'était une situation d'erreur, cela peut aussi être un succès. OK ? Vous pouvez voir des exemples de données de réussite, n'est-ce pas ? Vous pouvez passer à une fonction anonyme, afin que je puisse la découper ici. OK. Tu peux le dire comme ça. OK. Et puis tu l'as ici. OK. Donc c'est fait, d'accord ? Et puis vous pouvez également avoir l'erreur. Maintenant, vous pouvez également enchaîner les rappels, d'accord ? Alors laissez-moi vous montrer comment vous pouvez le faire. OK ? Donc des rappels enchaînés. C'est bon. Disons que j'ai une fonction. OK, donc je vais avoir cette fonction ici. OK. Laisse-moi appeler ça. Oh, désolée. Laissez-moi le copier. Je vais donc appeler cette fonction comme première étape. OK, il y a un rappel, définissez le délai d'expiration. Et ici, je vais avoir le journal de la console ici, qui indique les étapes 1 à ici. OK, quelque chose comme ça. J'appelle J'ai aussi un rappel ici, qui n' accepte pas de paramètre OK. Et au lieu de 10 000, je m'en tiendrai à des milliers ici. C'est donc une fonction que j'ai avec un rappel. C'est la première étape. Disons que j'ai une deuxième étape. Je fais donc plusieurs opérations ici. OK ? Il s'agit de la deuxième étape. Je dirais que c'est encore une fois la deuxième étape. OK. Je reviendrai ici. Je dirais que c'est la troisième étape, quelque chose comme ça. C'est encore une fois la troisième étape. OK. Donc, par ici. Maintenant, ce que je peux faire, c'est passer à la première étape. Donc, premier style appelé étape 1. OK. Au cours de la première étape, je vais avoir une fonction de flèche comme celle-ci, et ici je peux dire étape deux. Donc, dans la fonction flèche, je vais dire la deuxième étape. Maintenant, la deuxième étape nécessite un paramètre. Au lieu de cela, je vais à nouveau transmettre une fonction de flèche. OK. Et puis, ici, je vais encore passer à la troisième étape, quelque chose comme ça. Je vais dire quelque chose comme ça. Comme ça et ici, comme ça. OK. Et ici, je vais juste mentionner que le journal des points de la console est terminé, d'accord ? Quelque chose comme ça. Tout est terminé. Je vais dire les étapes, d'accord ? Je vais ajouter un point-virgule ici. Et je vais voir CV Okay. Vous voyez maintenant l'étape 1 terminée, étape 2 terminée, l'étape 3 terminée et toutes les étapes terminées. C'est bon. En fin de compte, vous voyez des exemples de données de réussite, car délai d'expiration était plus long, oui Et celui-ci avait également un délai d'attente plus long, non ? Mais ici, vous pouvez voir que les étapes 1, 2 et 3 sont terminées, d'accord ? Et voici comment vous pouvez effectuer une opération qui implique plusieurs opérations asynchrones, d'accord Maintenant, je voudrais également souligner une dernière chose ici, comme cette histoire d' enchaînement des rappels, également connue sous le nom d'enfer des rappels Donc, si vous recherchez sur Google ou si vous lisez des articles sur JavaScript ou les callbacks, vous tomberez sur ce terme appelé callbacks Hell, et voici ce que c'est Dans lequel vous enchaînez des rappels ou créez une pyramide de rappels, dans laquelle les rappels sont imbriqués les uns Ils sont donc imbriqués les uns dans les autres. Maintenant, ce n'est pas une pratique recommandée, est-ce pas, car cela rend également le code plus difficile à lire et à maintenir. Donc, si quelqu'un lit votre code demain, d' accord, il aura du mal à comprendre ce qui se passe ici, n'est-ce pas ? Et si vous avez plus d'appels ou plus d'opérations asynchrones, plus de codes APA, alors ce serait encore plus difficile et vous pourriez même commettre des erreurs en tant que développeur Hein ? Donc oui, c'est ce qu'est le callback hell Ce n'est pas une pratique recommandée, mais je souhaite expliquer et enseigner ce concept à vous tous, d'accord ? Maintenant, vous pouvez même utiliser des rappels, d'accord, utilisez des rappels avec des méthodes matricielles OK ? Les tableaux ont donc bonnes méthodes qui sont utiles ici OK ? Permettez-moi de vous le démontrer , afin que je puisse dire des chiffres ici ou plutôt des chiffres. OK. Et j'en ai un, deux, trois, quatre, cinq et six, d'accord. OK. Maintenant, vous pouvez dire, disons que nous voulons doubler ou que nous voulons obtenir un tableau où chaque nombre est doublé dans ce tableau. Je peux donc dire « laissons les chiffres doublés », d'accord. Et ici, ce que je peux faire, c'est dire que les chiffres sont enseignés sur la carte. OK, donc je vais avoir une carte ici, et ici je peux voir le fonctionnement. Je vais avoir un énoncé de fonction. Cela n'aura pas de nom. Vous pouvez même créer une fonction en utilisant les fonctions de flèche, mais je le fais de cette façon et vous pouvez voir renvoyer des nombres en deux, quelque chose comme ça. Vous ne faites que doubler le nombre ici. OK ? Et puis, ici, vous voyez le journal de la console. OK, donc je vais juste te dire de te connecter ici. Et tu peux dire des nombres doubles, quelque chose comme ça. OK. Alors maintenant, d'accord, nous recevons donc une erreur indiquant que la référence numérique n' est pas définie. OK ? Donc, les numéros de fonction. OK, donc ce doivent être des chiffres. Ou tu peux appeler ça par un numéro, d'accord, pas par un numéro. Numbers est de toute façon le nom du tableau. Donc, si vous enregistrez ceci, vous verrez, c'est le résultat. OK ? Donc, ce qui se passe, c'est cette fonction cartographique prend le rappel en entrée, d' accord, parce que c'est aussi fonction et c' est aussi une fonction Tu peux voir ? C' est ainsi que cela fonctionne. OK ? Les méthodes de carte prennent donc une fonction de rappel et l'appliquent à chaque élément des tableaux D'accord ? Donc oui, c'est une question de rappels, d'accord Maintenant, revenons à la théorie, d'accord ? Que sont les callbacks ? Vous êtes donc assez clair maintenant. Le rappel est une fonction qui est transmise en tant qu' argument à une autre fonction et exécutée après la fin d'un événement ou d'une opération spécifique fin d'un événement ou d'une opération Ils vous permettent donc de contrôler l'ordre d'exécution, gérer plusieurs tâches et de réagir aux événements, n'est-ce pas ? Mais gardez à l'esprit que l' utilisation excessive des rappels ici, comme nous l'avons vu, peut mener à un enfer des rappels OK, et ce n'est pas une bonne pratique, non ? Donc oui, ce sont des rappels, et j'espère que cela a été utile 4. Promesses débloquées : Écrire un code asynchrone plus propre et plus gérable: Il est donc temps de parler des promesses et de la façon dont elles peuvent nous faciliter la vie. Donc, comme le dit la définition ici, les promesses fournissent un moyen plus propre et plus structuré de gérer les opérations asynchrones Bien sûr, quelles sont ces méthodes, nous en parlerons. Mais d'abord, voyons ce que sont les promesses. Ainsi, chaque fois que vous effectuez des opérations asynchrones, un moyen de les effectuer consiste à effectuer Donc, si je paie du code ici, c'est une opération asynchrone qui se produit, et j'utilise des rappels Vous pouvez donc voir que c'est une fonction qui effectue l'opération. J'accepte un paramètre appelé callback, et j'ai cette opération asynchrone dans laquelle vous pouvez supposer que je récupère des données de l'EPI, et ce sont les données que je reçois C'est un objet. Et puis j'appelle cette fonction de rappel ici une fois ces données récupérées, n' Maintenant, cette fonction de rappel est en fait cette fonction qui est transmise Ainsi, lorsque j'appelle G data, je transmets cette fonction anonyme à l' aide de la syntaxe de la fonction flèche, et vous pouvez voir qu'elle est appelée une fois que Get data est terminé. Donc, si je sauvegarde ceci, vous verrez au bout d'une seconde ces données sont imprimées sur la console. Ce sont donc des rappels, mais les promesses sont une meilleure approche chaque fois que vous travaillez avec un fonctionnement asynchrone Parce que si vous effectuez de nombreuses opérations asynchrones, le rappel peut mener à un rappel peut mener à enfer dans lequel vous pourriez avoir du mal à gérer différents rappels lorsque vous les utilisez de manière intensive, n' est-ce pas mal à gérer différents rappels lorsque vous les différents rappels lorsque vous utilisez de manière intensive, n' est-ce Les promesses constituent donc une meilleure approche. Maintenant, permettez-moi de convertir cet exemple en un exemple avec des promesses, d'accord ? Je vais donc écrire le même exemple où je reçois ces données JCN à partir, disons, d'un serveur, et je vais le faire à l'aide de promesses, d'accord ? Je vais donc copier cette fonction, tout d' abord, d'accord ? Et je vais me débarrasser de cette partie ici, parce que c'est ce que nous allons changer. Maintenant, au lieu d'avoir ce délai d'attente puis de faire un rappel ou d'appeler cette fonction de rappel, je vais le supprimer Je vais dire « retournez une nouvelle promesse », d'accord ? Promis, quelque chose comme ça. OK. Maintenant, si vous passez la souris dessus, laissez-moi voir si nous obtenons une documentation OK, tu peux voir ici. Donc c'est une promesse, d'accord ? Et vous l'aurez promis ici, vous allez avoir une réception, d'accord ? Donc, ici à l'intérieur, je vais avoir une fonction flèche pour trouver comme ça. OK. Comme ça. Très bien, et je vais ajouter un point-virgule ici OK. Maintenant, cette promesse a besoin de cette fonction, et dans cette fonction, vous avez besoin de deux paramètres. Maintenant, quels sont ces paramètres ? L'une sera resolve, et l'autre sera le nom rechect ici OK ? Maintenant, pourquoi faisons-nous preuve de détermination et de rejet ? Désormais, chaque fois que vous effectuez une opération asynchrone, deux états peuvent se produire La première est que l' opération asynchrone a réussi. Et le deuxième état peut être que l' opération asynchrone que vous avez effectuée n'a pas réussi OK ? Donc, ici, si vous voyez un peu de documentation, vous verrez que vous avez deux arguments ou que le rappel est résolu, résolu signifie que l' opération a réussi Donc, résoudre est simplement un terme utilisé pour dire que le rappel ou toute autre opération a réussi, o et reject, ce qui signifie que l'erreur s'est produite ou que, pour une raison quelconque, l'opération n'a pas réussi Nous avons donc deux rappels ici, resolve et rechect OK ? Maintenant, ce que nous allons faire ici, c'est que je vais avoir la logique. Le fonctionnement asynchrone est ici. Quelle est donc mon opération asynchrone ? Je vais effectuer cette opération asynchrone, je vais l'ajouter ici. OK ? Maintenant, un autre changement que nous devons apporter, c'est que nous appelons callback, n'est-ce pas ? Je vais donc me débarrasser du rappel ici. Nous n'avons pas besoin d'être rappelés. Et au lieu d'un rappel, je dirais « résoudre ». Par ici, quelque chose comme ça. Donc, une fois l'opération terminée, je dis de résoudre ce rappel en particulier . C'est ce que je suis en train de faire. OK ? Et Resolve sera appelé, puis quel que soit l'appelant, nous pourrons effectuer les étapes suivantes Donc, ce que je peux faire ici, c'est dire obtenir des données, comme ça. OK, donc je vais appeler pour obtenir des données. Mais maintenant, c'est une promesse, non ? Donc je peux dire point, alors. Maintenant, il existe deux méthodes que vous devez connaître à moment-là et que vous devez suivre ici. OK. Alors, qu'est-ce que c'est ? Si vous attendez, je pourrais voir votre documentation. OK, je ne les vois pas. Mais il s'agit en fait la réalisation réussie de cette promesse. OK ? Et si vous voulez gérer les erreurs, vous devez le faire dans le cache. Vous pouvez donc voir Data, et je vais avoir une fonction flèche ici, quelque chose comme ça, et je dirais connectez-vous ici. OK, et je dirais des données, quelque chose comme ça. OK. Ensuite, je pourrai copier la même chose ici. Au lieu de Tita, je peux voir une erreur ici, comme ça. Et au lieu du journal à points de la console, je peux enregistrer l'erreur dans ce format et je peux l'enregistrer. OK ? Et vous pouvez voir le résultat ici. OK ? Vous pouvez voir que le résultat que je reçois n'est qu'un. Idéalement, je devrais en avoir deux, un pour celui-ci et un pour celui-ci Mais il semble y avoir un problème car les noms des fonctions sont les mêmes ici. G data, obtenez des données, partout, obtenez des données. OK. Je vais donc appeler celui-ci, pour obtenir des données. OK. Je vais voir avec promesse quelque chose comme ça ici. OK. Et au lieu d'appeler get data ici, je dirais get data with promise. accord ? Il y a donc maintenant une sorte de séparation entre les noms ici. Il s'agit d'obtenir des données, et ceci d' obtenir des données prometteuses. Et si vous l'enregistrez, vous verrez que celui-ci est du premier et celui-ci du second. OK ? Cela fonctionne donc parfaitement, et vous pouvez voir ce qui s'est passé ici. OK ? Nous avons donc défini cette fonction « obtenir des données avec promesse » avec un retour ici. Il s'agit donc d'un retour. Cela rend une promesse maintenant. Hein ? Maintenant, dans le constructeur de promesses Ainsi, lorsque vous appelez cette promesse ou lorsque vous créez cette promesse, dans ce constructeur, nous simulons une opération de récupération de données asynchrone opération OK, donc quelle que soit l' opération que vous effectuez, vous devez garder à l'esprit OK. Maintenant, une fois les données récupérées ici, d'accord ? Une fois les données récupérées, nous appelons Resolve ici. OK. Maintenant, la fonction de résolution est appelée ici pour remplir la promesse avec les données de récupération. Nous transmettons donc les données également parce que nous voulons tenir cette promesse dès maintenant avec les données récupérées. Et puis ce qui se passe, c'est que lorsque vous appelez pour obtenir des données prometteuses ici, d'accord ? Vous en faites usage et vous vous retrouvez ici. Ce sont donc deux méthodes qui peuvent vous aider à gérer le succès de la promesse ou son échec. est donc utilisé pour gérer l' exécution réussie. Voici donc si vous faites défiler la page vers le haut lorsque la promesse est remplie et que vous saisissez lorsque la promesse est rejetée. Vous pouvez donc voir s' il y a une erreur, la promesse est rejetée, puis le cache sera exécuté. OK ? Vous pouvez donc voir que c' est la syntaxe de la promesse, fournit ainsi une manière plus propre et structurée de gérer opérations asynchrones en JavaScript C'est bon. Gardez simplement à l'esprit que l'opération que vous voulez effectuer, d'accord, se déroulera ici dans le constructeur Vous pouvez voir tout cela ici, tout se trouve dans le constructeur de promesses OK ? Telle est donc la promesse. Et puis si je vois le contrôle, C, vous pouvez voir que tout cela se passe dans le constructeur C'est ce que tu es censé garder à l'esprit. Maintenant, cette définition devient un peu compliquée car elle indique simplement qu'elle fournit une manière plus propre et structurée gérer ces opérations de synchronisation. OK ? Vous pouvez donc également penser aux promesses de cette façon : les promesses représentent en fait une valeur qui peut être disponible dès maintenant. Il sera peut-être disponible à l'avenir ou ne le sera peut-être jamais car s'il est disponible maintenant, d'accord, il est disponible. S'il n'est pas disponible, c'est qu'il est récupéré, n'est-ce pas ? C'est donc un État. Et s' il n'est jamais disponible, cela signifie qu'une erreur s'est produite. Ce sont donc les trois États qu'une promesse aurait normalement. Hein ? Donc oui, c'est une question de promesse. Maintenant, laissez-moi également vous montrer le scénario d' échec ici. OK, donc ce que je vais faire, c'est venir ici. Je vais juste dupliquer ce code ici avec des promesses, et je vais ajouter deux points. Je vais parler de succès et échec ici, quelque chose comme ça. Je vais dire que tout cela ne fait qu'un. Il suffit donc de différencier le nom de la fonction pour qu'il n' y ait pas de conflits en tant que tels OK ? Nous travaillons donc sur celui-ci en ce moment, un. OK. Obtenez donc des données avec Promise One. Maintenant, ici, disons que j' ai défini un taux de réussite, de réussite ou d'échec. OK. Donc, dans le temps imparti, je peux dire « laissons le succès OK, donc j'aurai un taux de réussite de 50 %. Je vais donc dire point mathématique aléatoire ici. Et si le hasard mathématique est inférieur à 0,5, d'accord ? Cela donnera donc un vrai ou un faux. Le succès aura donc une valeur booléenne, qu'il soit vrai ou faux, Et puis ici, je peux faire une déclaration ici , d'accord ? Et je peux dire s'il s'agit d'un succès. Très bien, alors nous obtenons ces données, comme ça. Je vais le déplacer à l'intérieur. C'est bon. Et si ça ne marche pas, alors j'ai un bloc S ici. OK. Et en nous, je peux dire « rejet ». OK ? Alors, résolvez à quoi sert Resolve ? Résoudre, c'est résoudre la promesse. Cela signifie que la récupération des données a été réussie Veuillez corriger cette promesse Maintenant, si une erreur s'est produite, vous allez appeler Reject ici et vous allez transmettre un message. Tu peux faire passer un message. Vous pouvez fournir n'importe quelle raison, comme une erreur ou une autre, ici. Je vais donc juste donner une raison. OK. Vous pouvez ajouter la raison en fonction de votre scénario, d'accord. Mais ce sera comme ça, d'accord ? Et j'ai des FLs et il n'y a rien d'autre. OK ? Alors maintenant, si vous sauvegardez ceci pour avoir du succès ici. Si vous l'enregistrez à nouveau, voyons voir, vous pouvez voir une erreur pour une raison quelconque. Cette condition a donc échoué, et vous recevez une erreur ici. Cette promesse a donc échoué, en fait. OK ? C'est ainsi que vous pouvez gérer les succès et les échecs. OK ? Donc, si vous voulez si vous avez un scénario, nous n'avons pas géré ce scénario, nous avons juste dit résultat. OK ? Il s'est donc contenté de s'occuper du résultat. Mais maintenant, s'il y a une erreur ou quelque chose comme ça, vous pourriez, par exemple, vérifier les données que vous recevez du serveur. Si les données reçues sont nulles, vous pouvez dire « rejeter » et il y a une erreur. OK ? Donc, dans ce cas, si un rejet est appelé, cache s' exécute ici, et tout ce qui se trouve dans le cache est exécuté. C'est bon. Donc oui, c'est un exemple de réussite et d' échec plein de promesses. Il y aura maintenant des scénarios lorsque vous travaillerez avec des promesses où vous souhaiterez peut-être exécuter un morceau de code, que la promesse soit remplie ou rejetée, n'est-ce pas ? Donc dans ce cas, vous l' avez enfin, d'accord ? Tu peux enfin dire « par ici ». OK. Et de la même manière, comme vous avez défini les deux autres éléments, vous pouvez dire console point log, o, et vous pouvez dire, enfin. OK. J' ajouterais simplement ce message. OK ? Vous pouvez avoir n'importe quel message ici. Cela sera donc exécuté qu'il y ait un succès ou un échec. Donc si je sauvegarde ça, tu verras enfin, d'accord ? Et vous pouvez voir qu'il y a un échec. OK ? Si je l'enregistre à nouveau, d'accord, j'obtiens le même résultat. OK, c'est encore une fois un échec. Vous pouvez voir que cette fois c'est un succès, et vous l'obtenez enfin aussi. OK ? Enfin, cela fait également partie. Mais oui, le principal problème se résoudra à ce moment-là et rattrape-le ici. OK ? Maintenant, laissez-moi vous montrer un autre scénario, d'accord, dans lequel vous pourriez avoir plusieurs promesses ensemble. Prenons donc un exemple dans lequel nous voulons exécuter plusieurs promesses en parallèle. OK ? Vous pouvez donc faire plusieurs promesses ici. OK. Maintenant, permettez-moi de créer plusieurs promesses. Je dirais qu'il faut en promettre une. OK ? Comment créeriez-vous cela ? Vous appelez simplement Fetch Data avec promesse, d'accord ? Alors, récupérez les données avec promesse. OK. Laissez-moi le copier. OK, ce n'est pas du fetch, en fait, c'est obtenir des données avec Promise One. Je suis désolée pour ça. OK. Donc oui, c'est ce que j' appelle, d'accord. Et lors de cet appel, il renverra un objet de promesse. OK, donc je vais le faire venir ici. OK ? Donc c'est un, c' est deux, et ça fait trois. Je dois le renommer. Il y en aura deux, et ça fait trois. D'accord. Trois promesses ont donc été créées. Supposons maintenant que je souhaite que ces trois promesses soient exécutées en parallèle. Donc, ce que je peux faire, c' est promettre ici, point A. Vous pouvez voir toutes ces méthodes. Et ici, vous pouvez transmettre un tableau avec la promesse 1, la promesse 2. Et promets-en trois, quelque chose comme ça ici. OK. Et puis ici, vous pouvez dire, alors, comme ça, et vous pouvez avoir les résultats ici. OK ? Donc, une fois cela fait, disons que je souhaite le faire. OK. Je vais donc m'en occuper et au lieu de vous, vous pouvez dire que c'est fait. OK. Je vais donc terminer ce message, quelque chose comme ça. OK ? Sinon, vous pouvez également ajouter un cache, afin que je puisse le copier ici. OK. Et ici je peux ajouter un cache. C'est bon. Et cela se terminera par un point-virgule. Je peux donc enregistrer ça. Et tu vas voir. Donc ces deux-là sont exécutés, d'accord ? Et attendez. Permettez-moi de saluer ces deux appels, car maintenant nous en passons beaucoup, d'accord ? Vous pouvez donc obtenir ou me laisser ajouter une connexion à la console entre les deux. OK. Donc, ce que je ferais, c'est copier ce journal de console ici. OK. Et ici, je dirais plusieurs. Quelque chose comme ça. OK. Alors maintenant, vous verrez que plusieurs sont en cours d'impression. D'accord ? OK, c'est en fait un appel asynchrone, non Il est donc imprimé dans le premier. OK. Ce que je dois faire c'est désactiver ces appels. Ce serait le mieux, je pense. D'accord ? Donc, des cerceaux, cela désactiverait également cela OK. Et je désactiverais celui-ci en cas de succès ou d'échec. Comme ça. OK. Et je vais voir si c'est le cas. OK. Maintenant, vous pouvez voir que celui-ci a été rejeté. OK. Je reçois donc cette erreur. Laissez-moi vous présenter le scénario de réussite ici. OK. Je reçois donc une erreur uniquement. OK. Très bien, vous pouvez donc voir tout ce qui est fait ici. Et les trois promesses ont été couronnées de succès. Vous pouvez le voir ici. OK. C' est donc comme ça. Vous pouvez en ajouter si vous le souhaitez. Nous n'avons pas ajouté de message personnalisé pour signaler l'échec. Vous pouvez voir qu'au moins une promesse a échoué. D'accord ? Et si vous l'enregistrez, vous verrez qu'au moins une promesse a échoué. Donc, une chose que je voudrais mentionner ici est que si une promesse échoue, d' accord, les autres sont également marquées comme échouées est que si une promesse échoue, . Tout le monde échoue, si quelqu'un échoue, vous pouvez le voir, vous pouvez le voir dans le résultat ici. Donc, tout le monde échoue, et c'est la raison pour laquelle vous obtenez cet échec en sortie. Maintenant, si je recommence, d' accord, laisse-moi te dire ceci. Vous pouvez voir maintenant que les trois ont été exécutés avec succès. Vous voyez donc que tout est terminé comme résultat. D'accord ? De la même manière, il existe une autre, euh une autre méthode, qui dit « méthode raciale ». D'accord ? Alors maintenant, il y aura un scénario dans lequel vous voudrez utiliser le résultat ou trouver la première promesse établie, n'est-ce pas ? Donc, dans ce cas, vous pouvez dire point de promesse comme, et comme si vous aviez le tableau de tableaux de promesses ici, vous pouvez le faire. OK. Et vous pouvez avoir une syntaxe similaire. Donc au lieu de, euh, au lieu de tout utiliser, tu utilises les rayons ici. C'est ça, d'accord ? Et vous pouvez voir que c'est fait, d'accord. Et ici vous pouvez voir la course. Je vais donc simplement mentionner une série partout afin que nous sachions que cette sortie provient de s. D'accord. Je vais enregistrer ça. Vous pouvez donc voir Den pendant que c'est fait. Donc celui-ci a été exécuté ici. C'est une question de race. OK. Vous pouvez donc voir une erreur d' échec d'une promesse et même s' il y a eu une erreur d'échec d'une promesse. D'accord ? Donc oui, c'est ainsi que fonctionne Rays and Promise, d'accord. course vous permettra essentiellement d'obtenir la force qui se résout et tout cela vous aidera à exécuter ou à tenir toutes les promesses en parallèle. OK. Ce sont donc des promesses, et j'espère que c'est clair. Bref, les promesses offrent une méthode plus propre et une approche plus structurée pour gérer une opération synchrone, Ensuite, attrapez et enfin , voici quelques-unes des méthodes que vous pouvez utiliser, d'accord ? Et ce sont les méthodes qui vous aident à tenir vos promesses. 5. async/await : la méthode moderne pour gérer les JavaScript asynchrones: Il est donc temps de commencer à parler d'attente asynchrone. Maintenant, async et wait nous aident à simplifier encore davantage notre code asynchrone, n'est-ce pas ? Maintenant, ici, j'ai déjà écrit un exemple dans lequel j' ai cette fonction, qui renvoie une promesse, d'accord ? Et conformément à cette promesse, nous avons en fait ce code asynchrone ou dans lequel je simule un délai de 1 000 millisecondes, n'est-ce Et j'ai un taux de réussite ici de 50 %, choisis au hasard, et cela peut être un succès ou un échec ici, d'accord ? Et je m'en sers comme ça. Donc, si une promesse est résolue, est utilisée, et si ce elle est utilisée, et si ce n'est pas le cas, s' il y a une erreur, nous utilisons catch. Il s'agit donc de la syntaxe lorsque vous travaillez avec des promesses. Maintenant, le problème ici est que ce n'est toujours pas lisible. La façon dont vous le consommez n'est pas lisible. Et à l'aide de ces deux mots clés, vous pouvez encore simplifier les choses. accord ? Alors laissez-moi vous donner un exemple, donc je vais juste le commenter , d'accord ? Ce que je peux faire, c'est dire que je souhaite consommer cela, obtenir des données. Donc, ce que je peux faire, c'est dire fonction ici, et je dirais récupérer des données ou récupérer des données, appelons-le, et je vais les récupérer de manière synchronisée D'accord. Maintenant, ce que je peux dire, c'est que je peux dire « laissez les données » et «   obtenez les données ici ». D'accord. Donc, get data est le nom de notre fonction ici. D'accord ? Je vais donc également appeler cela obtenir des données au lieu de récupérer des données. D'accord ? J'ai donc les choses comme ça maintenant, et permettez-moi également d'ajouter cette instruction de journal ici, la console point log, dans laquelle j'imprime des données. Maintenant, bien sûr, voyons quel est le résultat ici. D'accord. Nous n'allons donc rien recevoir ici. D'accord ? Donc, ce que je ferais, c'est appeler cette fonction. OK, j'ai oublié d'appeler cette fonction en bref. D'accord. Je voudrais voir si c'est le cas. OK, donc tu as une promesse maintenant, d'accord ? Tu n'auras pas le résultat, d'accord ? Comment obtiendrais-tu le résultat ? Donc, pour obtenir le résultat en utilisant les mots clés Async et await, vous pouvez utiliser async comme celui-ci et ajouter wait ici. Comme ça. D'accord. Et vous pourriez obtenir les données maintenant, vous voyez ? C'est bon. C'est donc une syntaxe, peu près lisible et beaucoup plus simple que celle-ci. accord ? Ce n'est donc toujours pas lisible, et cela le simplifie encore plus. D'accord ? Maintenant, un évier et un poids dépendent l'un de l'autre. Si vous essayez de retirer un évier et si vous essayez de le sauvegarder, vous verrez que cet Awight n'est valide que dans les fonctions d'un évier Il vous faut donc un lavabo. Si vous essayez de supprimer wait ici, et si vous essayez de l'enregistrer, vous recevrez une promesse, et vous pouvez voir qu'il s'agit d'une erreur. D'accord ? Vous devez donc utiliser les deux ici pour obtenir le bon résultat, n'est-ce pas ? Et vous pouvez même gérer les erreurs ici. Vous pouvez donc utiliser la gestion des erreurs. Vous pouvez gérer les erreurs à l'aide d'un simple try catch, et quelle que soit l'erreur que vous obtenez, vous pouvez l'enregistrer de cette façon, quelque chose comme ceci. Et vous pouvez déplacer ce code à l'intérieur. D'accord. Et ici, vous pouvez dire que je peux ajouter une erreur. Quelque chose comme ça. D'accord. Maintenant, s' il y a une panne ici, vous verrez ce message d'erreur. D'accord ? Vous pouvez voir des erreurs et des erreurs pour une raison quelconque. C'est bon. Maintenant, l'avantage de la syntaxe est un : elle est lisible. D'accord ? Et l'avantage est que vous pouvez exécuter plusieurs opérations asynchrones en parallèle D'accord ? Je peux donc en avoir un de plus ici. D'accord. Alors appelons ça comme on appelle ça ici. D'accord ? Je dirais que c'en est un. D'accord. Et je vais ajouter ce truc ici. Je dirais qu'il y en a deux. D'accord. Et je vais rapidement changer le nom de la variable ici. Je dirais que c'est Data One. Il s'agit de la deuxième donnée. Cela devient la première donnée, la deuxième, laissez-moi enregistrer ceci et voyons voir. Vous pouvez voir qu'il s'agit d'une erreur. Maintenant, une promesse a échoué, n'est-ce pas ? Cela a donc été exécuté. Le reste du bloc n'a pas été exécuté. Mais si je recommence, vous en verrez une, puis la deuxième promesse a échoué. L'une a été exécutée, mais la deuxième promesse a échoué. Auparavant, la première promesse avait échoué. Permettez-moi de le sauvegarder à nouveau. Vous en verrez un et deux. Cette fois, les deux ont réussi, non ? Vous pouvez avoir des opérations parallèles comme celle-ci, et comme vous pouvez le voir ici ou vous pouvez c'est assez simple à comprendre et la syntaxe est également facile. D'accord ? Il n'y a rien de compliqué en jeu. D'accord ? Vous pouvez donc voir le premier champ. Alors bien sûr, rien ne sera exécuté dans ce bloc, non ? Je vais donc le sauvegarder à nouveau. Laissez-nous voir. D'accord. Mais au lieu de cela, laissez-moi appeler ceci ou laissez-moi augmenter le taux de réussite à 90 %, disons. Un, deux et trois. J' augmente donc le taux de réussite, et vous pouvez voir que les trois ont été couronnés de succès, n'est-ce pas ? Voilà comment cela fonctionne, et en ce qui concerne la documentation, je pense qu'Await simplifie le code asynchrone en le faisant ressembler à du code synchrone Cela ressemble donc à du code synchrone, du Javascript normal, d'accord, plus facile à lire et à entretenir Et même pour ce qui est de la taille, c'est assez simple, non ? Les gens peuvent facilement comprendre ce qui se passe, d'accord ? Donc, avec l'aide d'Await, nous disons d'attendre que cette opération soit terminée car il s'agit d'une opération asynchrone Donc il attend, il termine cela, puis il attend que cela Je le termine, puis il attend que cela soit terminé. Et comme nous utilisons wait, nous devons marquer cette fonction comme un évier ici. D'accord ? Cela améliore donc la lisibilité et simplifie la gestion des erreurs avec Try Catch Donc, ici, vous deviez utiliser le cache, juste à ce moment-là et le catch. Maintenant, ici, c'est assez simple, comme du JavaScript standard, essayez de le mettre en cache, d'accord ? Et vous pouvez utiliser l' asyncad avec plusieurs opérations synchronisées, des requêtes HTTP, etc. C'est bon. Tout cela est donc possible, et c'est incroyable. Comme ces choses sont beaucoup utilisées, donc si vous vérifiez du code JavaScript ou si vous travaillez beaucoup avec des EPI, ce qui, bien sûr, sera vous apprenez le JavaScript, accord, vous verrez souvent ces deux mots clés C'est bon. Ces deux éléments sont donc importants. Par exemple, si vous voulez accéder à Javas Crave, vous devez utiliser des outils comme React et tout, d'accord, ces Await and a sink sont quelque chose que vous devez vraiment bien comprendre accord ? J' espère donc que cela vous sera utile et j'espère que vous avez pu suivre. 6. Conclusion du cours: Eh bien, félicitations. Vous maîtrisez parfaitement le JavaScript asynchrone, et j'espère que vous avez beaucoup appris tout au long de ce J'espère que vous êtes beaucoup plus confiant dans votre capacité à gérer opérations asynchrones à l' aide de concepts tels que les rappels, les promesses, Et j'espère que ce cours vous a donné une nouvelle perspective sur la façon dont vous pouvez écrire du code asynchrone basé sur JavaScript pour gérer des opérations telles que les appels de base de données, appels EPI, etc. Voici maintenant un bref résumé de ce que nous avons appris. Nous avons couvert les rappels. Nous avons découvert les promesses et nous avons appris comment utiliser ce concept moderne pour écrire des ce concept moderne pour écrire opérations asynchrones en JavaScript Nous avons également découvert ANC and wait et nous avons compris comment vous pouvez les utiliser. J'espère que ce cours vous a donné une bonne expérience pratique, car nous n'avons utilisé aucune présentation. Tout était strictement restreint à l'IDE. Et je sais que les développeurs comme vous aiment ou préfèrent toujours coder et avoir toujours l'éditeur ouvert devant eux, car c'est ce qui leur permet d' acquérir une véritable expérience pratique avant de commencer à travailler sur des projets du monde réel. Maintenant, après avoir terminé ce cours, je vous encourage vivement à continuer à pratiquer et à utiliser les concepts que vous avez appris tout au long votre formation dans les projets sur lesquels vous travaillez. Merci d'être un groupe d'apprenants si engagés. Ce cours est accompagné d'un projet de classe, que vous pouvez trouver dans la section des projets de ce cours en particulier. Je vous recommande vivement de terminer le projet et partager avec l'ensemble de la classe pour plus de commentaires. Cela dit, nous sommes arrivés à la toute fin, et je vous souhaite bonne chance pour les projets JavaScript sur lesquels vous travaillez.