‫Instructeur : Vous
‫avez donc déjà appris à utiliser
‫un Async/Await, mais il y a en fait
‫un peu plus à apprendre sur le fonctionnement réel des fonctions Async.
‫Alors faisons-le maintenant.
‫Afin de comprendre un peu mieux ce qui se passe ici,
‫essayons simplement d'ajouter une console. logs après et
‫avant d'appeler les fonctions Async ici.
‫Bon, consolez-vous. log
‫Donc, la première étape
‫consistera à obtenir des photos
‫de chiens, d'accord.
‫Et puis le numéro deux.
‫Ici,
‫disons simplement, fini de prendre des photos de chien.
‫D'accord. Alors faisons une sauvegarde.
‫Et whoa, qu'est-ce qui s'est passé ici.
‫Nous avons ces deux consoles. logs avant
‫tous les logs provenant de la fonction Async.
‫Nous avons donc un, deux pour celui-ci
‫et celui-ci et seulement
‫après cela, nous avons les journaux
‫provenant de la photo du chien.
‫C'est ce que vous attendiez ?
‫Si non, analysons ce qui s'est passé ici.
‫Eh bien, comme je vous l'ai déjà dit, cette fonction
‫Async s'exécute en fait en arrière-plan.
‫Parce que c'est ainsi que les fonctions Async sont
‫simplement censées se comporter.
‫N'est-ce pas, c'est tout à fait logique ?
‫Nous ne pouvons donc pas simplement arrêter le code ici.
‫Ainsi, dès que nous appuyons sur cette
‫fonction, nous ne pouvons pas simplement arrêter l'exécution de notre thread principal ici.
‫Droit?
‫Et c'est toute la philosophie de ne pas bloquer
‫le journal des événements.
‫Nous avons donc besoin d'obtenir des photos de chiens de l'API,
‫mais ce n'est pas une excuse pour arrêter l'exécution sur le code.
‫Donc pour bloquer le journal des événements.
‫Ainsi, lorsque le moteur de script Java a cessé,
‫cette ligne de code ici, déchargera simplement la
‫fonction get dog pic en arrière-plan et passera
‫directement à la ligne suivante.
‫Donc cette deuxième console. connectez-vous ici.
‫Il est donc logique que cette chaîne soit d'abord enregistrée, puis
‫elle commencera à exécuter cette fonction,
‫puis elle enregistrera immédiatement cette ligne de code et
‫en attendant, nous lisons ce fichier en arrière-plan, et
‫dès que c'est prêt, il
‫commencera à imprimer ce journal, ce journal et
‫aussi ce journal.
‫C'est donc exactement ce qui se passe ici.
‫Un deux, puis les trois restants.
‫Avoir du sens ? D'accord.
‫Allons plus loin et
‫renvoyons en fait quelque chose de notre fonction Async.
‫Je change donc cela ici en trois, pour qu'à
‫partir de cette fonction, nous puissions renvoyer une
‫chaîne qui dit deux, eh bien disons prêt et puis ajoutons ici à
‫nouveau un emoji ici pour le
‫faire apparaître un peu plus dans notre console.
‫Alors prêt ici.
‫Et puis gardons ça.
‫Simplement une variable, peu importe ce que c'est.
‫Et puis connectez x à la console.
‫Voyons donc ce qui se passe.
‫Et puis maintenant, nous obtenons cette promesse étrange
‫en attente au lieu de la chaîne ici à laquelle nous nous attendions peut-être.
‫Alors pourquoi x est-il ici et pas cette chaîne,
‫mais cette promesse ici ?
‫Eh bien, rappelez-vous comment j'ai dit au début
‫de la dernière vidéo qu'une fonction
‫Async renvoie en fait une promesse automatiquement ?
‫Eh bien, voici donc la preuve pour cela.
‫Ainsi, au lieu de se connecter à la console à ce stade, cela
‫nous dit simplement que x est une promesse qui est toujours
‫en cours d'exécution à ce stade, et
‫donc toujours en attente.
‫C'est pourquoi il est dit en attente ici.
‫Ainsi, le script Java ne peut bien sûr pas savoir que x
‫sera cette chaîne prête ici à un moment donné.
‫Et ainsi, il passe simplement à la console suivante. log comme
‫nous en avions discuté auparavant.
‫Et au moment où JavaScript sait réellement que
‫ce x ici devrait être la contrainte que nous avons bien renvoyée
‫à ce stade, ce code ici a
‫depuis longtemps fini de s'exécuter.
‫Mais que devrions-nous faire si nous voulions
‫réellement obtenir cette valeur de retour ici ?
‫Et si nous voulions vraiment renvoyer cette chaîne et
‫l'enregistrer via la console ?
‫Eh bien, nous devrions traiter cette fonction Async
‫comme une promesse.
‫Et donc nous utiliserions la
‫méthode DEN dessus ou encore, utiliserions Async/Await.
‫Laissez-moi vous montrer comment faire cela.
‫Ainsi, au lieu d'essayer d'enregistrer la valeur renvoyée
‫dans une variable, nous pouvons utiliser la méthode DEN dessus.
‫Et voici donc où nous pouvons alors l'appeler x.
‫Alors consolez-vous. log x donc comme ce que nous avions
‫ici et ensuite nous ferions également celui-ci à l'intérieur de
‫la poignée DEN, d'accord ?
‫Passons donc en revue ce que nous avons fait ici.
‫Alors, obtenir une photo de chien renvoie une promesse, vous vous en souvenez?
‫Et donc chacun que nous avons une promesse, nous utilisons la méthode
‫DEN afin d'avoir accès à sa valeur future.
‫Donc la valeur qui finira par revenir.
‫Dans ce cas, ce sera la chaîne de deux prêts.
‫D'accord?
‫Et donc si vous voulez obtenir
‫x à cela, nous devons utiliser la méthode DEN comme nous venons de le faire ici.
‫Et seulement après cela, nous pouvons alors enregistrer
‫la troisième chaîne ici.
‫Donc, si nous lui donnons une
‫sauvegarde maintenant comme celle-ci, cela devrait alors fonctionner comme prévu.
‫Et oui c'est le cas.
‫Nous avons donc notre premier log, puis tous les
‫logs venant de notre fonction Async, puis le ready
‫venant de la ligne 42 ici.
‫Et enfin, le numéro 3. Parfait.
‫Et j'espère que cela a un sens pour vous.
‫Maintenant, que se passe-t-il s'il y a réellement eu une erreur ?
‫Eh bien, c'est un peu plus difficile à gérer.
‫Alors encore une fois, provoquons une erreur comme nous l'avons fait auparavant.
‫Mais vous voyez qu'en fait, nous entrons toujours dans
‫la méthode DEN ici.
‫Donc ce bloc ici, d'accord.
‫Donc, même s'il y avait une erreur ici dans cette promesse,
‫elle se résout fondamentalement comme une promesse réussie.
‫Il renvoie donc toujours cette valeur ici.
‫Et même si nous ajoutons notre gestionnaire de captures ici,
‫cela ne changera pas ce fait.
‫D'accord, alors utilisons catch ici,
‫puis utilisons console. log et enregistrez l'erreur ici
‫afin que vous puissiez voir qu'il n'a toujours enregistré aucune erreur.
‫Et c'est encore parce que cette promesse ici
‫provenant de cette fonction Async sera
‫toujours marquée comme réussie.
‫Mais si vous vouliez vraiment le marquer comme
‫rejeté, nous devrons faire quelque chose appelé lancer une erreur.
‫Faisons-le donc ici dans ce bloc catch.
‫Donc, s'il y a eu une erreur, nous voulons non seulement
‫l'enregistrer sur la console, mais aussi la lancer.
‫Nous utilisons donc une fonction JavaScript intégrée appelée throw.
‫Et avec cela, nous pouvons lancer une erreur.
‫Cela marquera donc maintenant toute cette fonction de cette promesse
‫comme rejetée.
‫D'accord.
‫En fait, ne nous contentons pas de consigner
‫cette erreur, faisons simplement une erreur pour la rendre un peu plus visible,
‫et quelque chose comme une explosion peut-être.
‫Ouais, quelque chose comme ça.
‫D'accord, et faisons une sauvegarde pour voir ce qui se passe.
‫Et bam, alors maintenant nous avons notre erreur ici en fait.
‫Il est donc dit que je n'ai pas
‫pu trouver ce fichier, donc ce journal provient de
‫ce journal de capture ici, mais en même temps, il générera une erreur.
‫Et s'il génère une erreur, cela marquera
‫alors toute cette promesse comme rejetée.
‫Et c'est pourquoi nous entrons ensuite dans le journal des captures ici.
‫Ce qui déclenchera alors, bien entendu à son
‫tour, cette console. log de cette erreur.
‫D'accord?
‫Et c'est bien sûr une toute nouvelle couche de complexité.
‫D'accord.
‫Mais il est toujours très important de comprendre comment cela fonctionne, car
‫cela se produit tout le temps dans la vraie vie.
‫Nous devons donc renvoyer les valeurs des fonctions Async
‫tout le temps et il est donc
‫important de savoir comment gérer réellement ces valeurs renvoyées.
‫Dans ce cas, utilisez DEN et catch.
‫Maintenant, le problème avec ceci est qu'il
‫mélange les promesses avec Async/Await.
‫Nous avons donc Async/Await ici, puis
‫tout d'un coup, nous revenons à l'utilisation
‫de DEN et rattrapons ici.
‫Alors laissez-moi vous montrer un autre modèle de le faire.
‫D'accord, alors entrons dans notre partie ici,
‫pas par ici, plutôt comme ça.
‫Et donc utilisons Async/Await pour implémenter cette logique.
‫Maintenant, nous ne voulons pas créer une toute nouvelle fonction de nom
‫pour cela, et nous allons donc utiliser un modèle bien connu
‫que j'espère que vous connaissez, qui
‫est un IIFE, donc une expression de fonction immédiatement invoquée.
‫D'accord, donc entre parenthèses, nous définissons notre fonction.
‫Comme ça, et puis nous l'appelons tout de suite.
‫Vous vous en souvenez ?
‫Ensuite, dans ce cas, puisque nous voulons utiliser Async/Await,
‫nous disons aussi qu'il s'agit d'une fonction Async.
‫D'accord, et donc cela semble un peu bizarre
‫ici, mais si vous avez suivi par exemple mon cours
‫JavaScript, cela vous semblera familier en fait.
‫Bon, encore une fois, vous déclarez une
‫fonction entre parenthèses, puis vous l'appelez fonction tout de suite.
‫Et ainsi, de cette façon, vous n'avez pas à
‫déclarer à nouveau une fonction de nom entier que vous appellerez ensuite
‫à un moment donné.
‫D'accord.
‫Maintenant que nous utilisons Async/Await,
‫nous utilisons à nouveau le modèle try it catch, comme auparavant.
‫Alors attrapez, ayez accès à l'erreur ici, et nous
‫ne pouvons en fait pas l'omettre ici.
‫Donc, même si nous ne voulons pas
‫utiliser cette erreur, nous devons toujours l'écrire ici.
‫D'accord.
‫Dans les futures versions de
‫JavaScript, cela disparaîtra, mais pour l'instant, nous devons procéder comme ceci.
‫C'est donc là que cette erreur sera.
‫Et là-haut, nous aurons toutes ces consoles. journaux.
‫Celui-ci,
‫et celui-ci.
‫Et maintenant, j'espère que vous savez comment obtenir
‫la valeur de la fonction Async.
‫Alors vous savez comment faire.
‫En fait, je vais mettre la vidéo sur pause et vous permettre
‫de découvrir comment le faire par vous-même, d'accord ?
‫Alors relevez ce petit défi et je serai de retour
‫dans une seconde.
‫Alors avez-vous réussi à obtenir cette chaîne ici, afin que ces
‫deux soient prêtes dans la variable x comme
‫nous l'avions auparavant ?
‫Alors juste comme ça ici ?
‫C'est donc comme avant.
‫Vous déclarez une variable puis vous attendez la promesse.
‫Et la promesse, dans ce cas, est d'obtenir une photo de chien.
‫D'accord?
‫Donc, cette fonction ici est une fonction Async
‫et elle renvoie donc une promesse.
‫Et la valeur de résultat de
‫cette promesse est cette valeur
‫ici, qui est renvoyée, et donc en attendant cette
‫valeur, le résultat sera cette chaîne.
‫Nous stockons donc cela dans x et nous pouvons bien
‫sûr le connecter à la console.
‫Alors consolez-vous. journal x.
‫Ensuite, en cas d'erreur, il l'attrapera et l'enregistrera
‫également dans la console ici.
‫Si nous lui donnons une
‫sauvegarde maintenant, alors bam nous obtenons toujours l'erreur parce
‫que nous l'avions ici, donc cette partie fonctionne toujours.
‫Le réparer, le sauvegarder, et c'est parti.
‫Cela fonctionne donc maintenant comme prévu.
‫Mais, encore une fois, avec Async/Await, c'est beaucoup plus
‫propre, c'est beaucoup mieux et c'est aussi plus facile à comprendre.
‫Et donc nous ne mélangeons pas Async/Await en un seul endroit ici,
‫puis nous utilisons DEN et rattrapons ici comme nous l'avions
‫auparavant avec ce morceau de code.
‫D'accord?
‫Donc dans la vraie vie, ce genre de choses arrive tout le temps.
‫Nous avons donc une fonction Async et nous l'avons appelée
‫à partir d'une autre fonction Async, et peut-être même avons-nous appelé
‫une autre fonction Async à partir de
‫cette première fonction Async, et nous avons donc un
‫tas de ces fonctions Async qui interagissent les unes avec les autres.
‫Il est donc très important que vous sachiez
‫comment tout cela fonctionne.
‫Et encore une fois pour récapituler,
‫la chose la plus importante à retenir est qu'une fonction
‫Async renvoie automatiquement une promesse, et que la valeur que nous
‫renvoyons à partir d'une fonction Async sera la valeur de résultat
‫de cette promesse.
‫Et donc à partir de là, nous pouvons simplement le
‫gérer comme une autre promesse.
‫Et c'est exactement ce que nous avons fait ici en attendant
‫cette première promesse que nous avons créée.
‫D'accord?
‫Alors s'il vous plaît, essayez de comprendre cela et
‫assurez-vous que vous le comprenez vraiment.
‫Parce que dans le reste du cours, je
‫vais supposer que vous savez comment travailler avec ce genre de choses.
‫Et c'est exactement pourquoi j'ai créé cette
‫section, pour en quelque sorte la mettre à l'écart avant de
‫vraiment commencer à travailler sans JS ni express, et toutes ces bonnes choses.
‫D'accord?
‫Nous avons donc presque fini avec cette section, il y a juste une petite
‫chose que je veux vous montrer dans
‫la prochaine vidéo.