1
00:00:03,630 --> 00:00:08,225
Como já aprendemos na lição anterior, o protocolo HTTP

2
00:00:08,225 --> 00:00:15,020
nos permite comunicar entre um cliente e um servidor.

3
00:00:15,020 --> 00:00:19,770
Já vimos alguns detalhes sobre o protocolo HTTP na lição anterior.

4
00:00:19,770 --> 00:00:25,440
Nesta lição, vamos explorar o suporte Angular para HTTP.

5
00:00:25,440 --> 00:00:29,810
Angular suporta HTTP através do cliente Angular HTTP.

6
00:00:29,810 --> 00:00:32,700
Vamos olhar para como podemos aproveitar

7
00:00:32,700 --> 00:00:36,725
o cliente HTTP Angular para comunicação cliente-servidor,

8
00:00:36,725 --> 00:00:38,925
em nossa aplicação Angular.

9
00:00:38,925 --> 00:00:42,045
Os dois exercícios que seguem esta palestra,

10
00:00:42,045 --> 00:00:45,650
vamos explorar o uso prático de

11
00:00:45,650 --> 00:00:49,660
o cliente HTTP Angular dentro da nossa aplicação Angular.

12
00:00:49,660 --> 00:00:56,020
Vamos olhar um pouco dos detalhes do cliente HTTP nesta palestra.

13
00:00:56,020 --> 00:00:58,415
Como seria de esperar,

14
00:00:58,415 --> 00:01:02,975
Angular aproveita o protocolo HTTP para permitir a comunicação entre

15
00:01:02,975 --> 00:01:08,000
nosso cliente Angular e o servidor baseado em HTTP.

16
00:01:08,000 --> 00:01:11,820
A maioria dos navegadores modernos, normalmente usados para suportar

17
00:01:11,820 --> 00:01:17,820
a maneira XMLHttpRequest ou XHR de se comunicar com o servidor.

18
00:01:17,820 --> 00:01:22,519
Cada vez mais, os navegadores estão adotando a API Fetch,

19
00:01:22,519 --> 00:01:26,900
que é um substituto moderno para XMLHttpRequest como

20
00:01:26,900 --> 00:01:32,225
uma maneira de fornecer comunicação entre o navegador e o servidor.

21
00:01:32,225 --> 00:01:39,960
Angular aproveita isso para se comunicar com o servidor usando o cliente HTTP.

22
00:01:39,960 --> 00:01:48,450
Vamos olhar para o uso do cliente HTTP e como podemos usar HttpClientModule,

23
00:01:48,450 --> 00:01:52,425
dentro da nossa aplicação Angular para habilitar a comunicação Client-Server.

24
00:01:52,425 --> 00:01:56,150
Qualquer comunicação entre o cliente e o servidor como esperamos,

25
00:01:56,150 --> 00:01:57,770
será assíncrona na natureza.

26
00:01:57,770 --> 00:02:00,410
Então, o que significa que seu cliente precisa de

27
00:02:00,410 --> 00:02:03,470
para aguardar que os dados sejam entregues a partir do site do servidor.

28
00:02:03,470 --> 00:02:06,620
Consequentemente, seu cliente precisa ser

29
00:02:06,620 --> 00:02:12,420
configurado para lidar com esse atraso na obtenção dos dados.

30
00:02:12,420 --> 00:02:16,295
No módulo anterior em si,

31
00:02:16,295 --> 00:02:19,910
já tínhamos configurado nossos aplicativos cliente para

32
00:02:19,910 --> 00:02:24,160
ser capaz de mostrar o spinner progresso na interface do usuário,

33
00:02:24,160 --> 00:02:28,795
para manter o usuário informado sobre o fato de que há um atraso na obtenção dos dados,

34
00:02:28,795 --> 00:02:31,985
antes que a vista seja renderizada.

35
00:02:31,985 --> 00:02:35,210
Isso vem em nosso auxílio nesta lição,

36
00:02:35,210 --> 00:02:42,880
onde obviamente temos que lidar com o atraso para obter dados do site do servidor.

37
00:02:42,880 --> 00:02:47,000
O acesso aos dados dentro da nossa aplicação Angular,

38
00:02:47,000 --> 00:02:52,150
é sempre melhor delegar esta responsabilidade ao serviço.

39
00:02:52,150 --> 00:02:56,450
Então, deixamos o serviço lidar com a interação com o servidor,

40
00:02:56,450 --> 00:03:02,795
e, em seguida, seu componente obtém os dados chamando os métodos do serviço.

41
00:03:02,795 --> 00:03:08,405
A interação do serviço de componente que já configuramos no módulo anterior.

42
00:03:08,405 --> 00:03:09,970
Então, tudo o que precisamos fazer,

43
00:03:09,970 --> 00:03:16,700
é atualizar nossos serviços para alavancar o módulo HTTP para se comunicar com o servidor,

44
00:03:16,700 --> 00:03:20,060
para obter os dados do servidor e, em seguida,

45
00:03:20,060 --> 00:03:22,635
fornecer os dados para o componente.

46
00:03:22,635 --> 00:03:26,645
O próprio servidor HTTP,

47
00:03:26,645 --> 00:03:30,980
irá retornar os dados para o nosso cliente e

48
00:03:30,980 --> 00:03:37,245
nosso módulo HTTP retorna os dados para o nosso serviço no acompanhamento observável.

49
00:03:37,245 --> 00:03:40,010
Este observável, será então processado e

50
00:03:40,010 --> 00:03:43,030
então retornado como um observável para o nosso componente.

51
00:03:43,030 --> 00:03:46,760
Essa parte já configuramos no módulo anterior.

52
00:03:46,760 --> 00:03:51,380
Então, vamos aproveitar isso para nos permitir rapidamente

53
00:03:51,380 --> 00:03:56,315
deslizando a comunicação HTTP entre o cliente e o servidor,

54
00:03:56,315 --> 00:04:00,145
entre o serviço e o site do servidor,

55
00:04:00,145 --> 00:04:03,080
e, em seguida, o resto da infra-estrutura

56
00:04:03,080 --> 00:04:05,900
que já está no lugar em nossa aplicação angular

57
00:04:05,900 --> 00:04:12,010
pode facilmente lidar com o entrega do observável para o nosso componente,

58
00:04:12,010 --> 00:04:15,130
e o componente que já se inscreve para esse observador.

59
00:04:15,130 --> 00:04:18,200
O efeito adicional com o qual lidaremos,

60
00:04:18,200 --> 00:04:21,040
é como lidar com erros.

61
00:04:21,040 --> 00:04:25,340
Falaremos sobre isso com um pouco mais de detalhes nos slides posteriores.

62
00:04:25,340 --> 00:04:27,625
Então, como já mencionei,

63
00:04:27,625 --> 00:04:30,850
o cliente HTTP retorna um observável.

64
00:04:30,850 --> 00:04:33,845
Então, quando você chamar o módulo HTTP,

65
00:04:33,845 --> 00:04:38,040
assim você vai configurar o seu serviço para fazer uso do módulo HTTP,

66
00:04:38,040 --> 00:04:40,295
e com o módulo HTTP,

67
00:04:40,295 --> 00:04:46,290
ele fornece vários métodos que correspondem aos verbos get,

68
00:04:46,290 --> 00:04:49,800
put, post e delete do protocolo HTTP.

69
00:04:49,800 --> 00:04:50,870
Então, os métodos get, put, post,

70
00:04:50,870 --> 00:04:54,960
e delete são automaticamente suportados pelo módulo HTTP.

71
00:04:54,960 --> 00:04:59,165
Então, você aproveitará esses métodos para ser capaz de executar

72
00:04:59,165 --> 00:05:03,330
essas operações específicas no site do servidor.

73
00:05:03,330 --> 00:05:06,365
Então, quando você emite uma chamada HTTP get,

74
00:05:06,365 --> 00:05:11,000
você está solicitando que os dados sejam entregues do servidor para o cliente.

75
00:05:11,000 --> 00:05:13,195
O cliente HTTP, por sua vez,

76
00:05:13,195 --> 00:05:18,170
irá processar o observável que é entregue através do módulo Angular HTTP,

77
00:05:18,170 --> 00:05:22,470
e, em seguida, entregar que observável para o nosso componente.

78
00:05:22,470 --> 00:05:25,550
Dentro do nosso componente, já subscrevemos

79
00:05:25,550 --> 00:05:28,340
ao observável que é entregue pelo nosso serviço,

80
00:05:28,340 --> 00:05:32,580
e assim lidar com os dados que são enviados através do observável,

81
00:05:32,580 --> 00:05:35,500
é bastante direto para nós.

82
00:05:35,500 --> 00:05:38,900
Se o aplicativo Angular é

83
00:05:38,900 --> 00:05:43,705
comunicando com um servidor que está retornando a resposta no formato JSON,

84
00:05:43,705 --> 00:05:47,280
os clientes Angular HTTP obter método em si

85
00:05:47,280 --> 00:05:51,750
analisa a resposta JSON do servidor em um objeto anônimo.

86
00:05:51,750 --> 00:05:58,070
O próprio cliente, não sabe exatamente como interpretar a forma deste objeto.

87
00:05:58,070 --> 00:06:04,220
Assim, podemos ajudar o cliente HTTP especificando a forma do objeto,

88
00:06:04,220 --> 00:06:10,170
especificando uma declaração de uma classe JavaScript,

89
00:06:10,170 --> 00:06:13,520
que especificam a forma do objeto para que a saída

90
00:06:13,520 --> 00:06:17,025
do get possa ser consumida facilmente pelo aplicativo.

91
00:06:17,025 --> 00:06:19,330
Então, no exercício,

92
00:06:19,330 --> 00:06:20,500
você vai me ver declarando.

93
00:06:20,500 --> 00:06:23,560
Por exemplo, diremos isso.http.get,

94
00:06:23,560 --> 00:06:27,695
e, em seguida, dentro de colchetes angulares,

95
00:06:27,695 --> 00:06:29,940
Eu especifico prato lá.

96
00:06:29,940 --> 00:06:31,555
Assim, dessa forma,

97
00:06:31,555 --> 00:06:37,400
os dados recebidos para a solicitação get do site do servidor serão convertidos em

98
00:06:37,400 --> 00:06:41,660
um objeto prato e, em seguida, podem ser consumidos imediatamente

99
00:06:41,660 --> 00:06:47,185
pelo meu componente quando ele está colocando o conteúdo.

100
00:06:47,185 --> 00:06:48,990
Agora, se você precisar,

101
00:06:48,990 --> 00:06:54,315
você pode obter acesso à resposta completa que vem do site do servidor.

102
00:06:54,315 --> 00:06:57,810
Mas isso seria apenas em circunstâncias específicas,

103
00:06:57,810 --> 00:07:00,320
onde você precisa acessar, por exemplo,

104
00:07:00,320 --> 00:07:05,820
os cabeçalhos da mensagem de resposta HTTP de entrada e assim por diante.

105
00:07:05,820 --> 00:07:08,300
Mas para a maioria dos propósitos,

106
00:07:08,300 --> 00:07:11,380
apenas declarando a forma do objeto,

107
00:07:11,380 --> 00:07:16,100
podemos facilmente obter os dados JSON automaticamente analisados de uma maneira

108
00:07:16,100 --> 00:07:21,410
que pode ser consumido pela nossa aplicação Angular mais facilmente.

109
00:07:21,410 --> 00:07:24,140
Como esperamos, a comunicação

110
00:07:24,140 --> 00:07:27,845
entre o cliente e o servidor não será livre de erros.

111
00:07:27,845 --> 00:07:32,060
Erros vão surgir por muitas razões diferentes.

112
00:07:32,060 --> 00:07:36,740
Pode ser que a conexão não seja estabelecida entre o cliente e o servidor,

113
00:07:36,740 --> 00:07:40,130
pode ser o fato de que a resposta do servidor se perde,

114
00:07:40,130 --> 00:07:47,660
pode ser o fato de que o servidor é incapaz de encontrar os dados que você está procurando,

115
00:07:47,660 --> 00:07:54,005
e assim retorna um 404 indicando que o servidor

116
00:07:54,005 --> 00:08:00,515
não consegue fornecer os dados para você ou dados ausentes no site do servidor, e assim por diante.

117
00:08:00,515 --> 00:08:04,070
Então, seu cliente precisa lidar com todos esses erros.

118
00:08:04,070 --> 00:08:05,745
Então, dentro do nosso serviço,

119
00:08:05,745 --> 00:08:09,200
nós vamos configurar nosso serviço para ser capaz de detectar esse erro.

120
00:08:09,200 --> 00:08:13,935
Então, este é o lugar onde o uso do método catch que é suportado pelo HTTP,

121
00:08:13,935 --> 00:08:17,870
nos permite capturar o erro, processar esse erro,

122
00:08:17,870 --> 00:08:21,745
e, em seguida, enviar a mensagem de erro para o nosso componente,

123
00:08:21,745 --> 00:08:24,920
e, em seguida, deixar o componente lidar com a mensagem de erro em

124
00:08:24,920 --> 00:08:28,340
qualquer maneira que pareça apropriado.

125
00:08:28,340 --> 00:08:30,485
Agora, dentro do nosso componente, por exemplo,

126
00:08:30,485 --> 00:08:33,530
vamos exibir as informações de erro que

127
00:08:33,530 --> 00:08:36,980
obtivemos em nossa visão para indicar ao usuário,

128
00:08:36,980 --> 00:08:40,755
que ocorreu um erro na obtenção dos dados do site do servidor.

129
00:08:40,755 --> 00:08:43,210
Então, dentro do serviço,

130
00:08:43,210 --> 00:08:45,015
precisamos processar esse erro.

131
00:08:45,015 --> 00:08:48,710
Agora, quando esta informação de erro obtida de

132
00:08:48,710 --> 00:08:52,615
o site do servidor através do cliente HTTP é processada dentro do nosso serviço,

133
00:08:52,615 --> 00:08:54,815
então vamos converter isso para uma string,

134
00:08:54,815 --> 00:08:59,905
e essa string será passada para o nosso componente usando o método de lançamento observável.

135
00:08:59,905 --> 00:09:02,785
Então, o método throw nos permite lançar um erro.

136
00:09:02,785 --> 00:09:05,770
Então, porque em nosso componente que

137
00:09:05,770 --> 00:09:08,770
assinar este observável dentro do método de assinatura,

138
00:09:08,770 --> 00:09:10,520
então você precisa lidar com o erro.

139
00:09:10,520 --> 00:09:12,505
Então, na parte de assinatura,

140
00:09:12,505 --> 00:09:17,120
anteriormente vimos apenas uma função sendo especificada para a assinatura,

141
00:09:17,120 --> 00:09:19,820
e que lida com a operação normal.

142
00:09:19,820 --> 00:09:21,490
Mas junto com isso,

143
00:09:21,490 --> 00:09:27,270
também podemos fornecer uma segunda função para a qual o erro será entregue.

144
00:09:27,270 --> 00:09:32,450
Então, você vai me ver configurando a parte de assinatura do meu componente

145
00:09:32,450 --> 00:09:38,480
usando uma segunda função especificada dentro do método subscribe lá,

146
00:09:38,480 --> 00:09:44,475
como um exemplo ilustrado por este código aqui.

147
00:09:44,475 --> 00:09:47,780
Dessa forma, o erro será capturado dentro

148
00:09:47,780 --> 00:09:50,890
meu componente e, em seguida, a mensagem de erro apropriada,

149
00:09:50,890 --> 00:09:54,380
informações serão entregues ao usuário dentro da exibição.

150
00:09:54,380 --> 00:10:00,825
Então, vamos ver isso como parte do segundo exercício nesta lição particular.

151
00:10:00,825 --> 00:10:07,010
Com esta rápida compreensão do cliente HTTP,

152
00:10:07,010 --> 00:10:11,335
vamos agora passar para os exercícios onde vamos empregar

153
00:10:11,335 --> 00:10:17,795
o cliente HTTP Angular fornecido através do módulo HTTP da biblioteca Angular HTTP,

154
00:10:17,795 --> 00:10:22,740
para nos permitir comunicar com o nosso servidor.