‫Instructeur : Parlons
‫maintenant d'une incroyable fonctionnalité JavaScript asynchrone appelée async/await.
‫Donc les promesses ont déjà beaucoup amélioré notre code,
‫mais nous pouvons encore faire mieux.
‫Ainsi, au lieu de consommer des promesses, avec la méthode then,
‫qui nous oblige toujours à utiliser toutes ces fonctions de rappel,
‫nous pouvons utiliser quelque chose appelé async/await.
‫Il s'agit d'une nouvelle fonctionnalité introduite dans JavaScript dans ES8,
‫qui nous facilitera grandement la vie.
‫Donc, généralement, lorsque nous
‫écrivons du code, nous allons consommer des promesses tout
‫le temps, mais généralement pas autant les produire.
‫Et donc, async/wait rend cela beaucoup plus facile à faire.
‫Maintenant, pour utiliser async/await,
‫nous devons créer une fonction dite async.
‫Alors commentons cette partie ici, afin que nous ne
‫la perdions pas entièrement, au cas où vous voudriez
‫la garder ici comme référence ou quelque chose.
‫GetDogPic est donc la fonction que nous allons écrire.
‫Et maintenant, nous devons marquer cette
‫fonction comme une fonction asynchrone.
‫Nous utilisons donc async
‫ici, puis créons la fonction comme nous le faisons normalement.
‫Donc, ce mot-clé async ici signifie
‫simplement qu'il s'agit d'une fonction spéciale asynchrone.
‫Donc, fondamentalement, celui qui continue de s'exécuter en
‫arrière-plan tout en exécutant le code qu'il contient, tandis
‫que le reste du code continue de s'exécuter dans la boucle d'événements.
‫Donc, ces fonctions asynchrones effectueront un travail
‫asynchrone sans jamais bloquer la boucle d'événements, d'accord ?
‫Cette fonction async renverra également
‫automatiquement une promesse.
‫Mais plus à ce sujet un peu plus tard dans cette vidéo.
‫Pour l'instant, ce qu'il est vraiment
‫important de savoir, c'est qu'à l'intérieur d'une fonction asynchrone, nous pouvons toujours
‫avoir une ou plusieurs expressions d'attente et
‫c'est ainsi qu'elles fonctionnent.
‫Nous utilisons donc wait puis la promesse ici.
‫Alors commençons par celui-ci, d'accord ?
‫Et puis nous pouvons enregistrer le résultat de cela dans une variable.
‫Dans ce cas, les données.
‫D'accord, et ce sera alors la même chose que
‫d'avoir ce morceau de code.
‫Voyons donc ce qui se passe ici.
‫Donc, cette attente ici arrêtera essentiellement l'exécution
‫du code à ce stade jusqu'à ce que cette promesse soit résolue.
‫Maintenant, si la promesse est remplie,
‫ce qui signifie qu'elle a réussi,
‫alors la valeur de
‫l'expression d'attente est la valeur résolue de la
‫promesse, qui est ensuite finalement attribuée à la variable de données, d'accord ?
‫Donc, au lieu d'avoir la promesse
‫puis la méthode then
‫dessus, qui obtient ensuite les données comme argument.
‫Avec async/wait c'est beaucoup plus simple.
‫Tout ce que nous faisons est essentiellement d'arrêter le code de
‫s'exécuter à cette promesse ici, d'attendre
‫qu'il revienne avec sa valeur, puis de stocker cette valeur dans une variable.
‫Et comme ça, le code
‫est encore plus facile à comprendre qu'avant.
‫Et c'est tout l'intérêt
‫d'async/wait : c'est pour que notre code ressemble davantage
‫à du code synchrone tout en étant
‫en fait toujours asynchrone dans les coulisses, d'accord ?
‫Alors continuons avec ça et copions simplement les morceaux de
‫cet exemple avant dans le nouveau, d'accord ?
‫Donc avant, nous avions notre Promesse, puis notre gestionnaire d'alors, puis nous avons
‫enregistré les données sur la console.
‫C'est donc exactement ce
‫que nous avons, simplement d'une manière différente ici.
‫Nous obtenons donc nos données stockées dans la
‫variable, puis nous les enregistrons ici.
‫Ensuite, nous obtenons l'image du chien à partir de l'API.
‫Nous avons donc la variable res, ce sera donc celle-ci.
‫Encore une fois, le résultat du
‫gestionnaire d'alors et nous attendons cette promesse ici pour revenir avec les données.
‫J'espère que cela commence à avoir du sens maintenant.
‫Donc, après cela, nous enregistrons cela dans la console, donc le
‫résultat de cet appel d'API.
‫Et enfin, nous utilisons notre dernière
‫promesse pour écrire cette chaîne dans un fichier.
‫C'est donc cette Promesse ici,
‫et celle-ci ne résout aucune valeur significative.
‫Et donc nous n'avons même pas besoin de stocker quoi que ce soit dans une variable.
‫Tout ce que nous faisons est d'arrêter le
‫code ici jusqu'à ce que ce processus d'écriture soit terminé.
‫Et puis connectez-vous à la console
‫cette chaîne.
‫Donc, si vous comparez ce code avec ce que nous avions
‫auparavant, cela a l'air beaucoup plus
‫propre et beaucoup plus facile à comprendre, n'est-ce pas ?
‫Maintenant, pour que cela fonctionne, tout
‫ce que nous avons à faire est d'appeler cette fonction ici.
‫Donnez-lui une sauvegarde et en effet, cela fonctionne toujours.
‫Donc nous obtenons toujours notre résultat.
‫Tout fonctionne toujours de la même manière.
‫Alors c'est incroyable, non ?
‫Juste une dernière chose que nous devons faire
‫ici est notre gestion des erreurs.
‫Parce que pour le moment, nous ne traitons les erreurs nulle part, n'est-ce pas ?
‫Donc ici, nous avons utilisé la méthode catch, mais
‫pour le moment, nous ne
‫pouvons pas vraiment l'attacher n'importe où, n'est-ce pas ?
‫Donc, à la place, ce
‫que nous faisons ici est d'utiliser quelque chose appelé try-catch.
‫Et en fait, cela n'a rien à voir avec
‫async/wait, c'est une fonctionnalité JavaScript standard.
‫Alors laissez-moi vous montrer comment cela fonctionne.
‫Donc, nous encapsulons essentiellement tout notre code dans un bloc try.
‫Donc, fondamentalement, le
‫code essaiera d'exécuter tout ce qui se trouve ici.
‫Et puis on a aussi besoin d'un bloc catch,
‫qui aura accès à une erreur s'il y en a une.
‫Donc s'il se produit une erreur dans ce bloc ici,
‫il sortira immédiatement de ce
‫bloc, ce bloc d'essai ici, donc celui-ci.
‫Et allez immédiatement dans le bloc catch, et nous
‫donnera accès à l'erreur qui s'est
‫produite dans le bloc try.
‫Alors maintenant, tout ce que nous avons à faire est de prendre ce morceau
‫de code pour ce journal de console, de
‫le mettre ici, de le sauvegarder et maintenant cela fonctionne.
‫Juste pour provoquer
‫une erreur maintenant, modifions celle-ci encore une fois.
‫Et effectivement, je n'ai pas pu trouver ce fichier.
‫Donc cette promesse ici rejetée, n'est-ce pas ?
‫Donc, cette promesse a été rejetée et il y a donc
‫eu une erreur et elle est immédiatement entrée dans le bloc catch, puis
‫a enregistré cette erreur dans la console.
‫Remettre.
‫Et maintenant en effet, cela fonctionne à nouveau.
‫D'accord, c'est ainsi que fonctionne async/wait.
‫Alors rappelez-vous que nous ne pouvons utiliser wait que
‫si c'est dans une fonction asynchrone.
‫C'est pourquoi il est toujours appelé ensemble,
‫donc toujours une barre oblique asynchrone.
‫Parce que ces deux caractéristiques, elles sont étroitement liées.
‫Donc, pour récapituler
‫rapidement, async/await nous permet au lieu
‫d'avoir tous ces gestionnaires
‫avec ces fonctions de rappel.
‫Cela nous permet de rendre notre code plus synchrone.
‫Donc tout ce que nous faisons est d'utiliser le
‫mot-clé wait devant notre Promesse.
‫Et puis il attendra que cette
‫Promesse revienne avec son résultat.
‫N'oubliez pas que c'est ce
‫que nous appelons du sucre syntaxique pour les promesses.
‫Donc, cela rend simplement les promesses plus belles, mais dans les
‫coulisses, tout fonctionne toujours de la même manière avec la
‫logique de promesse que je vous ai expliquée auparavant.
‫Encore une fois, c'est juste pour
‫nous faciliter la vie lors du codage et pour
‫que notre code ressemble un peu plus à du code synchrone.
‫C'est ainsi que nous implémentons async/wait.
‫Dans la vidéo suivante,
‫nous en apprendrons un peu plus sur le fonctionnement réel des fonctions asynchrones.