Transcription
1. Introduction: Bienvenue dans la classe
JavaScript asynchrone. Dans ce cours, nous
allons apprendre les callbacks, les promesses et l'attente asynchrone, qui sont les sujets les plus
importants pour les développeurs JavaScript, en particulier ceux qui
veulent maîtriser, réagir ou nœud. Si ces concepts sont effacés, vous pouvez facilement en apprendre d'autres dans
React et node. Oui, vous obtiendrez
toutes les ressources pour l'exercice et le chiffre de ces concepts dans la section
Projets. Alors ne perdons pas de
temps et lançons-nous.
2. Synchronous vs Asynchrone: Tout d'abord,
comprenons la différence entre synchrone
et asynchrone. Ici, je crée le fichier
index.html. Et dans ce dossier JavaScript, nous avons le fichier script.js. Et j'ai lié ce
fichier JavaScript à notre fichier HTML. Copions maintenant ce chemin d'accès au fichier
HTML et collez-le dans le navigateur. Et ouvrons le taux de console. Maintenant, dans ce fichier JavaScript, j'écris console.log en première ligne. Après cela, une autre dernière ligne
console.log. Voici donc l'exemple de code
synchrone
ou de code bloquant. Parce que lorsque cette
première ligne est exécutée, le code est bloquant. Et cette dernière ligne doit
attendre que cette première ligne
termine la tâche. D'autre part, vu programme
asynchrone ou
non bloquant. Laissez-moi vous montrer l'exemple
du code asynchrone. En JavaScript. Nous avons une fonction
appelée setTimeout. Le premier
argument est fonction, et le second argument
est time for delay. Disons 2 000
millisecondes, soit deux secondes. Au bout de deux secondes, cette
fonction s'exécute. Imaginez donc que nous
obtenions des données à partir d'une base de données, ce qui prend deux secondes. Maintenant, pouvez-vous deviner ce que
nous obtenons dans la console ? Voyons voir. J'actualise donc la page et je vois que nous obtenons la première et la dernière ligne. Et au bout de deux secondes, nous obtenons
les données de la base de données. Donc, tout d'abord, cette
première ligne s'exécutera. Ensuite, nous appelons cette fonction
SetTimeout. Cette fonction planifiera
une tâche, l'exécutera à l'avenir. Cela ne bloque pas l'objectif, c'est pourquoi nous l'appelons code
non bloquant ou
asynchrone. Ainsi, lorsque nous exécutons ce code, nous obtenons cette première ligne, puis immédiatement la dernière ligne. Et au bout de deux secondes, nous obtenons cette ligne. Comprenons cela avec
l'exemple de la vie réelle. Voici un restaurant unique. Le serveur vient à la table 1
et prend commande auprès d'eux. Maintenant, le serveur donne cette commande à la cuisine, puis passe à la
table 2 ou à une autre commande. Il y a donc un évaluateur
qui peut servir plus de clients. C'est donc l'exemple
de l'asynchrone. Maintenant, c'est un autre diagramme de rayon de
restaurant pour le tableau un et prendre
commande auprès d'eux. Maintenant, le serveur donne cette
commande à la cuisine et attend
que le code soit prêt. Il ne prend pas d'ordre
à une autre table. Le système des restaurants
va donc bloquer à cause de cela. Et c'est l'exemple du
blogging ou du score synchrone. type de code
est donc synchrone ou asynchrone. Maintenant, rendons cet
exemple plus réaliste. Je crée donc une
fonction appelée get student et déplace cette fonction
timeout à l'intérieur. Cette fonction renverra ici les données du nom de l'objet étudiant, bob, un identifiant à un. Maintenant, appelons cette
fonction ici et stockons cette valeur dans une
variable appelée student. Ensuite, nous enregistrons
simplement l'étudiante,
Sylvia, en supposant que nous
obtenons des données de la base de données. Et cela prend deux secondes, enregistrez ceci et actualisez la page. Vous voyez, nous obtenons cet étudiant comme étant indéfini parce que cette fonction s'exécute au bout de deux secondes. Ainsi, lorsque nous appelons cette fonction, ces données écrites ne
sont pas disponibles. Si nous voulons renvoyer une
valeur à partir de cette fonction, vous avez la bonne instruction
return ici. Mais ce n'est pas ce que nous voulons parce que nous obtenons
des données de la base de données. Et cela peut prendre encore une fois, ces secondes ou plus que cela. C'est pourquoi nous utilisons SetTimeout pour ajouter un
délai à cette tâche. Maintenant, comment pouvons-nous obtenir
ces données sur les étudiants ici ? Il existe donc trois méthodes
pour gérer le code asynchrone. rappels, les promesses
et l'asynchrone attendent. Commençons donc par les rappels.
3. Callbacks: Ce que l'on appelle un rappel est une fonction qui est exécutée. J'ai fait une autre fonction qui
a terminé l'exécution. En d'autres termes, toute
fonction que nous
passons comme argument
à une autre fonction. Nous appelons donc cette
fonction en tant que fonction de rappel. Laisse-moi te montrer.
Donc je viens d'ajouter ici paramètre
id et j'
achète cet identifiant ici. En fonction, nous en passons un, que j'ai oublié d'ajouter. Donc, pour appliquer le rappel, nous devons créer la définition de la fonction de little
gene. J'ajoute donc ici
l'argument rappelé. Maintenant, ce rappel est fonction. Nous appelons donc cette fonction
lors de l'impression des données. Donc, après cette console, nous ajoutons callback et Gaul. Cette fonction
achète maintenant les données des étudiants
dans ce rappel. Supprimons ce retour. Nous n'en avons plus besoin. Maintenant, nous ne retournons rien de cette fonction
GetString. Nous n'avons donc plus besoin de stocker cette valeur de fonction dans variable. Maintenant pour notre deuxième argument, nous devons passer la
fonction que j'utilise ici à une fonction et déplacer ces
consoles dans cette fonction. Maintenant, récupérons les
détails de l'étudiant en tant que paramètre étudiant. Vous pensez peut-être que
c'est déroutant, mais croyez-moi, ce n'est pas le cas. Laissez-moi vous expliquer depuis le début. Ici. Nous appelons ce
sketch pour exécuter une fonction, et nous passons celui-ci comme IID. Donc, au bout de deux secondes, engendre la console de cette ligne. Et après cela, cette fonction de
rappel s'exécutera, nous passerons un second argument. Nous obtenons donc ces données d'objet
dans ces deux variables aléatoires. Ensuite, nous pouvons résoudre ces données
d'étudiants aussi simplement que cela. Enregistrez ceci et
actualisez dans le navigateur. Tu vois, on a cette première
, dernière ligne. Et au bout de deux secondes, nous obtenons cette ligne. En utilisant cette technique. Nous n'obtenons pas de
données non définies comme nous l'avions précédemment. Cette fonction de rappel sera
exécutée au bout de deux secondes. qui est amusant,
c'est que vous utilisiez déjà callbacks dans votre code
avant ce tutoriel. Faites donc attention à la syntaxe
de la fonction setTimeout. Le meilleur argument est fonction, et le second argument est le temps. Nous savons donc que lorsque nous passons function en tant que paramètre
dans une autre fonction, nous appelons cette
fonction en tant que callback. Maintenant, imaginez que nous voulons
obtenir d'autres données
de l'étudiant, disons des
informations sur le sujet de l'étudiant. Je crée donc une autre
fonction appelée gets objects and bias ici, id, qui est l'identifiant étudiant. Maintenant, dans cette fonction, nous supposons que l'agrégation des données à
nouveau à partir de la base de données. J'ajoute donc ici la fonction setTimeout et Baz
comme premier argument. Et deux secondes. Maintenant, ici, je console d'
abord en
obtenant le sujet de l' étudiant et je passe ici cet identifiant. Et je n'ai pas étudié de matières comme les
mathématiques, les sciences, l'informatique, etc. Maintenant, appelons cette
fonction ici et passons ID, qui est l'identifiant de point étudiant. Mais comme nous le savons, nous n'obtenons pas de données immédiatement. Nous utilisons donc le rappel. Nous ajoutons donc ici le callback. Et avant d'écrire, nous appelons cette fonction de rappel et passons ce tableau
dans ce rappel. Et remote est écrit. Maintenant, définissons le
rappel ici et
récupérons les sujets qui se trouvent
dans la variable sujets. Ensuite, nous pouvons
consoler les sujets, les enregistrer et rafraîchir la page. Tu vois, qu'est-ce qu'on doit prendre ? Ligne de poste, dernière ligne. Ensuite, au bout de deux secondes, nous obtenons des données sur les étudiants, et au bout de deux secondes
, des données sur les sujets.
4. Résoudre le Callback Hell: Il y a maintenant quelques
problèmes avec les rappels. Laissez-moi vous expliquer. Ici. Supposons que nous voulons obtenir des
notes sur ces sujets. Je crée donc rapidement
une fonction appelée GetMax et je passe l'objet en tant que
paramètre et je le rappelle. Maintenant, je viens de copier cette fonction
setTimeout et de la coller ici. Changeons le message de la
console, qui est en train de décrocher des notes. Et le biais ici
sujet et biais maximum dans ce rappel, disons 80. Maintenant, nous appelons GetMax et
nous passons ici subject à l'index
0, puis redéfinissons notre callback
pour l'impression. Cela marque. Donc, écrivez console.log mark. Vous voyez qu'il existe une structure
imbriquée parce que nous appelons plusieurs
rappels dans un seul rappel. Cela rendra notre code difficile à maintenir et à comprendre. Ce problème est connu
sous le nom de Callback****. Ce n'est pas le cas, nous avons
un score asynchrone. Donc, si toutes ces fonctions
sont synchrones, notre code ressemble à ceci. Vous pouvez voir comment ce code
synchrone est facile à comprendre
et à gérer. Donc, pour résoudre ce problème de
callback ****, nous allons rendre anonyme
function to name function. En d'autres termes, comme nous l'avons déclaré
ici, la fonction de rappel, qui est une fonction anonyme
parce qu'elle n'a pas nom et les définit séparément
comme étant nommée la fonction. Nous définissons donc ici la fonction appelée display max et nous
obtenons Mark en paramètre. Il suffit de consoler cette fonction malloc
d'affichage de marque est identique à ce rappel. Remplacons-la
par notre fonction. Nous définissons maintenant une fonction
appelée sujets d'affichage. Et nous obtenons les sujets en tant que paramètre ici, nous copions ces
deux lignes à partir d'ici, et nous les collons dans notre fonction de sujets
d'affichage. Cette fonction est donc
identique à ce rappel. Nous pouvons le remplacer par des sujets d'
affichage. Pareil pour ce rappel. Nous créons une nouvelle fonction
appelée display student et obtenons les
données des étudiants en tant que paramètre. Ensuite, il suffit de copier
ceci et de le coller ici. Maintenant, nous pouvons remplacer ce rappel par cet étudiant
déplacé. Notez que nous n'
appelons pas cette fonction. Nous passons simplement la référence ici et voyons que nous n'avons pas
cette structure imbriquée. Je copie donc ce code dans un nouveau
fichier appelé callbacks ab.js. Vous pourrez donc vous référer à cette
partition à l'avenir. Cette approche n'est pas idéale, mais elle est meilleure
que Callback ****. C'est donc une meilleure
façon de gérer code
asynchrone
en utilisant des promesses.
5. Mettre en œuvre les promesses: Qu'est-ce que la promesse ? Une promesse est un objet
capable de contenir le résultat d'une opération
asynchrone. En d'autres termes, Rami's vous
promet de vous donner le résultat de l'opération
asynchrone ou de vous donner une erreur. Laissez-moi vous expliquer
par un exemple. Ici. Je crée un nouveau fichier
appelé Promises ab.js et le lie à
notre fichier index.html. Maintenant, pour créer une promesse, réécrivez un nouveau mot clé,
puis promettez. Maintenant, cette fonction de promesse prend un argument qui est fonction
avec deux paramètres. Ici. Le premier paramètre est résolu et le second paramètre
est rejeté. Et fonction flèche. À l'intérieur, nous écrivons
notre score asynchrone. Ici. Encore une fois, nous supposons que nous obtenons
des données de la base de données. Nous écrivons donc ici setTimeout et bars function
et two seconds. Imaginez maintenant que nous obtenions
nos données à partir d'une base de données. Je crée donc une variable appelée
student equals to object, disons id2, un nom pour Bob. Maintenant, nous écrivons ici
résolu parce que nous obtenons des données et que nous passons ici la variable
student. Maintenant, faisons cette promesse
dans une variable appelée promise. Et consommons cette promesse. Promis, c'est
le point variable. Ici. Nous avons alors deux
méthodes principales et obtenons. Ainsi, lorsque nous créons une promesse, elle est en attente. Et si nous terminons les tâches
asynchrones, alors les Brahmines
sont en état accompli. Et si c'est une erreur, Brom est dans l'état Rejeté. Ici, notre promesse tenue parce que nous appelons ici résolue. Ainsi, lorsque la promesse est remplie, nous obtenons nos données
selon cette méthode de bande. Maintenant, nous stockons nos données dans le
paramètre de résultat , puis nous
consolons simplement ce résultat. Enregistrez ceci, et voyez
qu'au bout de deux secondes, nous obtenons ce résultat. Maintenant imaginez que, pour une raison quelconque, nous n'obtenons pas de données de la base de données Je commente donc ces lignes et appelle ici la fonction de rejet. Maintenant, pour une meilleure pratique, chaque fois que nous créons une nouvelle erreur et biaisons notre message
d'erreur ici. Enregistrez les modifications et
appuyez sur la page. Vous voyez, nous obtenons cette erreur ici. Voyons maintenant comment
consommer ces erreurs. Après ce 10 mètres, nous ajoutons une autre
méthode appelée catch. Et nous obtenons adder et
console.log cette erreur, cette NC, nous obtenons cette erreur ici. Il s'agit donc de l'implémentation
de promise en JavaScript. Maintenant, laissez-moi vous montrer
comment nous pouvons convertir notre code précédent en promesses. J'ai donc ce code, quel que soit le problème de Callback ****. Commençons donc par cette fonction
get student. Dans cette fonction, nous
renvoyons une nouvelle
fonction PROMISE ET avec des
variables de résolution et de rejet à l'intérieur de
cette fonction d'erreur. Supprimez ce code. Maintenant, supprimons ce rappel. Nous n'en avons pas besoin et nous ajoutons
la place de ce rappel. Nous ajoutons résolu. Maintenant, testons cette promesse. Ici. Nous appelons cette
fonction d'exécution d'esquisse et passons id1. Maintenant, cela devient gonflé, la fonction
renverra la promesse. Nous stockons cette promesse
dans une variable appelée promise que nous consommons cette promesse et ajoutons
ici la méthode than. Maintenant, nous obtenons ces données dans le paramètre
student et simplement
console.log l'étudiant. Commentons maintenant ce code. Et je lie ce
fichier script au fichier HTML. Enregistrez ceci et actualisez la page. Tu vois, au bout de deux
secondes, on obtient des données.
6. Exercice et solution: Maintenant, si vous me
suivez, j'ai une tâche à vous confier. Je veux que vous convertissiez ces
deux fonctions en promesses. Alors mettez cette vidéo en pause ici
et essayez-la vous-même. Et après cela, observez la
solution. Dans cette fonction. Nous revenons et écrivons ici Nouveau et sélectionnons cette nouvelle promesse. Vous voyez, nous obtenons ce passe-partout en
utilisant ces petites astuces, vous pouvez augmenter votre productivité. Maintenant, déplacez ce code
dans cette fonction supprimez ce rappel et
remplacez-le par le résultat. Ici, nous créons également une nouvelle promesse et déplaçons ce code dans
cette fonction flèche. Supprimez maintenant ce rappel et remplacez-le
par le résultat. Nous transformons notre ancienne
fonction en promesse. Voyons maintenant comment consommer
ces promesses imbriquées. Nous supprimons donc cette console d' ici et appelons notre prochaine fonction. Nous obtenons simplement les sujets et
passons l'identifiant de point étudiant de l'année. Maintenant, nous savons que cette fonction
retournera à nouveau promise. Nous devons donc utiliser la méthode then. En dehors de ce 10 mètres, nous en ajoutons un autre que celui
stocké dans les sujets. Maintenant, après cela, nous appelons fonction
GetMax et passons
ici notre premier sujet. Maintenant, nous avons une autre promesse ici. Nous en ajoutons donc un de plus que de
matière et stockons cette marque. Et enregistrez simplement cette marque par
point sur la console, enregistrez-la et actualisez la page. Vous voyez qu'il fonctionne comme avant. Nous pouvons maintenant voir
que lorsque nous utilisons des callbacks, notre code ressemble à
cette structure imbriquée. Et après avoir appliqué les promesses, le même objectif semble
simple et conforme. Maintenant, pour une bonne pratique, nous ajoutons toujours la méthode cash, en-tête et l'erreur console.log. Donc, si nous obtenons une erreur dans l'une de ces promesses, la fonction de
capture unique s'exécutera. est aussi simple que ça. Maintenant, nous pouvons même simplifier ces promesses
en utilisant async wait.
7. Async Await - [Meilleure façon de gérer les promesses]: Async wait nous aide donc à écrire code
asynchrone comme un noyau
synchrone. C'est comme par magie. Laissez-moi vous montrer ici. J'appelle cette fonction
get student avec id1. Maintenant, lorsque nous appelons
une fonction qui renvoie une promesse, nous pouvons attendre ce
résultat et ensuite stocker
ce résultat dans une variable comme nous l'avons fait dans du code
synchrone. Nous allons donc le stocker dans une
variable appelée student. De même, nous appelons
la fonction suivante, qui est get subjects et
Bhatia student dot ID. Attendons maintenant cela et stockons dans une variable
appelée sujets. Maintenant, après cela, nous appelons
notre dernière fonction, qui est GetMax et l'objet fascia
biais
du tableau des étudiants. Maintenant, nous allons également pondérer cela et le stocker
dans Mark variable. Et puis nous
console.log cette marque. Maintenant, vous pouvez voir qu'en utilisant cet
async et notre interpréteur, nous pouvons écrire du code asynchrone, ressemble à un noyau synchrone. C'est facile à comprendre et à
maintenir par rapport
au rappel, ainsi qu'aux promesses. Nous n'avons pas besoin d'écrire ce
dix mètres encore et encore. Maintenant tu as peut-être de l'agressivité. C'est asynchrone. Ainsi, chaque fois que nous utilisons l'opérateur
wait, nous devons le déplacer en
fonction avec l'opérateur async. Laissez-moi vous montrer. J'ajoute donc simplement une
fonction appelée données
d'affichage et déplace
ce code à l'intérieur. Maintenant, au début de
cette fonction, j'ajoute async. C'est ça. N'oubliez pas que sans cette action, vous ne pouvez pas utiliser
huit dans votre code. Cela vous donnera une erreur et une modification, et appelons cette fonction de données
d'affichage. Maintenant, je commente
cette partie des promesses. Enregistrez ceci et actualisez la page. Vous voyez, nous obtenons le même
désert avec async wait. Notre code ressemble à synchrone,
mais sous le capot, moteur
JavaScript convertit la
discorde en quelque chose comme ça, cool ou froid, fonctionne comme noyau
asynchrone et
ressemble à du code synchrone. est aussi simple que ça. Maintenant, dans les promesses, nous avons géré les erreurs en utilisant
cette méthode get. Mais comment pouvons-nous gérer
cette erreur dans cette approche asynchrone et attendre
pour la gestion des erreurs. Nous utilisons le bloc try and catch. Alors j'écris ici sec. Et à l'intérieur de ce bloc d'essai, nous déplaçons notre ancien code. Et après cela, nous
ajoutons catch block. Et ce bloc de capture
obtient un objet d'erreur. Et nous avons simplement
consigné cette erreur par console. Donc, en termes simples, si une erreur s'est produite
dans ce bloc d'essai, alors le blog de ce type fonctionnera. Je commente donc
cette variable de marque, partie dégustation, sauvegarde ceci
et rafraîchit la page. Et voyez que nous obtenons cette erreur. Mark n'est pas défini. Ainsi, lorsque nous utilisons async
wait comme bonne pratique, nous divisons toujours notre code
et essayons d'attraper le bloc.
8. Recap tous les concepts: Récapitulons ce que nous avons appris. fonction de rappel est donc la meilleure méthode pour gérer le score
asynchrone. Mais dans la fonction de rappel roupies Le problème appelé callback****. Maintenant, après cela, nous voyons des promesses, qui promettaient simplement de vous
donner le résultat d'une opération asynchrone
ou de vous donner une erreur. Donc, pour créer une promesse, nous utilisons new promise et à
l'intérieur nous passons la fonction
avec deux méthodes. Résultat, rejet, le seul moyen satisfait et
rejet signifie rejeté. Mais avec les promesses, nous
obtenons également ces méthodes imbriquées. Après cela, nous voyons les opérateurs
async wait. Cette attente asynchrone fonctionne comme code
asynchrone et
ressemble à un noyau synchrone. Ainsi, lorsque nous appelons la fonction, nous ajoutons un opérateur de poids
au début. Cela nous aidera à écrire du
code de manière synchrone. Et surtout,
vous devez placer ce code dans une fonction
avec un seul opérateur. Sans async, wait ne
fonctionnera pas. Et c'est pourquoi il est
connu sous le nom d'async wait. Enfin, la gestion des erreurs. Nous utilisons le bloc d'essai et de jauge, halètement pour les erreurs et le
dry pour tout le code. Nous plaçons donc notre ancien code dans le bloc
try et nous gérons les
erreurs dans le bloc catch. Félicitations, vous avez
terminé ce cours et j'espère que vous
comprenez ces sujets. Si vous avez aimé ce cours, vous pouvez partager vos avis. Cela m'aidera à toucher
plus d'étudiants comme vous. Rendez-vous au
prochain cours. Au revoir.
Code Bless You, Make Coding Easy To Learn
