1
00:00:03,830 --> 00:00:09,840
Após a breve introdução às promessas na palestra anterior,

2
00:00:09,840 --> 00:00:12,270
vamos passar para o nosso próximo exercício onde vamos

3
00:00:12,270 --> 00:00:15,235
fazer uso de promessas dentro da nossa aplicação angular.

4
00:00:15,235 --> 00:00:24,060
Em particular, as promessas são uma forma essencial de lidar com os atrasos, especialmente quando

5
00:00:24,060 --> 00:00:27,885
você precisa acessar e obter os dados de um servidor

6
00:00:27,885 --> 00:00:32,915
antes de ser entregue ao componente através do seu serviço.

7
00:00:32,915 --> 00:00:36,440
Assim, os serviços muitas vezes retornam promessas para

8
00:00:36,440 --> 00:00:41,050
os componentes quando os componentes chamam os métodos de serviço,

9
00:00:41,050 --> 00:00:43,490
e depois quando a promessa

10
00:00:43,490 --> 00:00:47,385
resolve, então os componentes terão os resultados disponíveis para eles.

11
00:00:47,385 --> 00:00:51,920
Vamos reconfigurar os serviços que temos dentro

12
00:00:51,920 --> 00:00:55,970
nossa aplicação angular para retornar

13
00:00:55,970 --> 00:00:58,550
promessas e, em seguida, vamos reconfigurar

14
00:00:58,550 --> 00:01:02,390
nossos componentes para ser capaz de lidar com as promessas.

15
00:01:02,390 --> 00:01:10,925
Nosso primeiro passo neste exercício é reconfigurar todos os serviços para retornar promessas.

16
00:01:10,925 --> 00:01:14,704
Assim, cada um dos métodos dentro do nosso serviço em vez de retornar

17
00:01:14,704 --> 00:01:18,500
o valor imediatamente ele irá retornar promessas.

18
00:01:18,500 --> 00:01:21,685
Então, como configuramos nossos serviços para retornar promessas?

19
00:01:21,685 --> 00:01:26,635
Então, indo para o arquivo dishservice.ts,

20
00:01:26,635 --> 00:01:35,390
o método getDates aqui retornará uma promessa em vez da matriz dish.

21
00:01:35,390 --> 00:01:38,840
Então, nós configuramos o método getDish para retornar

22
00:01:38,840 --> 00:01:43,695
promessa, colocando este objeto prato dentro de uma promessa.

23
00:01:43,695 --> 00:01:49,235
O que isso significa é que se a promessa resolver, então o resultado entregue

24
00:01:49,235 --> 00:01:55,435
pela promessa GetDish seria uma matriz de pratos.

25
00:01:55,435 --> 00:01:59,164
Então, dentro do seu componente

26
00:01:59,164 --> 00:02:03,290
você receberá a matriz de pratos se a promessa resultar corretamente.

27
00:02:03,290 --> 00:02:07,845
Agora que configuramos o GetDistes para retornar uma promessa,

28
00:02:07,845 --> 00:02:10,370
precisamos reconfigurar o código para

29
00:02:10,370 --> 00:02:14,735
que esta matriz de pratos seja retornada como parte de uma promessa.

30
00:02:14,735 --> 00:02:18,770
Agora, já que temos o resultado já disponível para nós,

31
00:02:18,770 --> 00:02:22,190
Eu vou usar o método de atalho de

32
00:02:22,190 --> 00:02:27,875
retornando a promessa resolvendo a promessa imediatamente.

33
00:02:27,875 --> 00:02:34,720
Agora, obviamente, isso funciona bem se você tiver os resultados imediatamente disponíveis com você.

34
00:02:34,720 --> 00:02:38,120
Mas, quando você reconfigurar seu serviço para

35
00:02:38,120 --> 00:02:41,885
ser capaz de ir e buscar esses dados de um servidor,

36
00:02:41,885 --> 00:02:46,670
então teremos que reescrever este código para lidar com o fato de que

37
00:02:46,670 --> 00:02:49,310
o serviço não irá retornar o resultado

38
00:02:49,310 --> 00:02:52,875
imediatamente em vez disso você terá que esperar por algum tempo.

39
00:02:52,875 --> 00:02:54,430
No próximo exercício,

40
00:02:54,430 --> 00:03:03,290
vamos simular o atraso usando um método JavaScript para que ele lhe dê

41
00:03:03,290 --> 00:03:12,875
uma sensação do que significa lidar com atrasos em receber um resultado de uma promessa.

42
00:03:12,875 --> 00:03:16,865
Agora que configuramos o GetDistes para retornar a promessa,

43
00:03:16,865 --> 00:03:20,770
da mesma forma, vamos reconfigurar os dois métodos restantes.

44
00:03:20,770 --> 00:03:24,890
Então eu vou copiar esta promessa de

45
00:03:24,890 --> 00:03:30,430
aqui e, em seguida, simplesmente anexar isso para os dois restantes lá,

46
00:03:30,430 --> 00:03:34,220
para que eu vou convertê-los também para retornar

47
00:03:34,220 --> 00:03:37,100
promessas e, em seguida, é claro, o que nós

48
00:03:37,100 --> 00:03:40,225
temos aqui deve ser fechado dentro da promessa resolver.

49
00:03:40,225 --> 00:03:43,129
Então eu vou apenas copiar a promessa resolve

50
00:03:43,129 --> 00:03:50,675
e colocar isso dentro da resolução aqui.

51
00:03:50,675 --> 00:04:00,080
Da mesma forma, para o prato em destaque vou colocar isso dentro da promessa resolver.

52
00:04:00,080 --> 00:04:05,005
Agora, meu serviço de prato está configurado para retornar promessas.

53
00:04:05,005 --> 00:04:07,610
Obviamente, isso também significa que eu preciso ir para

54
00:04:07,610 --> 00:04:11,360
meus componentes e, em seguida, reconfigurar os componentes para ser capaz de lidar

55
00:04:11,360 --> 00:04:14,090
com o fato de que eles não estão recebendo os dados

56
00:04:14,090 --> 00:04:17,720
imediatamente em vez disso eles estão recebendo uma promessa e então eles

57
00:04:17,720 --> 00:04:21,200
terão que implementar o método então dentro

58
00:04:21,200 --> 00:04:25,550
que a promessa quando resultar irá entregar os dados para você.

59
00:04:25,550 --> 00:04:28,639
Então, agora que configuramos o serviço de prato,

60
00:04:28,639 --> 00:04:35,020
sabemos um lugar onde o serviço está sendo usado ativamente e que é componente de menu.

61
00:04:35,020 --> 00:04:37,730
Então deixe-me mostrar-lhe como vamos reconfigurar

62
00:04:37,730 --> 00:04:40,640
o componente para ser capaz de lidar com a promessa.

63
00:04:40,640 --> 00:04:44,420
Então, quando você vai para o menucomponent.ts você vai imediatamente

64
00:04:44,420 --> 00:04:49,984
notar que há uma linha vermelha rabugenta sob pratos porque,

65
00:04:49,984 --> 00:04:51,880
como você vê, agora,

66
00:04:51,880 --> 00:04:58,875
o DishService.GetDates está devolvendo uma promessa e então aqui você tem,

67
00:04:58,875 --> 00:05:05,660
a promessa sendo atribuída a um objeto de matriz de prato e isso não é Correto.

68
00:05:05,660 --> 00:05:08,005
Como reconfiguramos esse código?

69
00:05:08,005 --> 00:05:09,559
Então, como mencionei,

70
00:05:09,559 --> 00:05:11,440
quando reconfiguramos o código,

71
00:05:11,440 --> 00:05:16,100
precisamos implementar o então e o catch para o getDistes.

72
00:05:16,100 --> 00:05:20,820
Então, deixe-me ir em frente e implementar apenas o então neste momento,

73
00:05:20,820 --> 00:05:27,360
para o método getDistes porque o catch pode ser implementado mais tarde.

74
00:05:27,360 --> 00:05:31,190
Agora sabemos que a promessa sempre resolverá corretamente,

75
00:05:31,190 --> 00:05:33,665
então vamos implementar o método então aqui,

76
00:05:33,665 --> 00:05:36,645
e então, dentro do método então,

77
00:05:36,645 --> 00:05:46,650
Eu vou receber o objeto pratos chegando quando a promessa resolver.

78
00:05:46,650 --> 00:05:50,400
E quando isso é pratos objeto vem como um parâmetro,

79
00:05:50,400 --> 00:05:53,190
então você vê que eu estou escrevendo uma função de seta aqui,

80
00:05:53,190 --> 00:06:03,120
Eu só vou cortar isso e incluir isso aí mesmo.

81
00:06:03,170 --> 00:06:09,510
Lá vai você. É assim que seu componente agora pode

82
00:06:09,510 --> 00:06:16,775
assumir a promessa e, em seguida, recuperar os resultados quando a promessa é resolvida.

83
00:06:16,775 --> 00:06:21,575
Você pode ver que temos o DishService GetDishService e, em seguida, o método

84
00:06:21,575 --> 00:06:26,560
mudar para ele e pelo qual quando o então é chamado,

85
00:06:26,560 --> 00:06:28,880
quando a promessa resolve do outro lado,

86
00:06:28,880 --> 00:06:33,635
então os pratos serão entregues a você porque o método getDishDishES

87
00:06:33,635 --> 00:06:38,450
está retornando uma promessa, mas o resultado será uma matriz de pratos.

88
00:06:38,450 --> 00:06:42,320
Essa matriz de prato vem como um parâmetro aqui então eu estou escrevendo uma função de seta

89
00:06:42,320 --> 00:06:46,880
aqui onde eu estou atribuindo que este pratos para pratos.

90
00:06:46,880 --> 00:06:49,880
Então, quando esta promessa resolver, em seguida, os pratos serão

91
00:06:49,880 --> 00:06:53,930
ser atribuído a este prato. É isso.

92
00:06:53,930 --> 00:06:57,455
Agora meu componente de menu está pronto para lidar com a promessa.

93
00:06:57,455 --> 00:07:01,715
Claro, para lidar com o erro, você também precisa

94
00:07:01,715 --> 00:07:06,130
encadear o método catch no método getDistes.

95
00:07:06,130 --> 00:07:08,390
Então, o então e o catch são métodos que

96
00:07:08,390 --> 00:07:11,540
a promessa fornece para você e então você implementa isso e dentro

97
00:07:11,540 --> 00:07:16,790
que você fornecerá a função que lida com

98
00:07:16,790 --> 00:07:23,355
a situação quando a promessa resolve ou quando a promessa rejeita com um erro.

99
00:07:23,355 --> 00:07:28,850
Agora, da mesma forma, devemos reconfigurar o método de detalhe do prato

100
00:07:28,850 --> 00:07:33,890
e também o componente doméstico para lidar com o fato de que

101
00:07:33,890 --> 00:07:44,520
o DishService agora está entregando promessas em vez de entregar os valores imediatamente.

102
00:07:44,520 --> 00:07:46,470
Enquanto estamos nisso,

103
00:07:46,470 --> 00:07:51,305
podemos muito bem reconfigurar tanto o líder quanto o serviço de promoção também.

104
00:07:51,305 --> 00:07:55,100
Então vou deixá-lo como um exercício para você completar,

105
00:07:55,120 --> 00:07:59,930
atualizando tanto o serviço líder quanto o serviço de promoção para poder

106
00:07:59,930 --> 00:08:05,180
entregar as promessas correspondentes.

107
00:08:05,180 --> 00:08:09,379
Além disso, você terá que reconfigurar

108
00:08:09,379 --> 00:08:18,785
o código de script do tipo de componente no componente about no componente de detalhe do prato,

109
00:08:18,785 --> 00:08:23,360
no componente home para lidar com o fato de que você está

110
00:08:23,360 --> 00:08:27,950
agora recebendo promessas em vez dos resultados reais.

111
00:08:27,950 --> 00:08:34,005
Então eu vou deixar você completar essa parte em vez de ilustrar tudo isso em detalhes,

112
00:08:34,005 --> 00:08:37,620
Eu lhe mostrei um passo com o componente detalhe prato.

113
00:08:37,620 --> 00:08:42,380
Conclua as etapas com o líder e o serviço de promoção,

114
00:08:42,380 --> 00:08:45,890
e configure os componentes correspondentes de acordo.

115
00:08:45,890 --> 00:08:50,275
Deixe-me orientá-lo rapidamente através das atualizações que você precisa concluir.

116
00:08:50,275 --> 00:08:56,365
Então, como você vê o serviço de líderes Eu já atualizei com a promessa.

117
00:08:56,365 --> 00:08:57,585
Como você pode ver aqui,

118
00:08:57,585 --> 00:09:00,410
todos os métodos agora foram atualizados para retornar

119
00:09:00,410 --> 00:09:04,800
promessas assim como fizemos com o DishService.

120
00:09:04,800 --> 00:09:08,420
Da mesma forma, os serviços de promoção também atualizaram para

121
00:09:08,420 --> 00:09:12,660
promessas de retorno de todos os métodos lá.

122
00:09:12,660 --> 00:09:16,560
Agora, indo para o componente sobre,

123
00:09:16,560 --> 00:09:22,160
você veria que no componente sobre também temos configurado para

124
00:09:22,160 --> 00:09:28,790
receber os valores dentro do então da promessa lá.

125
00:09:28,790 --> 00:09:33,560
Da mesma forma, no componente de detalhe do prato você notaria que eu tenho

126
00:09:33,560 --> 00:09:39,765
reconfigurou isso para lidar com a promessa lá.

127
00:09:39,765 --> 00:09:43,495
Da mesma forma, no componente home,

128
00:09:43,495 --> 00:09:46,190
você notaria que dentro do componente home

129
00:09:46,190 --> 00:09:51,740
todos os três métodos aqui: getFeaturedDish,

130
00:09:51,740 --> 00:09:54,650
FeaturedPromotion e featuredLeader foram atualizados,

131
00:09:54,650 --> 00:09:59,330
com o então anexado a cada um deles para lidar com a promessa.

132
00:09:59,330 --> 00:10:06,355
O código é muito parecido com o que eu ilustrei com o componente de menu.

133
00:10:06,355 --> 00:10:08,570
Uma vez que você concluir isso,

134
00:10:08,570 --> 00:10:12,995
vamos dar uma olhada rápida em nosso aplicativo.

135
00:10:12,995 --> 00:10:15,665
Indo para o nosso aplicativo no navegador,

136
00:10:15,665 --> 00:10:18,870
você não verá nenhuma diferença no aplicativo.

137
00:10:18,870 --> 00:10:21,409
Ele funciona exatamente da mesma maneira que antes,

138
00:10:21,409 --> 00:10:26,385
exceto agora ele está usando promessas quando

139
00:10:26,385 --> 00:10:29,615
os serviços são implementados e seus componentes

140
00:10:29,615 --> 00:10:33,080
estão lidando com as promessas quando eles são resolvidos.

141
00:10:33,080 --> 00:10:36,530
Assim, o componente de menu funcionando corretamente e

142
00:10:36,530 --> 00:10:40,440
também o componente de detalhe prato também funciona corretamente.

143
00:10:40,440 --> 00:10:43,150
Com isso, completamos este exercício.

144
00:10:43,150 --> 00:10:49,130
Neste exercício, vimos como conseguimos atualizar nossos serviços para

145
00:10:49,130 --> 00:10:55,990
entregar promessas e também atualizamos nossos componentes para podermos lidar com promessas.

146
00:10:55,990 --> 00:10:58,710
Isso conclui este exercício.

147
00:10:58,710 --> 00:11:06,300
Este é um bom momento para você fazer um commit git com a mensagem 'Promessa parte um'.