*NOUVEAU* AJAX - Cours de base complet - Partie 9 : boucle d'événements et Async/attente

2. Qu'est-ce que la boucle d'événement: Êtes-vous prêt ? Je l'espère. C'est une section géniale et un verre génial et quelques conférences géniales parlant d'asynchrone et vous attendent. Et cela ajoute vraiment une fuite moderne à l'API It's déjà moderne. Et je déteste ce mot, mais pour comprendre l' asynchrone et attendre, il faut une compréhension de haut niveau sur ce qu'est la boucle d'événements. Je ne veux pas entrer trop en détail sur la boucle de l'événement que vous devez savoir qu'elle existe. Et cela aidera simplement à solidifier les demandes asynchrones. Ou bien, permettez-moi de commencer par les bases. Nous savons que le navigateur, alias Chrome et JavaScript, par exemple, Node.js, sont à thread unique. Et parce que nous avons affaire à ajax, je suis plus préoccupé en ce moment par le navigateur et j'obtiens cela, tout à l'intérieur d'un navigateur fonctionne sur un thread principal. Tous les navigateurs ont une chose appelée thread principal. Et sur ce fil principal, beaucoup de choses se produisent. C'est là que les parties le font pour le navigateur. C'est ici que votre code JavaScript est exécuté. C'est là que le rendu se produit et c'est de la manière dont le DOM, le modèle d'objet de document, fait une boucle. Qu'est-ce que cela signifie ? Cela signifie que si quelque chose sur le thread principal prend beaucoup de temps à s'exécuter, tout le reste va être bloqué. Je veux que vous visualisiez cette image. Ils sont un fil conducteur. Sur ce fil conducteur, tout se passe comme je l'ai mentionné, c'est là que les parties sont encore là. Ce n'est pas seulement JavaScript qui est exécuté dans le thread principal, mais aussi la mise à jour du DOM lorsqu'un navigateur met à jour les CSA. Tout cela se passe sur ce fil principal. Pour éviter que certaines tâches bloquent tout le reste, le navigateur a eu une très bonne idée de générer plusieurs threads loin du thread principal. Mais bien sûr, une fois que ces souches ont fait quelque chose dont une page doit se soucier, elles doivent revenir au fil de discussion principal pour donner au navigateur cette information et le poids en tant que pied de tube d'événement dans . savez-vous ? Eh bien, c'est la boucle événementielle qui gère et gère tout ce processus. Allez, c'est plutôt cool, non ? C'est le tube pair. Et pour ramener le point à la maison, pourquoi ne pas examiner spécifiquement le code ? Je veux regarder la fonction SetTimeout. Nous l'avons déjà vu plusieurs fois dans ce cours. Mais laissez-moi le décomposer. C'est ainsi que vous l'écrivez. Il faut deux arguments, le rappel et les millisecondes. Mais que signifie la fonction de délai d'attente du saké ? Que fait-il ? Que fait-il ? Deux choses. La première chose est qu'il attend x millisecondes chaque fois que nous définissons. Et une fois que c'est fait, attendre le passage de ces millisecondes va ensuite exécuter la fonction de rappel. Mais maintenant, ne traitons pas cela comme une fonction asynchrone. Voyons maintenant que la fonction SetTimeout s'exécute de manière synchrone. Si nous l'exécutions comme fonction asynchrone, tout comme nous, il s'exécuterait sur le thread principal et cela signifie qu'il tirera tout le reste jusqu'à ce que ce soit fait. Nous ne voulons pas que cela se produise, n'est-ce pas ? C'est très médiocre pour l'expérience utilisateur. Comment résoudre ce problème ? Eh bien, c'est juste Pour éviter cette fonction de délai d'attente d'état n' est pas exécutée sur le thread principal. Souvenez-vous de ces métiers secondaires. Un terme de développement sophistiqué pour cela est qu'il est exécuté en parallèle. Et c'est juste une idée de parler du fil principal sur l'un de ces fils latéraux que si vous arrêtez vraiment d'y penser, cela va poser un autre problème, car quand viendra le temps d'exécuter cette fonction de rappel, rappelez-vous, une fois les millisecondes passées, que se passe-t-il ? Eh bien, cette fonction de rappel doit être exécutée et l'exécution se déroule. C'est juste sur le fil principal. Pouvez-vous voir le problème avec cela qui va automatiquement directement dans le thread principal chaque fois qu'ils appellent cette fonction est prête. Le problème est que vous pourriez exécuter beaucoup de code JavaScript en parallèle. Cela signifie que vous pourriez potentiellement éditer le même DOM en même temps, NG jour complet sur ce que les développeurs ont appelé des problèmes de condition de course. fait, cela signifie que vous ne voulez pas une seule fonction JavaScript manipule à moitié le DOM. Et puis soudain, cette fonction de rappel est jetée dans le thread principal et commence exécuter une autre partie du DOM, ou pire encore, en remplaçant ce que faisait la première fonction d'exécution JavaScript. Comment résoudre ce problème ? Eh bien, le navigateur, encore une fois, est très intelligent pour s'assurer que vous ne rencontrez pas de problèmes avec l'exécution de plusieurs codes JavaScript en problèmes avec l'exécution même temps, des indices de tâches ont été introduits. Je sais ce que vous pensez, vous pensez que le développement client est assez difficile. Maintenant, lorsque nous parlons de boucles d'événements, nous avons des termes comme parallèles les files d' attente des tâches côté thread principal, mais cela ne s'arrête pas. Ne vous inquiétez pas, ne vous inquiétez pas. Je sais que j'y suis allé, mais c'est vraiment logique. Si vous prenez du recul, vous avez le fil conducteur. Peut tout jeter sur le fil principal en même temps qu'ils tombent. Les fonctions, les tâches doivent être mises en file d'attente. C'est donc vraiment logique. N'oubliez pas que le concept des files d'attente de tâches constitue un élément clé du fonctionnement de la boucle d'événements . Et comment ces files d'attente de tâches ont-elles fonctionné ? Eh bien, ce que fait le navigateur, c'est qu'il dit tube du four qu'il a certaines fonctions à vouloir faire quelque chose sur le fil principal. Et votre navigateur va ajouter cette fonction à la file d'attente des tâches lorsque cette fonction sera prête à être exécutée. Fondamentalement, lorsque la fonction est prête, elle est ajoutée à cette tâche. Vous, il attend. Et seulement lorsqu'il y a une lacune dans avantage des gens à remettre sur le fil principal. Cela garantit que les choses sont exécutées de manière ordonnée. C'est logique car, à terme, la boucle d'aération nous permettra d'exécuter ces tâches une fois qu'elle sera prête. Reparlons ensuite de notre fonction de délai d'attente assis car nous savons que la fonction setTimeout est en fait une fonction asynchrone. À quoi ressemble-t-il dans la réalité ? Et bien, encore une fois, nous l'écririons exactement de la même façon. Encore une fois, deux choses se produisent lorsque nous exécutons cette fonction. Mais c'est vraiment ce qui se passe. Premièrement, nous avons un poids x millisecondes, mais c'est en parallèle. Vous savez ce que cela signifie ? Ne pas être exécuté sur le thread principal. Quelle est la deuxième chose que le navigateur fait ici ? Il met la tâche en file d'attente lorsque le rappel est prêt. Une fois que nous avons attendu un certain nombre de millisecondes et que ce rappel est prêt à être exécuté. Le navigateur va modifier la tâche. Bien sûr, la boucle d'événements appelle la fonction de rappel lorsqu'elle est prête. Lorsque la boucle d'événement est prête. Je vais juste vous souffler un peu plus. C'est de plus en plus avancé, ou peut-être aurait-il pu s'arrêter ici. Mais vous devez savoir qu'il s' agit de différentes catégories de tâches. Nous avons des microtâches et des microtâches. Je suppose qu'une bonne façon d'y penser est que vous avez des tâches importantes et pas si importantes. Que signifie la tâche macro ? Nous allons effectuer des tâches dans la file d'attente des tâches de macro, comme la fonction de délai d'attente assis. Ensuite, vous devez attendre la prochaine ronde de la boucle d' événement avant d'être exécutée. Une autre façon de dire que les tâches et la macro Q traitent un élément à la fois. Toutefois, les tâches de la file d'attente des micro-tâches seront exécutées pendant la ronde actuelle de l'événement. Une autre nuance est que les tâches de micro file d'attente sont toutes terminées, y compris tous les éléments, toutes les fonctions et le code supplémentaire que vous ajoutez à la file d'attente en temps réel. Et en raison de la grande importance des microtâches, cela signifie que la boucle d'événements va bloquer rendu pendant qu'elle exécute des microtâches. Client, d'accord, client, je comprends, je comprends, mais où l' ajax rentre dans tout ça ? Eh bien, nous savons que l'ajax s'occupe des promesses. Des promesses très, très importantes quand il s' agit de navigateurs. Cela signifie que lorsque le code est éventuellement modifié dans le thread principal à exécuter. Permettez-moi de dire cela. Lorsque le navigateur ajoute ces fonctions de rappel à la file d'attente des tâches, il traite ces fonctions comme des micro-tâches. Je sais, je sais. Vous soufflez probablement l'esprit. Ne vous inquiétez pas. Vous n' avez pas vraiment besoin de savoir tout cela pour comprendre l'ajax. Mais c'est des concepts très, très intéressants et avancés. C'est amusant. Et je veux que tu sois grand maître. Dans les prochaines conférences, je veux que nous montions maintenant à la console et je veux commencer à regarder comment fonctionne la veine à boucler. Je voulais écrire du code avec vous et parler de mes idées sur ce qui se passe en arrière-plan va vraiment conduire le point à la maison. Et puis, bien sûr, nous allons sauter dans ce qui est asynchrone et quel poids vraiment. J'ai hâte. 3. Tâches macro vs tâches micro: Bienvenue, bienvenue, bienvenue. Je suis super excité. J'espère que vous dansez. J'espère que vous vous amuserez beaucoup. J'espère que vous apprendrez un moment. Et merci beaucoup de rester avec moi. Nous avons vraiment parcouru un long chemin. Et bien sûr, nous abordons maintenant les sujets des fermes vidéo. Nous avons discuté de la boucle de l'événement, mais quoi de mieux que de vous montrer ? Je ne sais rien, c'est pourquoi je vais vous montrer la boucle de l'événement en action. Cela va être très intéressant. Strictement parlant, je n' ai pas besoin de vous montrer cela, mais je veux que vous deveniez un grand maître encodage. Je ne veux pas seulement que vous compreniez les bases de l'Ajax. Je veux que vous compreniez ce qui se passe en coulisses. Bien sûr, nous allons discuter de l'asynchrone et attendre. Mais pour comprendre l'asynchrone qui vous attend, je veux juste mettre un peu plus de connaissances sur la boucle d'événement. Rappelez-vous que l'une des choses importantes la boucle d'événement est le concept de files d'attente de tâches. Fonctions, méthodes, tâches à faire ou modifier dans une file d'attente de tâches. Et bien sûr, vous obtenez différents types de tâches. Nous obtenons des tâches macro et nous obtenons des microtâches. Mais Clyde, nous savons déjà tout cela. Je sais que vous le savez. Alors pourquoi ne pas simplement jouer dans un éditeur de texte ? Pourquoi avons-nous eu un peu de plaisir ? On y va. J'ai un éditeur de code Visual Studio vide ouvert. J'ai un fichier appelé test.js. C'est ça. Maintenant, je pouvais juste ouvrir le terminal, nous pouvions tout consoler consigner à l'écran. Nous pourrions exécuter notre JavaScript dans le navigateur. Il existe de nombreuses façons de faire quelque chose dans la programmation. Je vais vous en montrer un autre. Je veux maintenant implémenter le mode de débogage dans le code Visual Studio. Je vais donc simplement cliquer sur cet onglet. Et je vais cliquer dessus, créer un fichier JSON de lancement. Et utilisons Node.js pour goûter. Bien sûr, le code Visual Studio crée automatiquement ce fichier JSON d'arrêt de lancement. Je ne veux pas que vous insistez sur tout ça. Vous n'avez pas besoin de savoir comment tout fonctionne. Ou je veux accéder à cette console de débogage qui est très, très utile. Que dois-je faire ? Eh bien, nous allons juste enregistrer quelque chose sur l'écran pour commencer. Et je ne sais pas, il suffit de consoler une console. Comment ça va ? Mais qu'est-ce qui est bien chez nous ? Déboguez l'environnement car vous pouvez insérer des points d'arrêt dans votre code, vous pouvez entrer dans votre code. Très utile. Mais de toute façon, je vais juste exécuter ce code. Et dans notre console de débogage, nous voyons les résultats. C'est la console 1. fait, c'est un animal arrosé, mon animal de poussée préféré. On y va. Que dois-je vous montrer ? Laissez-moi vous poser cette question. Au lieu de la refroidir, je ne sais pas, il suffit de la refroidir. Je ne connaissais pas synchrone car nous savons que le journal de la console de fonctions fonctionne de manière asynchrone. Si nous en avons deux comme ça, non ? Que pensez-vous qu'il se passera ? Selon vous, quel sera le résultat dans notre console de débogage ? Écrivons, nous savons que le jauge JavaScript et Node fit est monothread. Nous savons que la première ligne s'exécutera synchrone. Un de la parcelle passera à la ligne suivante et net s'exécutera. Très bien, alors lançons ça. Nous avons obtenu exactement ce que nous attendions. On pense qu'il devient un peu plus funky. Ajoutons une tâche macro. Restez une tâche macro. Par exemple, la méthode setTimeout, tâches macro que nous connaissons ou modifions, lancent, file d'attente et exécuté le brun mixte de la vinculin. C'est ce qu'est une tâche macro. Et nous connaissons la méthode SetTimeout, qui est asynchrone. Il s'agit d'une tâche macro. Je vais juste utiliser des raccourcis. C'est donc très facile à lire. Et tout ce que je veux faire, c'est que je veux consoler le journal. Je ne sais pas, disons des délais d'attente. Et nous pouvons avoir une photo d'une girafe. Et nous savons que le deuxième argument de la sixième fonction de temporisation est le nombre de millisecondes que nous voulons attendre. Eh bien, dans ce cas, disons Sarah en millisecondes. Exemple très simple. Maintenant, je veux que vous pensiez à quel sera le résultat de notre console. Que va-t-il se passer si nous exécutons ce code ? Allons-le. C'est à peu près ce que je suis sûr que vous attendiez. La première console, elle fonctionne sur le thread principal. Maintenant, nous arrivons à la méthode du temps d'attente assis qui est ajoutée à la tâche macro mignonne, alias qu'elle est exécutée sur le thread principal. Bien sûr que cela signifie, même si nous voulons consoler immédiatement consigner les résultats de ce délai d'attente, il est toujours hors du thread principal. Et alors qu'il réside temporairement hors du thread principal, nous obtenons ce journal de la console, qui est à nouveau exécuté sur le thread principal, c'est pourquoi le journal de la console se produit en premier, journal de la console synchrone pour arriver deuxième. Et puis enfin, presque instantanément, disons méthode timeout, remettons le thread principal et ensuite il est exécuté. Intéressant. Mais maintenant, pourquoi ne pas tenir compte des promesses ? N'oubliez pas que l'ajax est une question de promesses. Et nous savons que la promesse n' est pas une tâche macro. Une promesse est d'un watt. C'est vrai. C'est une microtâche. Et nous savons qu'ils sont modifiés à la micro-tâche et qu'ils sont exécutés auparavant. Il s'agit de la principale différence entre les tâches microtâches et les tâches macro exécutées avant le début de la prochaine. Pourquoi n'avons-nous pas utilisé l'objet Promise et exécutons sa méthode de résolution ? Bien sûr, dans la vraie vie, vous auriez beaucoup de code, puis exécutez la méthode de résolution. Alors, bien sûr, exécutons notre rappel au sein d'un doyen. Nous n'avons pas besoin d'arguments, donc nous pouvons simplement consoler un enregistrement à l'écran. Dans ce cas, pourquoi ne pas prendre notre girafe ? Au lieu d'appeler un délai d'attente, nous pouvons appeler cela une promesse. Que pensez-vous qu'il va se passer maintenant ? Cela devient un peu plus délicat. Vous devez y réfléchir. Quel ordre attendez-vous à voir des choses ? Je m'attendrais à voir un synchrone, ce console.log le premier en ligne un. Cela se produirait instantanément. Ce qui est intéressant, c'est que le SetTimeout que nous connaissons va être modifié dans le lancer de macro Q. La pulsation va aller à la promesse. Et quand elle atteindra cette promesse, une promesse elle-même sera sur le fil conducteur. Mais lorsque les impulsions voient la méthode lean qui sera exécutée à partir du thread principal. En fait, il va être ajouté à la micro-tâche mignonne. Le possible frappe ensuite le fichier console.log perdu. La ligne synchrone s' afficherait car elle va être exécutée immédiatement. Je m'attendrais donc à ce qu'un synchrone, synchrone, apparaisse en premier, parce que la déclaration de promesse est sur le micro lancer Q pour s'attendre à ce que la dette nous soit remise en premier, la promesse de girafe, puis enfin, le délai d'attente de la girafe. Voyons si j'ai raison. Appuyez sur le bouton Exécuter et voyons ce qui se passe. Exactement ce que nous attendions. Super, super intéressant. Pouvez-vous voir à quel point c'est amusant ? Pouvez-vous voir à quel point tout cela devient intuitif ? OK ? C'est juste un échauffement. Je veux qu'on fasse une pause ici. Au cours de la prochaine conférence, je veux que nous devions plus avancés, et non pas que nous le réduisons à cela. Je veux commencer à créer nos propres promesses. Je sais que c'est excitant. Je veux utiliser une boucle while pour que nous puissions voir comment elle bloque l'exécution ou la blessure d'autres fonctions. Et ça va être super fascinant. C'était juste un échauffement. Je vous verrai lors de la prochaine conférence. 4. Créer notre propre promesse: Bienvenue de retour. J'espère que vous vous amuserez beaucoup. Et comme je l'ai mentionné, cela devient plus compliqué, alors supprimons tout. Oh, mec, je déteste supprimer toutes mes belles œuvres. Quoi qu'il en soit, continuons. Ce que je veux faire, c'est que je veux implémenter horodatages dans tout notre code. Maintenant, juste pour vous montrer comment faire quelque chose de nouveau. Pour ce faire, je veux commencer par obtenir l'heure avant d'exécuter le code. C'est très facile à faire en JavaScript. Vous pouvez simplement dépasser l'objet date de JavaScript et exécuter l'objet nominé. Très simple. Ensuite, je voulais créer une fonction permettant console de consigner quelque chose à l'écran. Je ne veux pas écrire tout le temps. Journal de la console. Implémentez cela dans une fonction. Alors pourquoi ne pas créer une fonction et l'appeler sortie faute d' un meilleur mot, car c'est ce qu'est une sortie. Il va falloir se disputer. Disons simplement que, faute de meilleur mot, c'est peut-être ce que nous y passons. Et que voulons-nous se passer ? Eh bien, comme je l'ai mentionné, je veux implémenter une fonction de journal de console. Simple. Que dois-je disposer d'un journal de console ? Mettons cela dans des littéraux de gabarit pour consoler le journal. Tout d'abord, peu importe ce que nous passons à la fonction de sortie, je veux réellement consoler le journal qui se prend lui-même. La prochaine chose que je veux faire, c'est de mettre en œuvre une nouvelle ligne. Ensuite, je veux montrer combien de temps il a fallu pour exécuter cette fonction. Je veux que le temps s'écoule. En d'autres termes, cela va être quoi ? Soit dit en passant, le signe dollar entre crochets à l'intérieur joules de température signifie simplement que nous pouvons référencer des variables et écrire du JavaScript. C'est très utile. Ce que nous pouvons faire, c'est que nous pouvons obtenir l'heure immédiatement après l'exécution du code, c' est-à-dire le point de date. Maintenant, nous l'avons revendu. Nous pouvons déduire cela de notre variable buccale que nous avons définie au début. Tu sais quoi, peut-être qu'il vaut mieux ne pas appeler ça maintenant. Je devrais peut-être appeler ça commence parce que c'est notre heure de début, juste pour ne pas vous confondre. J'espère que c'est logique. Laissez-moi juste zoomer légèrement pour que vous puissiez tout voir en une seule ligne. Nous trouvons simplement la différence entre le moment présent et le moment où nous avons commencé à exécuter la fonction. Très simple. Permettez-moi de zoomer légèrement. Ce que je veux faire ensuite. Je voulais définir une fonction de blocage. Ce sera une fonction très simple. Eh bien, je veux faire, c'est que je veux créer une boucle. Définissons donc une variable i commençant par 0. Et puis je vais utiliser la fonction Javascript while. Cela s'exécutera tout le temps, condition que ce qui est fourni dans cette parenthèse soit vrai. Nous allons dire qu' il va s'exécuter alors que je n'en suis pas moins que, je ne sais pas, juste un très grand nombre. Et puis à chaque itération ou je veux faire est augmenter la ligne. Vous pouvez voir que nous ne faisons pas grand-chose. Oee. Et quand tout est terminé, lorsque cette boucle While est terminée, le code passera ensuite à la ligne suivante. Et ensuite, nous pourrons simplement retourner quelque chose. Que dois-je retourner ? Nous pouvons simplement renvoyer du texte. On peut dire qu'on a fait assez pour mettre un joli hibou. Oui. j'ai un hibou dans mon jardin, et je veux construire une boîte à chouettes. Tellement excité. Quoi qu'il en soit, je pense que c'est plutôt cool. Tout est terminé. On y va. C'est notre code de blocage. Et maintenant que nous l'avons fait, tout ce que je vais faire maintenant, c'est exécuter ces fonctions et je veux vous demander ce qui va se passer. Tout d'abord, voyons cela. Notre fonction de sortie que nous avons définie ci-dessus. N'oubliez pas que nous allons faire une pause dans un certain goût. Quels conseils voulons-nous y transmettre ? Eh bien, nous pouvons le passer sur la glace, parler, et ensuite nous pouvons regarder un asynchrone, ce que nous avons fait avant, synchrone, que dois-je faire ensuite ? Eh bien, je veux réexécuter notre fonction de sortie, mais cette fois en argument. Rappelez-vous que nous lui donnons un argument x. Je ne veux pas passer de texte simple. Eh bien, en fait, je le sais. Mais je veux passer dans notre fonction qui reviendra en fin de compte. Je vais dire tout ça. Pour ce faire, nous pouvons passer la fonction, nous pouvons exécuter cette fonction de blocage. Enfin, vous l'avez deviné. Je veux faire un autre journal de console synchrone, mais cette fois-ci bien sûr. Très bien. Permettez-moi de vous poser cette question. Selon vous, quel sera le résultat de ce code ? Ce qui va nous être présenté en premier. Eh bien, je m'attendrais à ce qu'un synchrone apparaisse en premier, c'est vrai. N'a rien. Eh bien, nous avons ce code bloquant et il n'y a rien d' asynchrone là-dessus. Bien que la boucle en JavaScript soit très simple, elle s'exécute sur le thread principal. Ainsi, lorsque l'analyseur, lorsque l'agent accède à cette fonction sauvage sur le thread principal, il restera sur le thread principal. Et tout le reste va devoir attendre. ennuyeux. Je sais que c'est une mauvaise expérience utilisateur. Enfin, lorsque cette boucle est terminée, nous arrivons à l'outil synchrone de sortie final. Voyons si j'ai raison, ça lance des coureurs. Et regardez ça. Un temps synchrone s'est écoulé à 0 millisecondes. C'est à quel point c'était rapide. Nous passons à cette boucle mixte, Vous savez ce que c'est 80 millisecondes mais, mais de l'eau courte et ajoutez quelques zéros supplémentaires. Allons-le encore une fois. Juste pour le rendre un peu plus long. On obtient un synchrone, puis il s' écoule et on arrive enfin au synchrone. Deux très intéressants, très intéressants. Je sais, je sais. C'est pourquoi je voulais vous montrer. Mais maintenant, je veux vous poser une autre question. Comment empêcher ce code de blocage ? Comment pouvons-nous l'arrêter ? Comment pouvons-nous transformer cela en un morceau de code asynchrone ? Que pensez-vous ? N'oubliez pas que ce que nous voulons faire, c'est que je veux créer un fil de discussion séparé. Je veux sortir de ce thread principal pendant que la boucle est en cours d'exécution. Et bien sûr, nous avons filé pendant que la boucle est terminée. Je veux ajouter cette déclaration de retour à la microtâche. mignon, c'est ce que je veux. Comment pouvons-nous le faire ? Vous pourriez penser, oui, que nous pouvons créer une promesse. Vous avez peut-être raison, selon la façon dont vous pensez réaliser cette promesse. Permettez-moi de vous montrer ce qui ne fonctionnera pas. Alors, commentons simplement cela. Maintenant, nous devrions appeler cela le déblocage. Faute de meilleur mot. Comment pourrions-nous faire cela ? Eh bien, vous pourriez penser, revenons simplement de nouvelles promesses. Il exécute l'objet promesse de JavaScript. Nous savons qu'il va nous rendre un objet de résolution et un objet de rejet. Nous le savons lors de conférences précédentes. Nous pouvons exécuter notre rappel à l' intérieur de ces crochets bouclés. Vous pourriez penser que nous pouvons mettre en œuvre notre boucle While ici. Il est égal à 0. Mettre en œuvre pendant. Combien de zéros faisons-nous cela ? Il suffit de le copier. Bien que je sois moins que ce grand nombre. Eh bien, nous voulons le faire, c'est augmenter d'un. Quand c'est fini. Nous ne voulons rien rendre. Ce que nous voulons faire, c'est que nous voulons appeler la méthode de résultat et la méthode de résolution. Bien sûr, nous pouvons simplement garder ce dicton. OK. Vous êtes avec moi ? Désolé, faux. Nous avons donc essayé de supprimer cela. Nous avons essayé de convertir le code de blocage en déblocage en implémentant une promesse. Vous savez ce qu'ils veulent dire ? Débarrassez-vous encore du capital, mon OCD, pas d'une fonction constructeur. Laissez-moi donc faire un U minuscule. Vous pourriez penser que nous avons mis en œuvre notre promesse. Cette promesse se produit hors du fil principal, et donc tout se passe comme on s'attendrait à ce qu'il se débloque. Maintenant, vous pourriez penser qu'un synchrone apparaîtra en premier. Ensuite, comme le code de déblocage est hors du thread principal, nous devrions voir deux synchrone. Et enfin, quand c'est fait, nous devrions voir le résultat. Tout est terminé. Que cela ne se produira pas, n'est-ce pas ? Si je réfléchis correctement, lançons ce programme. Voyons ce qui s'est passé. On y va. Vous avez donc vu qu'en fait, même si nous essayons d'exécuter une promesse, cela bloque toujours l'exécution de notre prochaine sortie synchrone. C'est pourquoi nous n' arrivons à deux synchrone qu'en 143 millisecondes. C'est tellement bizarre, Clyde, je suis tellement confus, j'ai pensé que parce qu'on enroule ça dans une promesse, ça veut dire que nous allons exécuter tout ce code à partir du fil principal. Cela peut devenir très déroutant. Mais maintenant, il y a quelque chose de très avancé que je voulais partager avec vous. Êtes-vous prêt pour cela ? Il va donc vous faire sauter l'esprit. Il ne reste que la création réelle de la promesse elle-même et l'exécution de la boucle while, qui se produit dans la création de cette promesse qui se passe toujours sur le fil principal. Voici le truc. promesses elles-mêmes ne sont que des outils de surveillance. Ils ne sont pas en réalité asynchrones eux-mêmes. Le poids est asynchrone, s'intègre quand il s'agit de promesses. Il s'intègre. Lorsque nous exécutons les instructions veineuses. Lorsque le moteur voit une déclaration Dane, il supprime ce qui se trouve à l'intérieur l'énoncé du thème de la tâche principale du thread principal. Et ce n'est que lorsque le résultat net est prêt qu'il est ajouté à la micro-tâche. En d'autres termes, c'est seulement la résolution de la promesse dans une déclaration veineuse qui se produit hors du fil principal en tant que microtâche. Très, très fascinant. C'est pourquoi la première ligne de journal de console synchrone est exécutée immédiatement. Que ce deuxième journal synchrone ne soit exécuté qu'à partir de la boucle while est fait car la création de cette promesse bloque toujours le thread principal. Je suis désolée, je ne voulais pas continuer à me répéter, mais c'est un concept tellement important que vous comprenez et il va vous aider. Laissez-moi vous poser cette question. Comment ne sommes-nous pas censés jouer un jeu de mots. Comment résoudre ce problème ? Comment pouvons-nous nous assurer que la boucle pendant que la boucle se passe hors du thread principal ? Bien sûr, nous voulons exécuter la méthode de résolution et ensuite tout mettre dans l'instruction 18. Nous n'avons même pas besoin de cette propriété de rejet car nous ne l'utilisons jamais. En fait, je peux supprimer tout ça. Nous pouvons immédiatement exécuter la méthode de résolution sur cette promesse. Nous savons que si elle est exécutée, le moteur va chercher la déclaration veineuse. Et c'est ici que notre code peut se trouver. Ils peuvent en fait mettre un TIA. Nous n'avons pas besoin d'arguments. Cela devrait fonctionner. Je pense que nous avons assez de crochets, ils devraient fonctionner. Maintenant, la boucle while se trouve dans une déclaration danoise. Nous devrions nous attendre à ce que cela se produise maintenant hors du fil conducteur. Il exécute maintenant ce code appelé type area promise resolve n'est pas un constructeur. Bien sûr, pas seulement le nouveau mot clé. Très pratique d'avoir des messages d'erreur là-bas. Très bien, allons-y maintenant. Et on y va. C'est une main gênante. Voyons ici que nous obtenons une autre erreur de référence. La résolution n'est pas définie. Bien sûr, j'appelle la méthode de résolution ici. En fait, je veux juste rendre ça parce que nous sommes dans la veine, ils vont citer. Bien sûr, je n'ai même pas besoin de crochets. C'est juste inutile. Essayons encore une fois. Désolé, troisième fois, chanceux, allons-y. C'est un avis que nous ne recevons pas notre ancienne déclaration. Pourquoi ? C'est ça ? Encore une fois intéressant, rappelez-vous simplement ce que nous faisons ici. Nous avons créé une promesse et cette promesse retourne quelque chose. À la fin de la journée, il va renvoyer une chaîne disant que tout est fait. Le problème que nous rencontrons, c'est nous n'accédons jamais à ce retour. Vous vous souvenez de ce qu'une promesse attend ? Il s'attend à ce que nous obtenions le résultat. Et ensuite, nous pourrons quitter ce qui donne lieu à une déclaration de doyen. Donc, il faut vraiment dire que je bloque la fonction. Et puis, quand nous avons eu cette fille, nous sommes allés exécuter une sorte de fonction. La fonction que nous voulons exécuter ici est cette fonction de sortie. Nous pouvons simplement exécuter cette fonction de sortie. Cela devrait fonctionner. C'est une façon rapide et sale, mais ça devrait fonctionner. Sortie. Voyons si cela fonctionne. Lançons maintenant notre code. Nous l'avons fait, nous l'avons fait faussement, chanceux. Désolé, mais nous en sommes arrivés à la fin. Rappelez-vous simplement ce que nous avons fait. J'essaie de vous montrer qu'une promesse, la création réelle d' une promesse se fait sur le fil principal. Ce n'est que lorsque nous commençons à frapper ces instructions de liens, est-à-dire lorsque la méthode resolve est appelée. Est-ce qu'on sort ensuite du fil principal ? Et c'est là que se produit la magie asynchrone. Je voulais juste que cela soit clair. C'est pourquoi nous obtenons ici un synchrone qui nous est remis en premier, nous obtenons deux vecteurs synchrones ensuite. Ensuite, nous obtenons enfin cette déclaration de retour de tout ce qui est fait. Au fait, vous pensez peut-être, pourquoi ai-je juste mis les sorties du nom de la fonction ? Je n'ai pas besoin de passer une variable x c'est à peu près cela en coulisses. J'aurais pu être, si l' argument était bon, nous aurions pu prendre les données. Dans ce cas, ce sera juste la fille textuelle faite. Et ensuite, nous pouvons l'écrire après la façon habituelle que nous avions l' habitude de faire dans ce cours. Et puis, bien sûr, exécutez cette fonction de sortie et nous transmettons ces données. Nous aurions donc pu écrire un Titus. Je viens de faire un raccourci. Si nous lançons à nouveau ce programme, cela devrait nous donner exactement la même chose qu'il le fait. Je sais, je sais que c' est assez avancé, bien fait pour m'en tenir avec moi. Et vous n'avez pas strictement besoin de le savoir pour travailler avec l' asynchrone et attendre. En fait, vous n'avez même pas besoin de savoir cela lorsque vous travaillez avec Ajax. Mais je veux que tu sois meilleur que la course. J'espère que vous vous êtes beaucoup amusé et j'espère que ce n'est que ******** un peu plus clair sur le fonctionnement de Vancouver et le fonctionnement du code asynchrone. En réalité, ils ne sont pas deux menaces principales ne fonctionnent pas de cette façon quand il s'agit de JavaScript. Mais à x laque le fait. Si je pouvais enlever les choses la tâche principale, tu les remettrais. Il est très intéressant de noter qu' assez de la boucle de l'événement maintenant, je pense que vous en avez assez de connaissances de haut niveau à ce sujet. La prochaine conférence, j'ai vraiment envie de commencer à parler d'asynchrone et d'attendre. Nous voulons améliorer notre faculté de Fetch API. J'ai hâte de vous voir lors de la prochaine conférence. 5. Introduction à l'async / Attente: Enfin, nous abordons le sujet de l'asynchrone et nous attendons. Qu'est-ce que c'est exactement ? Tout d'abord, nous pouvons ajouter asynchrone et attendre. Ce ne sont que des mots-clés qui nous sont fournis par JavaScript pour réduire nos déclarations. Rappelez-vous quand nous avons affaire à des appels de poisson, à des promesses. Et chaque fois qu'une promesse résout, la première déclaration sera exécutée à l'intérieur de cette déclaration. Vous devez retourner la promesse, puis chercher la prochaine déclaration du doyen. Ainsi, en réalité, comme nous l'avons vu, vous pouvez avoir plusieurs chaînes de palettes. Cela peut devenir assez déroutant. Croyez-moi, surtout si vous avez un code très complexe et que vous avez fait beaucoup de promesses en cours de résolution. Une solution de contournement consiste à utiliser l'asynchrone et attente, ce qui nous permet d'écrire du code de manière synchrone. Même si toutes ces promesses se déroulent en arrière-plan. Ne vous inquiétez pas si vous ne savez pas ce que je veux dire, je vais vous montrer sous peu. Le point que j'essaie de faire valoir est que l'utilisation de l' async et de l'attente fonctionne très bien avec Ajax car vous utilisez async et attendez lorsque vous travaillez avec des promesses. Et bien sûr, nous savons que Fitch utilise ses promesses avant d'en parler. N'oubliez pas encore les deux mots-clés, asynchrones et poids. Je veux parler d'asynchrone, pas de synchronisation, pas d'un lavabo. J'adore les blagues de mon père. Je veux parler de l'asynchrone et mettre le mot async avant la fonction. Cela signifie une chose simple. Ne vous perdez pas dans tous les détails. C'est juste une chose. Qu'est-ce que c'est, que nous apprend-il ? Que fait-il ? C'est dire à la fonction de nous rendre une promesse. C' est bizarre, mais il n'y a rien de mieux que de vous montrer avec un exemple en direct. Passons maintenant à l'éditeur de texte. 6. L'asynchrone retourne une promesse: Si vous connaissez l'exploration, c'est créer un nouveau fichier. Appelons-le simplement faute d' un meilleur mot, messages ab.js. Parce que je vais créer une fonction appelée message. C'est pourquoi créons une fonction appelée message. Pour ce faire en JavaScript, nous utilisons simplement le mot-clé fonction. On peut appeler ça comme on veut. J'ai appelé message. Ensuite, dans ces crochets bouclés, nous définissons ce que nous voulons arriver. Oui, je veux juste retourner le mot Bonjour. C'est tout ce que je veux arriver. Oui, je pourrais l'exécuter dans le navigateur. Ensuite, nous pouvons voir les résultats. Pourquoi ne pas utiliser simplement de la coca ? Ithaca nous permet d'exécuter JavaScript en temps réel dans cet éditeur de texte, c'est très, très utile. Au fait, c'est gratuit, ma voix aimait Mahila. Très bien, ce que je veux faire, consolons consigner cette fonction. Oui, nous nous attendons à ce que le résultat soit bonjour, c'est ce que vous voyez à l'écran. Cela a un sens intuitif. Mais rappelez-vous ce que j'ai dit au cours de la conférence. L'asynchrone peut être utilisé avant n'importe quelle fonction. C'est plutôt cool. Qu'avons-nous donc modifié devant notre fonction ? Tu te souviens de ce que j'ai dit L'utilisation de l' asynchrone signifie une chose. Au lieu de la fonction, vous renverrez une promesse. Essayons donc ça. Mettons l'asynchrone devant notre fonction. Maintenant, lorsque nous exécutons cette fonction, nous ne recevons pas ce texte Bonjour, nous avons une promesse. N'est-ce pas intéressant ? C'est tout ce qu'il fait. Ce mot clé asynchrone renvoie une promesse, mais Clyde, ne pouvons-nous pas simplement renvoyer explicitement une promesse ? Nous pouvons, au lieu de retourner Bonjour, ne pouvons-nous pas simplement retourner un prix ? Que font-ils ? Cela nous donne exactement la même chose qui nous donne une promesse, bien sûr cette fois-ci qui ne va pas se résoudre au mot Bonjour. Nous ne l'avons pas dans leur animal. Ce que nous pourrions donc faire, c'est que nous pourrions exécuter la méthode des résultats. Et ici, nous pouvons taper le mot bonjour. C'est exactement la même chose que nous le faisons en mettant asynchrone, puis nous pouvons nous débarrasser de l'asynchrone. On va avoir exactement la même chose. Donc, au lieu d'écrire ce long long mensonge nom, nous pouvons mettre le mot async. Et bien sûr, nous n'avons pas besoin de résultats prometteurs. Nous pouvons simplement retourner ce que nous voulons restituer de la promesse. Est-ce logique ? Vous êtes avec moi ? Désolé, tombez. C'est tout ce que fait le mot asynchrone. L'asynchrone garantit que la fonction renvoie une promesse. Assez simple, cela ne fait pas que cela. Il y a un autre mot clé que je laisse de côté. Et c'est une attente. Wait fonctionne uniquement dans les fonctions avec le mot-clé asynchrone. Un tonnerre dehors, il pleut, il pleut. Mais nous en avions besoin. Nous n'avons pas eu de pluie depuis quelques jours. Quoi qu'il en soit, là où c'était. Oui. Nous n'avons discuté que de l'asynchrone qui renvoie une promesse. Mais lors de la prochaine conférence, je veux commencer à vous montrer le mot clé d'attente. J'ai hâte de vous montrer. 7. Introduction au mot-clé d'attente: Hall, toutes les bonnes choses arrivent à leur fin et un peu tristes parce que je sais que nous approchons de la fin de ce cours. Mais ne vous inquiétez pas, nous n'avons pas encore fini . Nous n'avons pas encore fini. Et je suis toujours en train de proposer de nouveaux cours. J'espère donc que nous n'avons pas été des chemins ici pour toujours. Mais de toute façon, nous parlons d'asynchrone et nous attendons. Nous avons examiné ce que fait le mot-clé asynchrone. Vous souvenez-vous ? C'est vrai. L'asynchrone garantit que la fonction renvoie une promesse. Nous pourrions le faire manuellement, mais c'est tout simplement encombrant. L'asynchrone est donc un bon moyen pratique pour nous de dire à la fonction de nous renvoyer une promesse. Nous le savons. Mais maintenant, je veux parler de l'attente. La première chose est que cela ne fonctionne qu'à l'intérieur des fonctions asynchrones si vous essayez d'utiliser le mot wait dans une fonction aléatoire dans un code, cela ne fonctionnera tout simplement pas. Vous devez l'utiliser dans une promesse, dans une fonction avec le mot-clé async. Attendez, je suppose que le mot lui-même le donne. Il fait attendre JavaScript jusqu'à ce que leur promesse soit réglée et retourne son résultat. Très, très intuitif. Mais prenez du recul. Ne vous perdez pas dans tous les détails. Le but de l'asynchrone et de l' attente est de simplifier la syntaxe nécessaire pour consommer des API basées sur des promesses. Vous n'avez pas besoin d'utiliser async wait lorsque vous passez un appel Fitch ajax, vous pouvez simplement faire des quiz futurs simples avec toutes ces instructions et capturer toutes les zones du bloc de capture. C'est très bien. Cependant, il peut parfois devenir désordonné, parfois cela devient déroutant. Et dans les cas où votre code commence à devenir un peu désordonné , vous souhaitez souvent recourir à l'asynchrone et attendre. C'est tout simplement beaucoup plus facile à lire. C'est beaucoup plus facile à suivre. La façon dont je pense, c'est que je prends une fonction asynchrone. Dans cette fonction asynchrone, vous pouvez penser qu'elle est divisée par 0 ou plus d'expressions de poids. Et votre code dans cette fonction jusqu'à la première expression d'attente est exécuté de manière synchrone. Nous savons que l'exécution synchrone se produit automatiquement par défaut en JavaScript. Et ce n'est que si et quand il y a une expression d'attente à l'intérieur de leur fonction. Le navigateur sait-il exécuter ce code de manière asynchrone, alias hors du thread principal. C'est très, très intéressant, très intuitif. Mais assez de discours, assez de théorie. Passons à la prochaine conférence. Arrêtons-nous ici. Et je vais vous montrer un exemple d' utilisation asynchrone et d'attente. J'ai hâte de le voir, vous savez. 8. Exemple d'utilisation de l'async / Attente: Les actions parlent plus fort que les mots, c'est pourquoi, vous savez, j'adore mes exemples. Nous allons maintenant utiliser async et attendre, et je vais vous montrer comment cela fonctionne. C'est très, très intéressant. Je voulais trouver une fonction appelée message. Ensuite, je veux exécuter beaucoup de choses ici. Nous remarquons que ce que je veux faire, c'est que je veux finalement obtenir le résultat de Hello World. Essayez finalement d'obtenir ce résultat juste du texte qui nous a été donné par la console, mais je veux le faire en utilisant deux fonctions asynchrones. Séparons chaque mot. Commençons par aborder le premier mot, mettre dans une variable appelée premier mot. Et je veux maintenant utiliser des promesses. Normalement, nous ne pouvons pas le faire, créer une promesse et, bien sûr, nous savons que cela nous donne de la résolution et du rejet. Nous n' utilisons pas vraiment la propriété de rejet qui, de toute façon, elle est là. Si nous le voulions, nous pouvons maintenant utiliser la méthode setTimeout uniquement pour simuler un appel d'API. Créons simplement du temps, un écart temporel. Bien sûr, ici, je veux résoudre le mot bonjour parce que c'est le premier mot que nous voulons, et je veux que cela prenne une seconde. Nous ne pouvons pas faire ça. Parce que pourquoi ? C'est vrai ? Parce que nous mettons en œuvre une promesse. Les résultats ne seront pas disponibles dans cette variable en premier mot. Cela ne fonctionnera donc pas. Pour que cela fonctionne. Nous voulons transformer toute cette fonction en fonction asynchrone. Pour ce faire, nous utilisons le mot-clé asynchrone à l'avant. Nous savons maintenant que cette fonction va nous rendre une promesse. Mais encore une fois, la quatrième ligne ne fonctionnera toujours pas. Nous allons avoir une erreur. Vous ne me croyez pas. Laissez-moi vous montrer. Laissez-moi vous montrer. À la fin, nous voulons consoler le journal. Je ne sais pas, utilisons des littéraux temporaires. On peut dire que c'est fait. Et bien sûr, nous avons ici le premier mot. Cela ne va pas marcher. Il exécute maintenant notre fonction appelée message. Nous n'obtenons pas les résultats attendus. En fait, passons au navigateur. On y va. Collons notre code qui a exécuté la fonction message. On y va. Nous sommes indéfinis. Nous obtenons des erreurs ici. C'est un problème. Nous ne voulons pas cela, nous voulons juste le message simple, bonjour. ne va pas fonctionner car ce premier mot, variable de propriété, n'est pas encore disponible pour attendre que la promesse soit résolue et qu'il soit entré dans cette variable de premier mot. Nous utilisons le mot-clé « wait ». C'est à quel point il est facile de travailler avec l'asynchrone et d'attendre. C'est le premier mot. Avant de passer à autre chose, créons simplement un deuxième mot. Premier mot. Oui, on peut appeler ça un deuxième mot. Et nous savons que le deuxième mot est trompé. On y va. Donc, lorsque nous consolons le journal et que nous avons terminé, nous pouvons dire le premier mot. Bien sûr, nous pouvons avoir des résolveurs, pas des bons, bien sûr, des résultats non définis. Et je l'ai appelé RES. Vous savez ce que je dois changer ? Je peux soit faire ce résultat, soit changer sur les tableaux, mais faisons simplement cette résolution. On y va. Bien sûr, lorsque nous exécutons cette fonction de message, tout devrait se dérouler comme prévu. La co-occurrence nous indique que nous avons enregistré la console, c'est fait. Bonjour tout le monde. Mais mes chers étudiants, je veux que vous compreniez pourquoi. Laissez-moi juste zoomer. Laissez-moi défiler vers le haut. C'est l'ensemble de notre bloc de code. Permettez-moi d'expliquer ce qui se passe ici. Et cela va être très technique, mais il est très important que vous compreniez cet exemple. Nous attendions des promesses. Que va-t-il se passer ? Bon, d'accord, parlons du code qui est exécuté. Nous savons que les progrès progressent cette fonction de message en trois étapes. Première étape, la première ligne du corps de la fonction va être exécutée de manière synchrone. Il s'agit du comportement par défaut de JavaScript. Cela signifie que nous allons atteindre la ligne, c'est la première chose qui va être exécutée. Mais maintenant, lorsque l'analyseur frappe le mot clé qui attend, le navigateur sait qu'il y a une promesse de peinture. Il faut attendre ce qui va se passer. Eh bien, le résultat est que la progression de notre fonction de message va être suspendue et que le contrôle sera renvoyé à l'environnement qui a appelé la fonction de message. Dans ce cas, je vais mélanger chaque fonction est appelée sur la portée de la fenêtre et rien d'autre ne se passe sur les principales menaces et rien d'autre ne se produira. Mais c'est ce qui se passe en coulisses. Etape jusqu'à quelque temps plus tard lorsque la première promesse a été soit rejetée, soit rejetée. Le contrôle va revenir dans ce message. Fonction, résultat de la première promesse, écoutez le mot bonjour. Il va être renvoyé à partir de l'expression d'attente. Ici. Le mot bonjour est attribué à la variable appelée premier mot. C'est fait. Les progrès vont ensuite se poursuivre. Le passé va maintenant voir le deuxième mot clé qui attend. Encore une fois, le navigateur sait qu' il y a une promesse en attente qu'il doit attendre et progresser. Et combien de ces fonctions vont maintenant être suspendues à nouveau. Et le contrôle va être rendu à l'environnement. Ce message froid. Nous ne faisons que répéter le processus ici. Enfin, la troisième étape, un peu plus tard, lorsque la seconde promesse a été tenue ou rejetée, contrôle va entrer à nouveau dans cette fonction de message. Bien sûr, le résultat de la deuxième résolution de promesses est retour de la deuxième expression d' attente. Dans notre exemple, le monde du mot est attribué à une variable que nous avons définie comme second mot. Mais maintenant, c'est la principale différence car nous n'avons plus de mot clé en attente. Le contrôle va passer par cette fonction de message, finissant par toucher une expression de retour. Ici, nous ne faisons que consigner quelque chose sur l'écran. Vous l'avez eu ? Je vous ai dit que c'est très avancé. J'espère que vous comprenez, j' espère que je vous expliquerai jusqu'à ce que vous soyez assez intuitif une fois que vous comprenez comment cela fonctionne. Mais avant de terminer cette conférence, permettez-moi de vous poser encore une question. Rappelez-vous que j'ai dit que lorsque le mot clé en attente de dette est touché par l'analyseur, j'ai dit que le contrôle va être rendu à l' environnement qui a appelé, ce qui fait fonctionner l'informatique en premier lieu. Rappelez-vous que j'ai dit ça et il a les environnements de fenêtres et rien d'autre ne se passe. Mais qu'est-ce que je veux dire ? si ce n'est pas l'objet window qui a appelé cette fonction de message ? Et si c'était une autre fonction ? Je sais que c'est un peu compliqué, mais laissez-moi vous montrer ce que je veux dire. Allons ici. Ce n'est pas exécuter cette fonction maintenant, commentons simplement. Disons que nous avons une autre fonction. Et cette fonction, appelons juste l' exécution faute d'un meilleur mot. Et dans cette fonction, nous voulons exécuter cette fonction de message. Et nous voulons qu'un journal de console soit d'abord sur la console. instant, je n'ai pas exécuté cette fonction, nous venons de la définir, mais que pensez-vous qu' il va se passer maintenant, après ce que j'ai dit il y a quelques instants, pour illustrer la rue dans une copie bon marché ces deux fonctions, navigateur, console. Que va-t-il se passer, j'exécute cette fonction. Essayons ça. À quel point est-ce génial que nous soyons exécutés ? Je suis le premier, le premier. Et seulement une fois que tous ces délais ont résolu que nous avons fait le mot, Hello World est revenu vers nous. Ou juste les étudiants, est-ce génial ? Ce qui est vraiment génial , c' est que vous comprenez ce se passe en coulisses. Parce que lorsque l'analyseur frappe le mot clé qui attend le premier mot clé, cela laissera le contrôle de cette fonction de message à l'environnement, puis l'appelle, et c'est cette fonction d'exécution. Et il va continuer à exécuter du code de manière synchrone. Nous savons que pendant qu'il est en pause et que cela promet de se résoudre, nous savons que ce journal de console va d'abord nous être donné avant que toute la fonction de message ne soit exécutée. La raison pour laquelle j'ai dû aller au navigateur, bien sûr, si j'exécute cette fonction maintenant, pourquoi ne montre-t-elle rien ? Coca-Cola et montrez-nous l' ordre dans ce qui est fait. Nous pouvons donc voir ici que nous obtenons, je suis d'abord n, nous avons fini. Bonjour tout le monde. Nous ne pouvons pas voir l' ordre de quand c'est arrivé. C'est pourquoi je voulais vous montrer ici comment cela fonctionne. Permettez-moi de vous montrer à nouveau, vous pouvez également voir le temps qu'il faut pour exécuter ces délais d'attente. C'est fascinant. Définissons donc nos fonctions. Nous allons l'exécuter. Nous arrivons immédiatement, je suis d'abord à attendre deux secondes , puis nous y parvenons. Fascinant. Je veux m'arrêter ici. Je veux faire une pause. Dans la prochaine conférence, je vais vous montrer un autre exemple rapide et finalement nommé, je veux que nous utilisions ce que nous avons appris. Je veux que nous utilisions le mot clé asynchrone et attendait pour améliorer le code que nous avons déjà fait sur d'autres exemples. J'ai hâte et je vous verrai lors de la prochaine conférence. OK. 9. Deuxième exemple d'utilisation de l'Async/Await: Vous savez, j'adore mes exemples parce que je pense vraiment que les exemples sont à l'origine. Je veux juste que vous vous habituez très au concept de vent qui attend le mot-clé est frappé par le pasa. progression de l'exécution complète en JavaScript est mince dans cette fonction et le contrôle est donné à l'environnement qui, bien sûr, a exécuté cette fonction. Je veux juste que vous vous habituez à ce concept. Alors pourquoi ne pas créer une fonction asynchrone pour que nous sachions qu'elle va renvoyer une promesse. Nous utilisons le mot-clé fonction en JavaScript. Appelons juste ça foo. C'est juste un simulacre de convention. Je ne sais pas pourquoi nous utilisons de la nourriture tout le temps. C'est juste une fonction inventée. C'est juste un nom de fonction. On aurait pu appeler ça comme on voulait. Je veux maintenant définir une promesse et c'est instancier la fonction constructeur promise. Nous savons que nous avons des x à résoudre et à rejeter dans notre fonction constructeur. Bien sûr, que voulons-nous se passer ici ? Il suffit d'obtenir tous les crochets et tout ça trié. Nous sommes prêts à exécuter. Tout ce que je veux faire, c'est que je veux implémenter la méthode SetTimeout. Je ne veux vraiment rien arriver autrement que de résoudre cette promesse. Et nous pouvons résoudre le mot bonjour. Comment ça va ? C'est assez simple en cent dix cents millisecondes. Ici, on y est toute une fonction asynchrone très simple appelée foo. La prochaine chose que je voulais faire, je ne voulais pas exécuter ça maintenant . Vous savez ce que je vais faire ? En fait, écrivons ceci dans notre état au F, juste plus facile de voir ce qui se passe. Bien sûr, à moins d'inhiber le N majuscule pour les nouveaux. On y va. Maintenant, je vais au moins l'éditeur de texte nous dit que tout est une syntaxe K. est très importante quand il s'agit de coder. De toute évidence, votre ordinateur comprend juste 1 et rien, alias les impulsions électriques. C'est des ordures, des ordures efficaces, si je fais une erreur, si je ne le fais pas, si j'appelle cette promesse des promesses, le moteur JavaScript ne comprendra pas ce que c'est, ça va être. ordures. De toute façon, c'est pourquoi le nouveau mot-clé est très spécifique. Et JavaScript, je dois utiliser mu minuscules. C'était mon erreur. Quoi qu'il en soit, nous sommes toujours dans cette fonction foo. Nous avons mis en œuvre une promesse. La promesse va se résoudre avec le mot bonjour dans une seconde. Maintenant, c'est ce que je veux vous montrer jusqu' à ce stade, nous n'avons pas utilisé le mot-clé poids. Ce que je veux faire, c'est définir une variable de message. Et attendons cette promesse. Pour comprendre ce que c' est que j'essaie de faire. Je vais attendre que la promesse ci-dessus résolue par le mot bonjour. C'est ce que je vais faire. Et puis je vais le mettre dans une variable appelée message. Intéressant. Alors, bien sûr, ce que je veux faire, c'est d' alerter un message au navigateur. Je veux que ce petit pop-up apparaisse et je veux que nous voyions le mot bonjour. Allons dans le navigateur. C'est clair, tout définit notre fonction. On y va, on l'a défini. Permettez-moi de zoomer un peu compte tenu nos conversations que nous avons eues. Compte tenu de l'exemple que je vous ai montré lors de la conférence précédente. Je veux que vous réfléchissiez logiquement à ce qui se passe ici. Eh bien, tout d'abord, exécutons cette fonction pour que vous puissiez voir ce qui se passe. Nous l'avons exécuté. La résolution n'est pas définie. Nous allons éclaircir cela. Je l'ai appelé. Allons augmenter. On y va. Et appelons à nouveau la fonction. On y va. Et nous recevons l' alerte en disant bonjour. Cela s'est bien sûr produit au bout seconde, comme on pouvait s'y attendre. On y va. C'est logique. Mais comprenez-vous la logique maintenant ? Permettez-moi d'expliquer le niveau logique. Vous le savez probablement déjà, mais laissez-moi rentrer chez moi. Examinons notre code. L'exécution de la fonction va tirer sur quelle ligne ? Eh bien, il va faire une pause quand il frappe le mot clé qui attend. Il va faire une pause en ligne dans ate. Nous savons quel que soit l'environnement appelé cette fonction foo, que la douleur continuera d'être exécutée de manière synchrone. Lorsque la promesse finira par renvoyer un résultat , le contrôle sera rendu à cette fonction foo. Bien sûr, nous exécutons ce message d'alerte, c'est logique. C'est ce que je veux souligner. L'utilisation du mot « wait » suspend littéralement l'exécution de la fonction et dit que la promesse se règle. Il va ensuite reprendre avec le résultat de la promesse. Cela ne coûte pas de ressources CPU car le moteur JavaScript peut effectuer d'autres tâches. En attendant, il peut exécuter d'autres fonctions ou les scripts gérant les haricots, etc. C'est très, très puissant. Mais de toute façon, je pense que vous avez une compréhension suffisamment élevée pour commencer à creuser plus profondément dans l'asynchrone et attendre. Avant de terminer cette section, ce cours, je veux que vous utilisiez ce que nous avons appris de manière pratique. Lors de la prochaine conférence, je veux appeler un code que nous avons déjà examiné. Et je veux que vous essayiez de convertir ce code ou d'améliorer leur code en utilisant async et attendez. J'ai hâte et je vous verrai bientôt. 10. Introduction au défi - Améliorer notre code de recherche de cours précédent: Bienvenue, bienvenue, bienvenue. Si tu t'amuses beaucoup. Bon, c'est bon, nous y voilà. C'est du code de quelques sections, classes, Beck et vous savez, le tiroir que nous avions cette API Fitch qui a fait des appels pour faire différents sites Web. La première demande de fonctionnalité consistait à remplacer cette frappe par notre adresse IP. mien ne fonctionne pas pour le moment parce que je suis au Zimbabwe, en Afrique. Et parfois, on n'a pas de pouvoir. En ce moment. Je n'ai ni électricité, ni électricité. Et cela signifie, bien sûr, pas de routeur ni de Wi-Fi. Je ne peux donc pas goûter ce code avec vous. Mais ce que je peux faire, c'est que nous pouvons améliorer notre code, nous pouvons le refacturer. La seconde face à votre quiz, nous avons fait le reste sur notre propre serveur, montrant une image, cliquez sur le bouton et nous montrons Ajax. Si nous allons à notre code, nous pouvons voir ici au bas du fichier, c'est notre quête de fonctionnalités pour Fitch cette imagerie. Et il y a beaucoup de déclarations de thèmes. C'est une déclaration de prise. Je veux que vous réfléchissiez à la façon dont nous pouvons changer cela, comment améliorer ce code en utilisant l'asynchrone et attendez, donnez-le vous-même. Arrêtons la conférence ici. Et lors de la prochaine conférence, laissez-moi le coder avec votre conduit et je vous verrai bientôt. 11. Solution de défi - Récupérer notre image en utilisant l'async/attend.: Vous y êtes allé ? Je l'espère. Je l'espère, car c'est la chose la plus importante. Cela n'a même pas d'importance si vous n'avez pas bien compris. Le plus important, c' est que vous y alliez. Permettez-moi de le faire de manière fragmentaire pour que vous compreniez ce qui se passe. Vous auriez peut-être pensé, Hé, nous savons que Fetch retourne une promesse. Nous tenons compte des promesses afin que nous puissions faire face à l'asynchrone et attendre. Mais même avant cela, vous pourriez penser, hé, mettons cela dans une variable appelée réponse. Et nous pouvons exécuter cette fonction de récupération. Vous savez quoi ? Laissez-moi juste commenter tout le reste ici. Laissons l'âne confus. Vous auriez peut-être pensé , d'accord, saisissons notre réponse. Nous savons que les réponses sur flux lisible vous auraient peut-être semblé bien, essayons d'extraire les données en prenant cette réponse et en exécutant la méthode blob dessus. Parce que nous savons que nous avons affaire à une image. Ce sont des données binaires, ce n'est pas JSON. Alors, bien sûr, permettez-moi copier les prochaines lignes de code ci-dessous ici. Vous avez peut-être été sauvé. Définissons une URL d' image à l'aide l'interface URL et en transmettant cet objet de données. J'ai peut-être essayé de le faire. Ensuite, bien sûr, prendre les éléments source de l'image et les attribuer à cette URL. Bien sûr, la dernière étape consiste à consoler succès du journal à l'écran. Est-ce que ça va marcher ? Eh bien, essayons ça et passons à notre navigateur. Bien sûr, maintenant, lorsque je clique sur le bouton, ça ne fonctionne plus. Quels messages d'erreur que nous recevons. Nous recevons une réponse d'erreur de type. blob n'est pas une fonction. Comprenez-vous pourquoi ? Pourquoi obtenons-nous cette erreur de type ? Eh bien, si nous revenons à notre code, rappelez-vous simplement, la raison pour laquelle nous arrivons à cette époque est que même si nous savons l'objet réponse a la méthode blob, au moment où le navigateur arrive à la ligne suivante de code étant en ligne 97 et les alcanes, l'objet de réponse, cette variable. Il n'est pas encore revenu du charbon de phage. Rappelez-vous que l' appel Fitch est fait sur un autre fil à part trois, qui est fait parallèlement au thread principal. C'est pourquoi nous obtenons une erreur. Ok, le client le voudra ou non, puis il suffit d'ajouter le mot attendez devant Fitch et attendez devant la méthode blob, n'est-ce pas ? Ce sont les deux seuls qui renvoient une promesse, donc nous n'avons pas besoin d' attendre nulle part ailleurs. Cela fonctionnera-t-il ? Eh bien, ça ne marchera pas non plus. Allons dans le navigateur, rafraîchissons tout. Cochez le bouton. Cela ne fonctionne pas. Ça ne va pas marcher. Pourquoi cela ne fonctionnera-t-il pas ? C'est vrai. Parce que vous devez utiliser wait dans une fonction sinc. Ensuite, il nous suffit d'élargir un peu plus notre code. Mais vous verrez que cela en vaut la peine car il devient très facile à lire. N'oubliez pas que nous avons besoin du mot-clé asynchrone , puis nous devons définir une fonction. Disons simplement que c'est l'image Fitch et que tout se trouve entre ces crochets bouclés. On y va, on commence à avoir du sens. Maintenant, nous avons défini une fonction. Nous avons mis le mot clé asynchrone jour, nous utilisons un poids. Nous pouvons le lire de manière synchrone. Et bien sûr, nous devons réellement implémenter ou exécuter cette fonction, n'est-ce pas ? Sinon, rien ne se passera. Vous y allez. C'est ainsi que nous utilisons l' asynchrone et attendons. Est-ce que ça va marcher ? Que pensez-vous ? Allons dans le navigateur. Cliquez sur l'image. C'est très, très cool, n'est-ce pas ? Ne vous perdez pas dans tous les détails. C'est une monture très simple à lire. Je n'examinerai pas la logique en détail parce que vous savez déjà comment cela fonctionne. Mais rappelez-vous que dans notre code d'origine, si vous faites défiler vers le bas, nous avons implémenté quelques autres fonctions, vérifions l'état et convertissons en blob. Juste ici. Nous contournons ces choses qui ne sont pas bonnes. Nous voulons vérifier le statut et nous voulons mettre notre logique ailleurs. Si nous faisons défiler vers le haut, nous avons la section « fonctions universelles ». Nous avons défini certaines fonctions. Nous avons défini une fonction appelée check status. Mais qu'est-ce qui est intéressant à ce sujet ? C'est vrai. C'est une promesse. Intéressant. Et je vais fonctionner convertis en blob renvoie également une promesse parce que nous savons la méthode blob renvoie une promesse. Pourquoi avons-nous légèrement amélioré ce code ? Je pense que la première ligne va bien. La réponse est ce que nous retirons de notre charbon en forme. Dans ce cas, nous voulons seulement faire face à une bonne réponse. Une réponse. Je ne veux pas exécuter notre fonction blob. Ce que je veux faire, c'est que je veux implémenter notre fonction de vérification de l'état et nous transmettons notre objet de réponse. Nous le savons. Une fois que nous avons obtenu cette bonne réponse, le prochain conseil est de le convertir en blob. Alors pourquoi ne pas appeler cela dans un blob data faute d'un meilleur mot. Et oui, nous pouvons exécuter notre fonction Convertir en blob. Cela prendra nos bonnes données de réponse. On y va. Nous avons littéralement fait le travail nécessaire. Si nous allons dans le navigateur, tout, cliquez sur l'image. L'ère de référence, la fille n'est pas définie. Qu'est-ce que j'ai mal fait ? Les données ici devraient être bloguées sur le cours fille. Revenons à notre navigateur. Cliquez sur Afficher l'image. À quel point est-ce génial ? À quel point est-ce génial ? Je suis très, très content de ça. Mes chers élèves, est-ce que c'était cool ? Maintenant, je veux que nous suspendions la conférence ici. Il arrêtera la conférence ici. Je veux que vous essayiez de faire exactement la même chose, améliorer le code. Mais si je fais défiler vers le haut, je veux que vous fassiez de même pour récupérer l'adresse IP. voici, le charbon Fitch pour obtenir notre adresse IP. Arrêtez la conférence ici, essayez de le convertir vous-même. Ensuite, je vais vous montrer comment je l'ai fait lors de la prochaine conférence. 12. Solution de défi - Récupérer notre adresse IP en utilisant l'async/await: Vous y êtes allé ? Je l'espère. Je l'espère. Et je n'ai toujours pas Internet ici finis et nous n'avons aucun pouvoir. Je ne peux donc pas le goûter, mais je vais l'annuler avec vous. Si ce n'est pas correct, faites-le moi savoir dans les questions-réponses et je vais le réparer, mais j'espère que la logique prévaudra et que cela aura du sens. Alors, comment pouvons-nous convertir cela ? Comment y remédier ? Tout d'abord, débarrassons-nous de tout ce bloc. Si nous n'en avons pas besoin. Il est maintenant défini comme fonction asynchrone. Nous pouvons utiliser le mot-clé fonction en JavaScript. Nous pouvons l'appeler Fitch IP parce que c'est exactement ce que nous faisons à l'intérieur de ce bloc de code ici, nous pouvons répondre à votre question, quelle est la suite ? Que faisons-nous ? Je ne sais pas. Disons simplement notre réponse rurale. Je vous montre juste que nous pouvons le définir. Tout ce que nous voulons est le résultat de cette demande Fitch. Et bien sûr, j'utilise le mot-clé async ici parce que nous savons que cette demande de fonctionnalité renvoie une promesse. Quelle est la prochaine étape ? Eh bien, nous voulons vérifier avec cela, nous avons une bonne réponse. Définissons donc une variable appelée bonne réponse et exécutons notre fonction de vérification du statut, que nous lui transmettons, notre réponse rurale. Vous pouvez vraiment voir que c'est très, très simple, très intuitif. Nous savons qu'une fois que nous avons reçu la réponse de cette requête FetchRequest, nous savons qu'il faut redoubler le flux. Nous savons que c'est Jason parce que nous appelons cette URL API de l'heure mondiale et nous indique que nous recevons des données JSON. Ce que nous voulons faire, c'est définir une variable appelée data, qui sera JSON. En fait, ce n'est pas le cas, ce sera un objet JavaScript, mais nous savons que ce sera le résultat d'avoir froid la méthode JSON. Nous utilisons le mot-clé attendez une fois de plus, si nous obtenons une bonne réponse, nous savons qu'il possède cette méthode JSON. Voyons maintenant la méthode JSON. Les conférences précédentes nous ont permis de constater que la dette nous rapporte une promesse. C'est pourquoi nous devons utiliser le mot-clé « wait ». Bien sûr, nous pouvons terminer le même exemple de pneu. En saisissant notre adresse IP, sélecteur de requête prend. Nous pouvons saisir notre élément HTML qui a un ID de prise IP, je pense que c'est ce que nous appelons cela. C'est défiler vers le haut. Ce sont des prises IP d'en-tête, pouvez-vous le voir ? Si je prends, faisons de petites dents. Cela modifie sa propriété HTML interne ce que nous savons sur cet objet JavaScript. Rendons-les à nous. Il possède une propriété appelée IP du client. Nous l'avons déjà fait auparavant. Vous savez de quoi je parle ? Cela devrait fonctionner. En fait, cela ne devrait pas être dû parce que nous n'avons pas encore exécuté de fonction. Bien sûr, en dehors de ce bloc de code, exécutons cette fonction. Avec les étudiants, cela devrait fonctionner. Comme je l'ai mentionné, je n'ai pas de pouvoir. Cela ne va donc pas marcher pour nous. C'est pourquoi ce goût saisissant n'a pas été remplacé. Mais vous comprenez le point. Je pense que cette logique sera maintenue s'il y a quelque chose qui ne va pas. Veuillez simplement regarder dans les commentaires. Certains shorts ont déjà été résolus. Mais oui. Oui. J'espère que tu t'amuses bien. Je m'amuserais bien. Il y a juste une autre chose que je veux mentionner. C'est des époques. En ce moment. Nous ne détectons pas d'erreurs ici. Vous savez quoi, laissez-moi supprimer plus maintenant, laissez-moi garder le jour commun. C'est très bien. Mais en ce moment, si nous revenons à notre image, charbon, nous ne traitons pas de zones. Dans la prochaine conférence, permettez-moi de vous montrer rapidement comment nous pouvons utiliser un bloc d'essai et de capture pour gérer les erreurs. J'ai hâte. 13. Traitement des erreurs avec Essayer et Catch: La dernière chose dont je veux vous parler est la gestion des erreurs. Je veux dire, nous savons que nous avons exécuté la conversion du statut de vérification en blob. Et si nous passons à ces fonctions en haut de notre code, nous avons une gestion des erreurs. Nous l'appelons méthode de rejet. Par exemple, si la réponse est correcte, la propriété est fausse. Mais que se passe-t-il si nous avons d'autres domaines ? Et si nous n'avons pas de zones dans ces blocs de code ? Eh bien, il y a une solution très simple à cela. Et c'est-à-dire que nous pouvons envelopper l'intégralité de notre bloc de code dans une instruction try. Très, très utile, très, très intuitif. Nous avons donc simplement déplacé notre code à l'intérieur de ce bloc d'essai. Et ce que cela fait, c'est qu'il permet à toutes les zones d'être capturées par ce bloc de prises. Bien sûr, nous recevons un objet d'erreur que nous pouvons placer dans n'importe quelle variable. Nous le mettons dans une variable appelée Era. Et puis il exécutera cette fonction de rappel médicalement et, bien sûr, vous pouvez faire ce que vous voulez. Cette console n'a qu'un journal que l'objet aérien parie à l'utilisateur. Ok, donc on peut littéralement faire ça, essayer et attraper les poches. Très simple. Je vous l' ai dit, je vous ai dit que ce ne sera pas difficile. Ensuite, vous avez une erreur, comme une URL incorrecte. Accédez au navigateur, accédez à la console et cliquez sur l'image. Nous obtenons une erreur. Et c'est notre erreur personnalisée. Permettez-moi de vous le prouver. Bonjour tout le monde. Nous avons, revenons au navigateur. Cliquez sur l'image, puis nous y allons, Bonjour tout le monde. Oups, ce bloc de capture détecte en fait l'erreur. J'espère que tout cela est logique. Si je me suis beaucoup amusé dans ce faux, nous avons couvert une tonne d'informations. En prenant du recul, je veux que vous réalisiez que vous avez vraiment parcouru un long chemin. Vous savez ce que sont les données JSON, les données XML, vous connaissez l'historique d'Ajax, d' où elles proviennent. Vous savez ce qu'est une fonction constructeur utilisée pour utiliser l'objet XHR. Et la liste continue. Walden, tapote-toi dans le dos. Là, nous l'avons. Très, très simple. Ce cours a été très rapide. J'espère que vous pourrez commencer à voir la puissance de l'asynchrone et attendre.