1
00:00:02,260 --> 00:00:04,100
Non, j'ai effacé jouez-vous aux échecs?

2
00:00:04,150 --> 00:00:08,590
Tombez à nouveau parce que vous avez conclu qu'il s'agit d'un module de recyclage rapide.

3
00:00:09,010 --> 00:00:14,980
Je vais plonger dans le concept de non enregistrement et c'est ainsi que l'on travaille avec un code synchrone.

4
00:00:15,520 --> 00:00:20,110
Et pour cela, nous devons d'abord comprendre ce qu'est le code asynchrone.

5
00:00:20,530 --> 00:00:25,340
Disons que je mets un minuteur avec set timeout, qui est une fonction intégrée au nœud J.

6
00:00:25,350 --> 00:00:26,850
S là.

7
00:00:27,520 --> 00:00:31,380
Nous définissons une fonction qui devrait s'exécuter après l'expiration d'un certain temporisateur.

8
00:00:31,870 --> 00:00:33,580
Ici, je vais utiliser une fonction flèche.

9
00:00:33,880 --> 00:00:36,100
Vous pouvez utiliser une fonction nommée, comme vous le souhaitez.

10
00:00:37,060 --> 00:00:38,620
Le deuxième argument est le temporisateur.

11
00:00:38,650 --> 00:00:39,850
Disons deux secondes.

12
00:00:40,090 --> 00:00:41,710
Vous l'exprimez en millisecondes.

13
00:00:41,830 --> 00:00:46,250
Donc, deux secondes représentent deux mille millisecondes.

14
00:00:47,540 --> 00:00:48,190
Tout simplement verrouillé.

15
00:00:48,260 --> 00:00:49,710
La minuterie est terminée.

16
00:00:52,670 --> 00:00:58,490
Si je lance maintenant ce fichier pendant deux secondes, rien ne se passe et nous voyons que Taimur est terminé.

17
00:00:59,360 --> 00:01:05,060
Maintenant, c'est du code asynchrone car il ne se termine pas immédiatement et ce serait même un code d'envoi si

18
00:01:05,060 --> 00:01:06,680
nous avions une milliseconde là-bas.

19
00:01:06,770 --> 00:01:12,520
Donc, si c'est super rapide, cela ne se produit pas immédiatement dans notre étape de code.

20
00:01:12,520 --> 00:01:15,350
C'est comme si nous avions un verrou de console.

21
00:01:16,590 --> 00:01:17,100
Bonjour.

22
00:01:19,020 --> 00:01:20,460
Et le journal de la console.

23
00:01:22,400 --> 00:01:28,790
Salut, ces deux extraits sont du code Synchronoss car ils sont exécutés l'un après l'autre, et pourtant techniquement,

24
00:01:28,790 --> 00:01:32,120
Noad prendra un certain temps pour les exécuter.

25
00:01:32,300 --> 00:01:35,750
Mais il n'y a pas de retard autre que votre matériel.

26
00:01:35,840 --> 00:01:39,020
Pour ainsi dire, et fait donc un code Synchronoss.

27
00:01:39,260 --> 00:01:45,110
C'est un code malade, asynchrone car il ne s'exécute pas ou ne se termine pas immédiatement.

28
00:01:45,260 --> 00:01:47,930
Cela prend un peu de temps, même si c'est super court.

29
00:01:49,000 --> 00:01:55,340
Et en effet, si j'exécute ce fichier comme ça, vous voyez helo et high avant de voir que Taimur est fait,

30
00:01:55,520 --> 00:02:04,580
même si c'est super rapide car pas de G. S. et JavaScript en général ne bloque pas l'exécution de votre code tant que

31
00:02:04,580 --> 00:02:05,660
cela n'est pas fait.

32
00:02:06,260 --> 00:02:11,630
En effet, ici, il reconnaîtra cette fonction dite de rappel.

33
00:02:11,990 --> 00:02:13,740
Une fonction doit donc s'exécuter.

34
00:02:13,760 --> 00:02:18,120
À l'avenir, il devrait rappeler plus tard une fois l'opération terminée.

35
00:02:18,140 --> 00:02:24,470
Donc, une fois que ce temporisateur a expiré ici, il reconnaîtra simplement cela et passera immédiatement

36
00:02:24,470 --> 00:02:30,740
à la ligne suivante et exécutera tout le code synchrone, puis exécutera votre code asynchrone.

37
00:02:30,800 --> 00:02:36,890
Une fois que cela est fait, c'est pourquoi nous voyons d'abord le niveau bas et haut, même si dans notre code le temps est

38
00:02:36,890 --> 00:02:37,820
fait en premier.

39
00:02:38,270 --> 00:02:43,380
Et c'est un concept crucial que vous devez comprendre en JavaScript et surtout en nœud.

40
00:02:43,700 --> 00:02:47,110
Et j'y reviendrai tout au long du cours car c'est très important.

41
00:02:48,520 --> 00:02:54,430
Maintenant, lorsque vous travaillez avec la dette et tout augmente à deux secondes, encore une fois, pour le rendre encore plus clair, vous

42
00:02:54,430 --> 00:02:56,740
verrez à nouveau notre code de synchronisation s'exécuter.

43
00:02:56,920 --> 00:02:58,990
Et puis après deux secondes, ce code s'exécute.

44
00:02:59,650 --> 00:03:05,380
Lorsque nous travaillons avec du code asynchrone, nous obtenons plusieurs techniques de bien, le manipulant.

45
00:03:06,280 --> 00:03:12,320
La fonction de rappel est la plus ancienne, et vous la verrez un peu, surtout la note G. S ..

46
00:03:12,680 --> 00:03:20,350
Il n'y a rien de mal à cela, mais vous rencontrerez un problème si vous avez quelques opérations asynchrones dépendantes.

47
00:03:20,980 --> 00:03:22,870
Nous avons donc ici réglé la minuterie.

48
00:03:23,300 --> 00:03:27,280
Et maintenant, disons que je crée une autre fonction.

49
00:03:29,920 --> 00:03:32,270
Que je nommerai Fetch Data.

50
00:03:34,390 --> 00:03:40,390
Et là-dedans, je vais également définir un minuteur, car je ne veux pas configurer de base de données ou quelque chose comme ça où

51
00:03:40,510 --> 00:03:43,520
nous récupérons des données, nous ferons tout cela pour tous les cours.

52
00:03:43,720 --> 00:03:44,110
Bien sûr.

53
00:03:44,120 --> 00:03:44,620
Pas de soucis.

54
00:03:45,250 --> 00:03:51,310
Donc, là encore, j'ai un autre minuteur qui prend environ une seconde et demie.

55
00:03:52,940 --> 00:03:59,610
Et maintenant, ici, dans Fetch Data, j'ai besoin d'un moyen de faire quelque chose.

56
00:03:59,640 --> 00:04:01,250
Quand la minuterie intérieure est-elle terminée?

57
00:04:01,730 --> 00:04:07,190
Donc ici, je m'attendrai à un argument que je nommerai, car cet argument sera une

58
00:04:07,190 --> 00:04:07,820
fonction.

59
00:04:08,090 --> 00:04:12,740
J'appellerai éventuellement ma fonction intérieure ici une fois que j'aurai fini avec le minuteur.

60
00:04:13,340 --> 00:04:14,360
Et là je peux passer.

61
00:04:14,390 --> 00:04:18,320
Fait comme une valeur connaissant l'endroit où une utilisation récupère les données.

62
00:04:18,380 --> 00:04:20,490
Disons que c'est à l'intérieur de cet ensemble.

63
00:04:20,510 --> 00:04:20,730
Temps.

64
00:04:20,930 --> 00:04:21,410
Appel.

65
00:04:22,540 --> 00:04:24,610
J'appelle y chercher des données comme ça.

66
00:04:24,760 --> 00:04:27,140
J'ai maintenant besoin de passer et jamais de rappeler.

67
00:04:27,940 --> 00:04:28,540
Et ici.

68
00:04:29,690 --> 00:04:34,040
J'obtiendrai le texte passé par le rappel dans ma fonction une fois exécuté.

69
00:04:34,550 --> 00:04:38,930
Nous allons donc obtenir du texte ici et je peux verrouiller la console ce texte.

70
00:04:39,970 --> 00:04:44,890
Maintenant, cela peut sembler déroutant à la fin ici, je crée ma propre fonction, qui reçoit un

71
00:04:45,160 --> 00:04:50,950
rappel afin que je puisse définir une fonction qui devrait s'exécuter veut que ce temporisateur interne soit fait depuis un autre endroit.

72
00:04:51,010 --> 00:04:55,450
Donc, à partir de cet endroit, la fonction qui est effectivement transmise en tant que rappel.

73
00:04:55,830 --> 00:04:57,490
Et j'exécute cette fonction ici.

74
00:04:58,330 --> 00:05:00,460
Maintenant, si j'enregistre cela, lancez ça.

75
00:05:01,790 --> 00:05:04,680
Prend deux secondes, puis ce temps de minuterie est terminé.

76
00:05:04,730 --> 00:05:06,770
Et puis après une seconde et demie, je vois terminé.

77
00:05:07,460 --> 00:05:15,170
Maintenant, si nous avons quelques appels asynchrones imbriqués, comme nous l'avons ici, nous allons de plus en plus profond du point de vue

78
00:05:15,170 --> 00:05:15,980
du rappel.

79
00:05:16,790 --> 00:05:21,990
Et c'est pourquoi nous avons toujours une fonctionnalité appelée Promises, que nous pouvons utiliser.

80
00:05:22,010 --> 00:05:22,760
Aucune chance.

81
00:05:23,570 --> 00:05:27,710
Maintenant, nous utilisons souvent des packages tiers qui utilisent déjà des promesses pour nous.

82
00:05:28,400 --> 00:05:32,810
Donc, la syntaxe que je vais vous montrer maintenant est celle que vous devez rarement écrire vous-même.

83
00:05:33,260 --> 00:05:35,840
Cela sera fait par les packages en arrière-plan.

84
00:05:36,350 --> 00:05:39,680
Toujours agréable de savoir que vous créez une promesse.

85
00:05:40,900 --> 00:05:43,450
À l'intérieur de notre fonction de données extraites, vous êtes, disons.

86
00:05:44,800 --> 00:05:50,050
En le stockant dans une constante ou une variable, puis en utilisant le nouveau mot clé, que vous utilisez en JavaScript

87
00:05:50,050 --> 00:05:52,660
pour créer un nouvel objet basé sur un constructeur.

88
00:05:53,110 --> 00:05:56,860
Si les fonctions constructeur sont quelque chose qui ne vous dit rien.

89
00:05:57,190 --> 00:06:04,030
Découvrez quelques ressources d'introduction de base à JavaScript, car les fonctions de constructeur sont une fonctionnalité essentielle de

90
00:06:04,150 --> 00:06:04,930
JavaScript.

91
00:06:05,680 --> 00:06:11,650
Et ici, il a utilisé la fonction constructeur de promesse, qui est intégrée à JavaScript et pas de G. S ..

92
00:06:12,970 --> 00:06:18,660
Et prend en fait également un rappel, qui obtient des arguments, résout et rejette.

93
00:06:18,850 --> 00:06:21,640
Vous pouvez les nommer comme vous le souhaitez, mais ce sont deux fonctions.

94
00:06:22,180 --> 00:06:25,360
Et le premier complète la promesse avec succès.

95
00:06:25,450 --> 00:06:27,250
Il le résout avec succès.

96
00:06:27,640 --> 00:06:31,170
Le second le rejette, ce qui revient à lancer une erreur.

97
00:06:32,140 --> 00:06:34,870
Vous prenez ensuite votre code asynchrone et le déplacez là-dedans.

98
00:06:35,170 --> 00:06:37,840
Et encore une fois, vous devez rarement écrire cela par vous-même.

99
00:06:38,110 --> 00:06:43,420
La plupart des packages le font déjà pour vous et vous donnent la promesse finie, qui fait toute la magie dans

100
00:06:43,420 --> 00:06:45,160
les coulisses qui vous est cachée.

101
00:06:45,610 --> 00:06:46,690
Ici, nous le faisons manuellement.

102
00:06:47,200 --> 00:06:48,510
Alors maintenant, papa rappelle.

103
00:06:48,520 --> 00:06:51,690
Nous avons notre propre ensemble de fonctions.

104
00:06:51,710 --> 00:06:55,020
Le temps mort ne nous donne malheureusement pas de promesse.

105
00:06:55,030 --> 00:06:56,830
Ici, nous devons tous utiliser un rappel.

106
00:06:57,430 --> 00:06:58,300
Mais dans leur.

107
00:07:00,240 --> 00:07:04,860
Nous savons maintenant que nous n'utilisons plus aucune fonction de rappel que nous obtenons.

108
00:07:04,950 --> 00:07:07,190
Je ne reçois aucun argument ici et je récupère plus de données.

109
00:07:07,770 --> 00:07:09,900
Au lieu de cela, je résous ici.

110
00:07:10,230 --> 00:07:11,160
C'est fait, disons.

111
00:07:11,520 --> 00:07:16,670
J'ai donc réussi à résoudre la valeur maintenant dans les données de récupération.

112
00:07:17,100 --> 00:07:20,520
Après avoir défini la promesse, il suffit de la retourner.

113
00:07:21,060 --> 00:07:23,910
Et veuillez noter qu'il s'agit d'un code synchrone.

114
00:07:24,240 --> 00:07:30,480
Donc, en fait, cela sera retourné immédiatement après la création de la promesse avant de coder lors de l'exécution des

115
00:07:30,480 --> 00:07:35,640
promesses, ce qui se produira un peu plus tard lorsque nous appellerons réellement cette fonction.

116
00:07:35,820 --> 00:07:37,590
Et quand cette fois, Odyn a terminé.

117
00:07:38,250 --> 00:07:40,110
Nous retournons donc cette promesse ici.

118
00:07:40,590 --> 00:07:45,450
Et à l'endroit où nous appelons les données extraites, nous ne transmettons plus de rappel.

119
00:07:45,810 --> 00:07:51,900
Mais nous pouvons maintenant utiliser alors, qui est appelable sur une promesse et nous retournons une promesse.

120
00:07:53,490 --> 00:07:59,880
Et cela nous permet simplement de définir ici une fonction appelée ici, qui s'exécutera une fois la

121
00:07:59,910 --> 00:08:00,780
promesse résolue.

122
00:08:04,040 --> 00:08:05,610
Maintenant, quel est l'avantage de cela?

123
00:08:06,420 --> 00:08:08,430
Si nous avions plusieurs promesses de ce genre.

124
00:08:09,970 --> 00:08:16,540
Alors, disons à nouveau une extraction à froid des données et là, je n'ai pas besoin d'utiliser alors comme ça.

125
00:08:17,750 --> 00:08:20,640
Et donc, je finirais par imbriqué.

126
00:08:22,110 --> 00:08:23,210
Rappels à nouveau.

127
00:08:24,280 --> 00:08:30,820
Mais à la place, à l'intérieur d'une promesse, puis le bloc fait partie d'une promesse.

128
00:08:31,180 --> 00:08:39,220
Je peux simplement retourner une nouvelle promesse, puis ajouter la prochaine puis bloquer après la précédente.

129
00:08:41,020 --> 00:08:41,650
Comme ça.

130
00:08:42,310 --> 00:08:44,740
Alors maintenant, nous avons une chaîne, puis des blocs.

131
00:08:45,160 --> 00:08:50,290
Celui-ci est appelé à la première promesse, puis dans le bloc alors je retourne une autre promesse.

132
00:08:50,680 --> 00:08:54,120
Et même si cela ne nous donnait pas une promesse incitative.

133
00:08:54,280 --> 00:08:58,780
Bloquer ensuite le retourner le convertirait en une promesse qui se résout instantanément.

134
00:08:59,350 --> 00:09:03,700
Et puis nous ajoutons un autre bloc puis, qui fait maintenant référence à cette promesse ici.

135
00:09:04,410 --> 00:09:08,680
Et cela est plus lisible que d'avoir des rappels infiniment imbriqués.

136
00:09:09,460 --> 00:09:11,020
Alors maintenant, si je cours que nous voyons.

137
00:09:11,050 --> 00:09:11,350
Bonjour.

138
00:09:11,350 --> 00:09:11,770
Salut.

139
00:09:12,160 --> 00:09:13,150
Le chronomètre est terminé.

140
00:09:13,690 --> 00:09:14,410
Nous avons fait.

141
00:09:14,680 --> 00:09:17,500
Et nous le voyons recommencer car j'appelle deux fois la récupération de données.

142
00:09:18,490 --> 00:09:22,330
Il pourrait donc être difficile d'envelopper votre tête pour la première fois.

143
00:09:22,690 --> 00:09:23,590
Nous allons le réutiliser.

144
00:09:23,590 --> 00:09:26,050
Frappé ce cours et qu'il deviendra plus clair.

145
00:09:26,380 --> 00:09:35,140
Encore une fois, ce code n'est généralement pas écrit par vous, mais c'est un concept crucial qui rend notre code asynchrone

146
00:09:35,350 --> 00:09:36,640
plus gérable.

147
00:09:37,420 --> 00:09:40,420
Il existe toujours une autre façon de gérer cette asynchronisation.

148
00:09:40,460 --> 00:09:46,330
Attendez deux mots-clés spéciaux que vous pouvez utiliser en JavaScript moderne, et j'aurai une section séparée à ce sujet vers

149
00:09:46,330 --> 00:09:47,830
la fin du cours.

150
00:09:48,130 --> 00:09:53,590
Je veux l'introduire ici car cela peut être plus déroutant que cette syntaxe ici.

151
00:09:53,860 --> 00:09:55,300
Et je veux m'en tenir à celui-ci.

152
00:09:55,320 --> 00:09:58,750
N'introduisez pas trop de nouvelles fonctionnalités en même temps ici.

153
00:09:59,680 --> 00:10:02,290
Le code asynchrone est cependant quelque chose que vous devez comprendre.

154
00:10:02,530 --> 00:10:08,230
Et si ce n'est pas totalement clair maintenant, c'est très bien, bien que vous le verrez pour un cours

155
00:10:08,290 --> 00:10:11,510
modifié, car nous avons beaucoup d'événements asynchrones en aucune chance.

156
00:10:12,130 --> 00:10:14,710
Et je vais l'expliquer plusieurs fois.

157
00:10:14,950 --> 00:10:17,080
Je vais également expliquer à nouveau les promesses.

158
00:10:17,380 --> 00:10:23,380
Je veux simplement m'assurer que vous l'avez déjà vu et que vous avez ensuite une chance de comprendre cela, comment

159
00:10:23,380 --> 00:10:25,870
cela fonctionne et comment nous y faisons face.