‫- : Parlons donc maintenant
‫des problèmes qui peuvent survenir lorsque l'on utilise trop de fonctions de rappel.
‫Et pour
‫ce faire, nous allons faire un petit
‫exemple pour illustrer cet effet.
‫Maintenant, rappelez-vous que si vous êtes déjà familiarisé avec
‫Promises et Async/Await et en général, Asynchronous
‫Java Script, n'hésitez pas
‫à sauter cette section et à marquer
‫toutes les vidéos comme terminées afin que vous
‫puissiez toujours terminer à 100 pour cent
‫le cours.
‫Mais si vous voulez
‫tout savoir sur le script
‫Java asynchrone et comment l'utiliser dans OJS, passons à autre chose.
‫Alors allez-y
‫et obtenez les fichiers de démarrage pour ce projet à
‫partir des fichiers de cours.
‫Je l'ai déjà ici sur mon
‫bureau, donc ce dossier ici.
‫Et il n'y a que ce
‫fichier là-dedans, donc c'est tout ce dont nous aurons besoin pour commencer.
‫Et je l'ai ici dans VS Code déjà ouvert et ce
‫que nous allons faire pour
‫commencer, c'est simplement créer un NX. fichier JS.
‫Juste comme avant.
‫Maintenant, ce que nous allons faire,
‫c'est que nous allons utiliser
‫ce fichier de chien ici, ce fichier texte.
‫Et à partir de là, nous lirons la race de chien.
‫Et puis nous allons faire une requête
‫HTTP pour obtenir une image aléatoire d'un chien de cette race.
‫Et puis enregistrez cette image aléatoire dans
‫un autre fichier texte.
‫C'est donc un processus en trois
‫étapes et tout cela impliquera des fonctions de rappel.
‫Et à la fin, nous verrons le problème que nous rencontrons
‫lorsque nous utilisons toutes ces fonctions de rappel
‫les unes dans les autres.
‫D'accord?
‫Donc, pour cela, nous allons utiliser
‫une API assez populaire.
‫Ce qui ressemble plus à une API amusante.
‫Mais pour ce genre de
‫choses, c'est une bonne idée de l'utiliser.
‫C'est donc le CHIEN. PDG, API.
‫Alors appuyez simplement sur Dog API ici.
‫Alors par
‫ici, la documentation.
‫Et ce que nous voulons, c'est avoir un chien au
‫hasard, ou une certaine race.
‫Alors cliquez ici par race.
‫Et ici
‫en bas, voici le point de terminaison de l'API que nous allons atteindre.
‫C'est donc cette URL ici.
‫Donc, lorsque vous cliquez sur récupérer ici,
‫à chaque fois vous obtenez une nouvelle image, d'accord ?
‫Et donc
‫dans cette section, nous allons en fait faire
‫une requête HTTP comme nous l'avons appris
‫auparavant dans la section précédente.
‫D'accord.
‫Donc tout ce que
‫nous aurons à faire est de créer une requête HTTP vers cette URL
‫et ensuite cela nous renverra une image.
‫D'accord?
‫Mais pour l'instant, commençons en fait par une
‫partie où nous lisons le fichier et obtenons le contenu
‫de ce fichier.
‫Donc dans notre index. js, encore une fois, nous avons besoin du package ou
‫du module du système de fichiers.
‫Donc FS
‫et nécessite le module FS ici.
‫Et juste comme avant de faire fs. readfile et
‫nous faisons la version asynchrone.
‫D'accord.
‫N'oubliez pas que nous passons ici l'emplacement du fichier, puis une
‫fonction de rappel qui
‫sera appelée dès que nous aurons fini de lire le fichier.
‫Nous avons donc notre chaîne de modèle ici.
‫Et puis nous utilisons un nom de répertoire comme nous le faisions auparavant.
‫Donc le nom du répertoire courant.
‫/chien. SMS.
‫D'accord, puis notre fonction de rappel
‫dont le premier argument est, comme toujours, une erreur.
‫Et puis les données qui se trouvent réellement dans le fichier.
‫Et juste pour être
‫sûr, enregistrons-le bien sûr sur la console.
‫Donc, une autre
‫chaîne de modèle pour que nous puissions bien sortir nos données ici.
‫D'accord.
‫Démarrez le terminal ici
‫et augmentez-le un
‫peu.
‫Et donc j'utilise nodemon comme je l'ai fait
‫avant, puis index. js.
‫Bon alors la race est retriever.
‫Et c'est exactement ce que nous avons ici dans ce fichier.
‫Bon alors le retriever est la race que nous recherchons.
‫Maintenant, à l'intérieur de cette
‫fonction de rappel, nous voulons faire cette requête
‫HTTP dont nous venons de parler.
‫Et il existe en fait des moyens
‫de le faire avec
‫des modules natifs sans JS.
‫Mais il est plus facile d'utiliser simplement un package NPM pour cela.
‫Et il y en a
‫encore beaucoup, mais celui que nous allons utiliser s'appelle Super Agent.
‫Plus tard, nous en utiliserons un
‫autre, mais pour l'instant, Super Agent est parfait pour ça, d'accord.
‫Et afin de télécharger réellement ce module en utilisant NPM, nous
‫allons commencer par créer notre fichier de paquet Jason.
‫Vous vous en souvenez ?
‫Alors laissez-moi juste finir ceci et
‫faire du NPM dedans.
‫Et appuyez simplement sur Entrée sur tout cela.
‫Cela n'a pas vraiment d'importance.
‫D'accord.
‫Nous voulons juste ce paquet. jason
‫afin qu'il contienne réellement le nom du package
‫que nous utilisons.
‫Donc, nous le faisons toujours chaque fois que nous commençons un nouveau projet.
‫Et maintenant, installez NPM, ou
‫nous pouvons simplement utiliser le I, qui est le même, puis le
‫nom du package.
‫Alors rien de nouveau, n'est-ce pas ?
‫Maintenant, pour utiliser
‫ce package, nous créons
‫une nouvelle variable qui contiendra ensuite la fonction Super
‫Agent que ce module nous expose.
‫Allons de l'avant et utilisons réellement cette fonction
‫Super Agent.
‫Donc, pour faire une requête get,
‫nous avons simplement utilisé la méthode get dessus.
‫Alors récupérez et nous avons besoin de cette URL.
‫Bon alors celui-ci que je vous ai montré avant.
‫Il suffit donc de
‫le copier et de le coller
‫ici dans une chaîne de modèle.
‫Parce que maintenant nous allons remplacer
‫cette race ici.
‫D'accord, donc nous ne
‫voulons pas cela, mais nous voulons
‫plutôt l'utiliser, celui que nous obtenons de notre fichier.
‫Donc, dans ce cas, il s'agit de données.
‫Droit?
‫Et ainsi,
‫nous pouvons réellement faire une requête HTTP get.
‫Maintenant, pour obtenir les données,
‫nous devrons également utiliser la méthode end à ce sujet.
‫Et c'est là que nous allons passer la
‫fonction de rappel.
‫Donc, encore une fois, c'est une erreur
‫d'abord de rappeler, puis
‫nous transmettons également le résultat.
‫Et donc dans cette
‫fonction, enregistrons
‫tout d'abord le résultat dans la console.
‫Les données que nous obtenons sont donc dans la variable de réponse.
‫Alors celui-ci ici.
‫Et puis là-dessus, c'est le corps.
‫C'est donc là que se trouve la réponse réelle.
‫Bon, maintenant allons-y et testons cela.
‫Et maintenant, avec cette sauvegarde ici, il est en fait descendu.
‫Encore une fois,
‫c'est à cause de l'extension précédente que nous avons configurée plus tôt.
‫Et peut-être avez-vous également
‫remarqué comment il a remplacé les guillemets normaux que j'avais
‫ici par
‫ces guillemets doubles et a également inséré le point-virgule ici.
‫Et en fait, dans la dernière
‫section, ou dans l'une
‫des dernières sections, nous l'avons configuré de
‫manière à toujours avoir les guillemets simples.
‫Et donc afin de garder notre code
‫cohérent ici, allons-y
‫et créons très rapidement le plus joli fichier de configuration.
‫Alors n'oubliez pas que c'est jolirc.
‫Ensuite, nous avons une guillemet simple.
‫Réglez-le sur vrai.
‫Et n'oubliez pas la largeur d'impression.
‫Et mettez-le à 80.
‫D'accord, sauvez-le.
‫Enregistrez à nouveau celui-ci.
‫Et donc, vous voyez, nous avons maintenant de retour nos guillemets simples.
‫Donc ça a l'air beaucoup plus joli à mon avis.
‫Encore une fois, si vous ne l'aimez pas de
‫cette façon, vous pouvez bien sûr utiliser vos propres paramètres.
‫D'accord.
‫Quoi qu'il
‫en soit, ce morceau de code
‫ici devrait déjà faire la requête HTTP.
‫Alors
‫testons-le simplement.
‫Et en
‫effet, nous avons en fait cette image ici.
‫Donc en fait,
‫ce que nous voulons, c'est à l'intérieur
‫de ce copain dans la propriété message.
‫Donc point
‫message.
‫Alors juste comme ça.
‫Et donc ici, nous avons notre image de retriever.
‫Allons de l'avant et changeons réellement la race ici.
‫Et je ne suis pas vraiment douée avec les chiens.
‫Utilisons ici cette race que je connais,
‫le Labrador.
‫Je ne sais même pas comment le dire.
‫Mais je pense
‫que c'est ça, ça existe.
‫Faisons encore une sauvegarde ici.
‫Et maintenant nous avons une autre image.
‫Nous pouvons en fait cliquer ici et
‫cela ouvrira cette image pour nous.
‫D'accord.
‫Donc, pour faire cette requête HTTP ici, nous avions besoin
‫des données que nous avions auparavant.
‫Donc cette donnée.
‫Et nous devions donc faire cette demande ici à l'intérieur
‫de cette fonction de rappel de la fonction de
‫lecture de fichier, n'est-ce pas ?
‫Et donc vous avez déjà une fonction de rappel ici.
‫Donc celui-ci à l'intérieur d'un rappel.
‫Mais maintenant, nous allons en ajouter un autre.
‫Parce que maintenant nous voulons enregistrer cette chaîne ici
‫dans un nouveau fichier texte.
‫Et donc nous allons le faire ici.
‫Et puis cela aura encore une autre
‫fonction de rappel.
‫D'accord, ça a du sens ?
‫Donc fs
‫writefile
‫puis le nom du fichier.
‫Appelons cela une image de chien. texte.
‫Ensuite, les données que nous voulons enregistrer dans ce fichier
‫qui est au repos. corps. un message.
‫Et puis la fonction de rappel.
‫Et celui-ci n'aura bien sûr aucune donnée,
‫mais nous avons à nouveau l'erreur.
‫Enregistrons quelque chose sur la console
‫comme une image de chien aléatoire
‫enregistrée dans un fichier.
‫Faites-lui une sauvegarde, il
‫sera ensuite réexécuté et voici notre fichier image.
‫Et en fait, vous pouvez voir que
‫le code VS affiche cette image ici pour nous.
‫Donnez-lui une autre sauvegarde ici,
‫il réexécutera ensuite notre code et
‫maintenant nous avons, en effet, nous
‫avons une image différente.
‫D'accord.
‫Donc, notre code fonctionne réellement.
‫Ajoutons simplement un petit handle d'erreur ici au
‫cas où quelque chose se passe mal.
‫Par exemple, disons que nous ajoutons un nom étrange ici.
‫Exécutez cela à nouveau.
‫Et donc pour le moment, il ne sera pas en mesure de trouver une
‫image pour cela.
‫Et cela entraînera en fait une erreur ici.
‫Donc, nous devrions toujours
‫faire ce genre de gestion des erreurs au début
‫et le
‫dire s'il y avait une
‫erreur, et nous pouvons simplement enregistrer l'erreur. un message.
‫Et en fait il faut aussi dire
‫qu'on veut revenir tout de suite de cette fonction s'il y a une erreur.
‫Donc, il reviendra et se connectera à
‫la console, cette erreur.
‫Et rien d'autre ne se passera alors.
‫D'accord.
‫Donc il dit encore, introuvable ici.
‫Et cela n'a rien enregistré dans
‫le fichier car nous sommes déjà revenus de la fonction ici.
‫D'accord?
‫Et la même chose en fait ici au
‫cas où il y aurait une erreur lors de l'enregistrement du fichier sur le disque.
‫Revenons ici, donnez-lui une autre
‫sauvegarde.
‫Et maintenant, cela fonctionne à nouveau très bien.
‫D'accord.
‫Ce n'est donc
‫qu'un petit exemple
‫pour vous montrer à quel point il est facile de se
‫retrouver avec des rappels à l'intérieur des rappels à l'intérieur des rappels.
‫Et c'est bien sûr parce que, on
‫sait déjà que dans Note
‫JS, il faut toujours utiliser du code asynchrone, non ?
‫Nous avons fini par utiliser des rappels à
‫l'intérieur des rappels à l'intérieur des rappels.
‫Et parfois, cela peut
‫aller encore plus loin bien sûr que ce que nous avons ici.
‫Vous pouvez bien
‫sûr avoir 10 niveaux les uns dans les autres.
‫Maintenant, tous ces rappels
‫rendent notre code un peu désordonné.
‫Cela le rend difficile à comprendre et aussi
‫en général, difficile à maintenir.
‫Encore une fois peut-être pas à ce niveau avec seulement trois rappels
‫les uns dans les autres.
‫Mais si nous l'avions encore plus imbriqué, cela
‫pourrait rapidement devenir un
‫cauchemar de maintenir un code comme celui-ci.
‫Et c'est pourquoi ce modèle
‫a été appelé rappel de l'enfer.
‫Il est
‫facile d'identifier cette forme triangulaire dans notre code.
‫C'est ce que nous avons ici.
‫Comme cette sorte de forme triangulaire.
‫Chaque fois que vous voyez cela, c'est un signe
‫que vous êtes
‫essentiellement en enfer de rappel.
‫D'accord?
‫Et vous verrez
‫ou entendrez peut-être ce terme lorsque vous ferez des recherches
‫sur Note JS ou quelque chose comme ça.
‫Mais pour le moment, c'est en fait la seule
‫façon dont nous connaissons la façon d'écrire du code asynchrone
‫à ce stade.
‫Mais nous allons garder cela dans le reste de
‫cette petite section.
‫Nous allons donc apprendre à utiliser
‫quelque chose appelé Promesses.
‫Et cela résoudra finalement notre
‫problème et rendra
‫notre code plus facile à lire et à maintenir.
‫Allons donc le faire dans le reste de la section.