1
00:00:01,340 --> 00:00:03,150
‫Instructeur : Parlons

2
00:00:03,150 --> 00:00:06,643
‫maintenant d'une incroyable fonctionnalité JavaScript asynchrone appelée async/await.

3
00:00:08,040 --> 00:00:11,023
‫Donc les promesses ont déjà beaucoup amélioré notre code,

4
00:00:11,023 --> 00:00:13,340
‫mais nous pouvons encore faire mieux.

5
00:00:13,340 --> 00:00:16,400
‫Ainsi, au lieu de consommer des promesses, avec la méthode then,

6
00:00:16,400 --> 00:00:19,380
‫qui nous oblige toujours à utiliser toutes ces fonctions de rappel,

7
00:00:19,380 --> 00:00:21,440
‫nous pouvons utiliser quelque chose appelé async/await.

8
00:00:21,440 --> 00:00:25,040
‫Il s'agit d'une nouvelle fonctionnalité introduite dans JavaScript dans ES8,

9
00:00:25,040 --> 00:00:27,710
‫qui nous facilitera grandement la vie.

10
00:00:27,710 --> 00:00:29,370
‫Donc, généralement, lorsque nous

11
00:00:29,370 --> 00:00:32,020
‫écrivons du code, nous allons consommer des promesses tout

12
00:00:32,020 --> 00:00:34,380
‫le temps, mais généralement pas autant les produire.

13
00:00:34,380 --> 00:00:38,510
‫Et donc, async/wait rend cela beaucoup plus facile à faire.

14
00:00:38,510 --> 00:00:40,070
‫Maintenant, pour utiliser async/await,

15
00:00:40,070 --> 00:00:42,623
‫nous devons créer une fonction dite async.

16
00:00:44,610 --> 00:00:47,570
‫Alors commentons cette partie ici, afin que nous ne

17
00:00:47,570 --> 00:00:50,520
‫la perdions pas entièrement, au cas où vous voudriez

18
00:00:50,520 --> 00:00:53,170
‫la garder ici comme référence ou quelque chose.

19
00:00:55,240 --> 00:01:00,000
‫GetDogPic est donc la fonction que nous allons écrire.

20
00:01:00,000 --> 00:01:02,210
‫Et maintenant, nous devons marquer cette

21
00:01:02,210 --> 00:01:04,350
‫fonction comme une fonction asynchrone.

22
00:01:04,350 --> 00:01:05,883
‫Nous utilisons donc async

23
00:01:07,840 --> 00:01:11,390
‫ici, puis créons la fonction comme nous le faisons normalement.

24
00:01:11,390 --> 00:01:14,260
‫Donc, ce mot-clé async ici signifie

25
00:01:14,260 --> 00:01:17,430
‫simplement qu'il s'agit d'une fonction spéciale asynchrone.

26
00:01:17,430 --> 00:01:19,780
‫Donc, fondamentalement, celui qui continue de s'exécuter en

27
00:01:19,780 --> 00:01:22,350
‫arrière-plan tout en exécutant le code qu'il contient, tandis

28
00:01:22,350 --> 00:01:25,540
‫que le reste du code continue de s'exécuter dans la boucle d'événements.

29
00:01:25,540 --> 00:01:28,680
‫Donc, ces fonctions asynchrones effectueront un travail

30
00:01:28,680 --> 00:01:31,873
‫asynchrone sans jamais bloquer la boucle d'événements, d'accord ?

31
00:01:31,873 --> 00:01:33,980
‫Cette fonction async renverra également

32
00:01:33,980 --> 00:01:35,490
‫automatiquement une promesse.

33
00:01:35,490 --> 00:01:37,723
‫Mais plus à ce sujet un peu plus tard dans cette vidéo.

34
00:01:38,840 --> 00:01:40,610
‫Pour l'instant, ce qu'il est vraiment

35
00:01:40,610 --> 00:01:44,200
‫important de savoir, c'est qu'à l'intérieur d'une fonction asynchrone, nous pouvons toujours

36
00:01:44,200 --> 00:01:46,420
‫avoir une ou plusieurs expressions d'attente et

37
00:01:46,420 --> 00:01:48,000
‫c'est ainsi qu'elles fonctionnent.

38
00:01:48,000 --> 00:01:50,453
‫Nous utilisons donc wait puis la promesse ici.

39
00:01:51,540 --> 00:01:55,690
‫Alors commençons par celui-ci, d'accord ?

40
00:01:55,690 --> 00:02:00,320
‫Et puis nous pouvons enregistrer le résultat de cela dans une variable.

41
00:02:00,320 --> 00:02:01,800
‫Dans ce cas, les données.

42
00:02:01,800 --> 00:02:05,470
‫D'accord, et ce sera alors la même chose que

43
00:02:05,470 --> 00:02:08,080
‫d'avoir ce morceau de code.

44
00:02:08,080 --> 00:02:10,190
‫Voyons donc ce qui se passe ici.

45
00:02:10,190 --> 00:02:13,060
‫Donc, cette attente ici arrêtera essentiellement l'exécution

46
00:02:13,060 --> 00:02:17,680
‫du code à ce stade jusqu'à ce que cette promesse soit résolue.

47
00:02:17,680 --> 00:02:19,960
‫Maintenant, si la promesse est remplie,

48
00:02:19,960 --> 00:02:22,490
‫ce qui signifie qu'elle a réussi,

49
00:02:22,490 --> 00:02:24,660
‫alors la valeur de

50
00:02:24,660 --> 00:02:27,540
‫l'expression d'attente est la valeur résolue de la

51
00:02:27,540 --> 00:02:32,280
‫promesse, qui est ensuite finalement attribuée à la variable de données, d'accord ?

52
00:02:32,280 --> 00:02:34,500
‫Donc, au lieu d'avoir la promesse

53
00:02:34,500 --> 00:02:36,300
‫puis la méthode then

54
00:02:36,300 --> 00:02:39,120
‫dessus, qui obtient ensuite les données comme argument.

55
00:02:39,120 --> 00:02:41,560
‫Avec async/wait c'est beaucoup plus simple.

56
00:02:41,560 --> 00:02:45,400
‫Tout ce que nous faisons est essentiellement d'arrêter le code de

57
00:02:45,400 --> 00:02:47,960
‫s'exécuter à cette promesse ici, d'attendre

58
00:02:47,960 --> 00:02:52,330
‫qu'il revienne avec sa valeur, puis de stocker cette valeur dans une variable.

59
00:02:52,330 --> 00:02:54,230
‫Et comme ça, le code

60
00:02:54,230 --> 00:02:56,490
‫est encore plus facile à comprendre qu'avant.

61
00:02:56,490 --> 00:02:58,600
‫Et c'est tout l'intérêt

62
00:02:58,600 --> 00:03:02,220
‫d'async/wait : c'est pour que notre code ressemble davantage

63
00:03:02,220 --> 00:03:04,910
‫à du code synchrone tout en étant

64
00:03:04,910 --> 00:03:08,200
‫en fait toujours asynchrone dans les coulisses, d'accord ?

65
00:03:08,200 --> 00:03:12,810
‫Alors continuons avec ça et copions simplement les morceaux de

66
00:03:12,810 --> 00:03:17,060
‫cet exemple avant dans le nouveau, d'accord ?

67
00:03:17,060 --> 00:03:22,010
‫Donc avant, nous avions notre Promesse, puis notre gestionnaire d'alors, puis nous avons

68
00:03:22,010 --> 00:03:24,750
‫enregistré les données sur la console.

69
00:03:24,750 --> 00:03:26,380
‫C'est donc exactement ce

70
00:03:26,380 --> 00:03:29,160
‫que nous avons, simplement d'une manière différente ici.

71
00:03:29,160 --> 00:03:31,240
‫Nous obtenons donc nos données stockées dans la

72
00:03:31,240 --> 00:03:33,110
‫variable, puis nous les enregistrons ici.

73
00:03:33,110 --> 00:03:37,210
‫Ensuite, nous obtenons l'image du chien à partir de l'API.

74
00:03:37,210 --> 00:03:42,210
‫Nous avons donc la variable res, ce sera donc celle-ci.

75
00:03:42,260 --> 00:03:44,570
‫Encore une fois, le résultat du

76
00:03:46,660 --> 00:03:50,693
‫gestionnaire d'alors et nous attendons cette promesse ici pour revenir avec les données.

77
00:03:53,250 --> 00:03:55,443
‫J'espère que cela commence à avoir du sens maintenant.

78
00:04:00,180 --> 00:04:04,180
‫Donc, après cela, nous enregistrons cela dans la console, donc le

79
00:04:04,180 --> 00:04:06,440
‫résultat de cet appel d'API.

80
00:04:06,440 --> 00:04:09,250
‫Et enfin, nous utilisons notre dernière

81
00:04:09,250 --> 00:04:12,430
‫promesse pour écrire cette chaîne dans un fichier.

82
00:04:12,430 --> 00:04:15,260
‫C'est donc cette Promesse ici,

83
00:04:15,260 --> 00:04:19,110
‫et celle-ci ne résout aucune valeur significative.

84
00:04:19,110 --> 00:04:22,570
‫Et donc nous n'avons même pas besoin de stocker quoi que ce soit dans une variable.

85
00:04:22,570 --> 00:04:25,050
‫Tout ce que nous faisons est d'arrêter le

86
00:04:25,050 --> 00:04:28,080
‫code ici jusqu'à ce que ce processus d'écriture soit terminé.

87
00:04:28,080 --> 00:04:30,580
‫Et puis connectez-vous à la console

88
00:04:32,690 --> 00:04:34,003
‫cette chaîne.

89
00:04:35,561 --> 00:04:39,270
‫Donc, si vous comparez ce code avec ce que nous avions

90
00:04:39,270 --> 00:04:41,640
‫auparavant, cela a l'air beaucoup plus

91
00:04:41,640 --> 00:04:45,170
‫propre et beaucoup plus facile à comprendre, n'est-ce pas ?

92
00:04:45,170 --> 00:04:47,300
‫Maintenant, pour que cela fonctionne, tout

93
00:04:47,300 --> 00:04:50,520
‫ce que nous avons à faire est d'appeler cette fonction ici.

94
00:04:50,520 --> 00:04:54,080
‫Donnez-lui une sauvegarde et en effet, cela fonctionne toujours.

95
00:04:54,080 --> 00:04:56,700
‫Donc nous obtenons toujours notre résultat.

96
00:04:56,700 --> 00:04:58,830
‫Tout fonctionne toujours de la même manière.

97
00:04:58,830 --> 00:05:00,570
‫Alors c'est incroyable, non ?

98
00:05:00,570 --> 00:05:02,560
‫Juste une dernière chose que nous devons faire

99
00:05:02,560 --> 00:05:04,170
‫ici est notre gestion des erreurs.

100
00:05:04,170 --> 00:05:08,080
‫Parce que pour le moment, nous ne traitons les erreurs nulle part, n'est-ce pas ?

101
00:05:08,080 --> 00:05:10,750
‫Donc ici, nous avons utilisé la méthode catch, mais

102
00:05:10,750 --> 00:05:12,650
‫pour le moment, nous ne

103
00:05:12,650 --> 00:05:15,260
‫pouvons pas vraiment l'attacher n'importe où, n'est-ce pas ?

104
00:05:15,260 --> 00:05:16,920
‫Donc, à la place, ce

105
00:05:16,920 --> 00:05:20,130
‫que nous faisons ici est d'utiliser quelque chose appelé try-catch.

106
00:05:20,130 --> 00:05:22,860
‫Et en fait, cela n'a rien à voir avec

107
00:05:22,860 --> 00:05:25,180
‫async/wait, c'est une fonctionnalité JavaScript standard.

108
00:05:25,180 --> 00:05:26,853
‫Alors laissez-moi vous montrer comment cela fonctionne.

109
00:05:28,130 --> 00:05:32,593
‫Donc, nous encapsulons essentiellement tout notre code dans un bloc try.

110
00:05:34,150 --> 00:05:35,500
‫Donc, fondamentalement, le

111
00:05:35,500 --> 00:05:38,340
‫code essaiera d'exécuter tout ce qui se trouve ici.

112
00:05:38,340 --> 00:05:41,240
‫Et puis on a aussi besoin d'un bloc catch,

113
00:05:41,240 --> 00:05:44,780
‫qui aura accès à une erreur s'il y en a une.

114
00:05:44,780 --> 00:05:47,950
‫Donc s'il se produit une erreur dans ce bloc ici,

115
00:05:47,950 --> 00:05:49,960
‫il sortira immédiatement de ce

116
00:05:49,960 --> 00:05:52,060
‫bloc, ce bloc d'essai ici, donc celui-ci.

117
00:05:52,060 --> 00:05:55,070
‫Et allez immédiatement dans le bloc catch, et nous

118
00:05:55,070 --> 00:05:57,290
‫donnera accès à l'erreur qui s'est

119
00:05:57,290 --> 00:05:59,323
‫produite dans le bloc try.

120
00:06:00,760 --> 00:06:04,227
‫Alors maintenant, tout ce que nous avons à faire est de prendre ce morceau

121
00:06:04,227 --> 00:06:06,510
‫de code pour ce journal de console, de

122
00:06:06,510 --> 00:06:09,163
‫le mettre ici, de le sauvegarder et maintenant cela fonctionne.

123
00:06:10,320 --> 00:06:11,460
‫Juste pour provoquer

124
00:06:11,460 --> 00:06:14,120
‫une erreur maintenant, modifions celle-ci encore une fois.

125
00:06:14,120 --> 00:06:16,970
‫Et effectivement, je n'ai pas pu trouver ce fichier.

126
00:06:16,970 --> 00:06:20,040
‫Donc cette promesse ici rejetée, n'est-ce pas ?

127
00:06:20,040 --> 00:06:23,290
‫Donc, cette promesse a été rejetée et il y a donc

128
00:06:23,290 --> 00:06:26,960
‫eu une erreur et elle est immédiatement entrée dans le bloc catch, puis

129
00:06:26,960 --> 00:06:29,253
‫a enregistré cette erreur dans la console.

130
00:06:31,610 --> 00:06:32,443
‫Remettre.

131
00:06:34,040 --> 00:06:36,930
‫Et maintenant en effet, cela fonctionne à nouveau.

132
00:06:36,930 --> 00:06:39,930
‫D'accord, c'est ainsi que fonctionne async/wait.

133
00:06:39,930 --> 00:06:42,420
‫Alors rappelez-vous que nous ne pouvons utiliser wait que

134
00:06:42,420 --> 00:06:44,450
‫si c'est dans une fonction asynchrone.

135
00:06:44,450 --> 00:06:46,880
‫C'est pourquoi il est toujours appelé ensemble,

136
00:06:46,880 --> 00:06:49,270
‫donc toujours une barre oblique asynchrone.

137
00:06:49,270 --> 00:06:53,070
‫Parce que ces deux caractéristiques, elles sont étroitement liées.

138
00:06:53,070 --> 00:06:54,835
‫Donc, pour récapituler

139
00:06:54,835 --> 00:06:57,260
‫rapidement, async/await nous permet au lieu

140
00:06:57,260 --> 00:06:59,270
‫d'avoir tous ces gestionnaires

141
00:06:59,270 --> 00:07:01,630
‫avec ces fonctions de rappel.

142
00:07:01,630 --> 00:07:05,590
‫Cela nous permet de rendre notre code plus synchrone.

143
00:07:05,590 --> 00:07:09,180
‫Donc tout ce que nous faisons est d'utiliser le

144
00:07:09,180 --> 00:07:11,340
‫mot-clé wait devant notre Promesse.

145
00:07:11,340 --> 00:07:13,380
‫Et puis il attendra que cette

146
00:07:13,380 --> 00:07:15,400
‫Promesse revienne avec son résultat.

147
00:07:15,400 --> 00:07:17,000
‫N'oubliez pas que c'est ce

148
00:07:17,000 --> 00:07:19,360
‫que nous appelons du sucre syntaxique pour les promesses.

149
00:07:19,360 --> 00:07:22,650
‫Donc, cela rend simplement les promesses plus belles, mais dans les

150
00:07:22,650 --> 00:07:25,610
‫coulisses, tout fonctionne toujours de la même manière avec la

151
00:07:25,610 --> 00:07:28,470
‫logique de promesse que je vous ai expliquée auparavant.

152
00:07:28,470 --> 00:07:30,240
‫Encore une fois, c'est juste pour

153
00:07:30,240 --> 00:07:32,750
‫nous faciliter la vie lors du codage et pour

154
00:07:32,750 --> 00:07:35,520
‫que notre code ressemble un peu plus à du code synchrone.

155
00:07:35,520 --> 00:07:37,430
‫C'est ainsi que nous implémentons async/wait.

156
00:07:37,430 --> 00:07:38,810
‫Dans la vidéo suivante,

157
00:07:38,810 --> 00:07:42,863
‫nous en apprendrons un peu plus sur le fonctionnement réel des fonctions asynchrones.