1
00:00:03,630 --> 00:00:08,225
Como ya hemos aprendido en la lección anterior, el protocolo HTTP

2
00:00:08,225 --> 00:00:15,020
nos permite comunicarnos entre un cliente y un servidor.

3
00:00:15,020 --> 00:00:19,770
Ya hemos visto algunos detalles sobre el protocolo HTTP en la lección anterior.

4
00:00:19,770 --> 00:00:25,440
En esta lección, vamos a explorar el soporte angular para HTTP.

5
00:00:25,440 --> 00:00:29,810
Angular admite HTTP a través del cliente HTTP angular.

6
00:00:29,810 --> 00:00:32,700
Vamos a ver cómo podemos aprovechar

7
00:00:32,700 --> 00:00:36,725
el cliente HTTP angular para la comunicación cliente-servidor,

8
00:00:36,725 --> 00:00:38,925
en nuestra aplicación Angular.

9
00:00:38,925 --> 00:00:42,045
Los dos ejercicios que siguen esta conferencia,

10
00:00:42,045 --> 00:00:45,650
exploraremos el uso práctico de

11
00:00:45,650 --> 00:00:49,660
el cliente HTTP Angular dentro de nuestra aplicación Angular.

12
00:00:49,660 --> 00:00:56,020
Veamos un poco de los detalles del cliente HTTP en esta conferencia.

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

14
00:00:58,415 --> 00:01:02,975
Angular aprovecha el protocolo HTTP para permitir la comunicación entre

15
00:01:02,975 --> 00:01:08,000
nuestro cliente Angular y el servidor basado en HTTP.

16
00:01:08,000 --> 00:01:11,820
La mayoría de los navegadores modernos, normalmente utilizados para admitir

17
00:01:11,820 --> 00:01:17,820
la forma XMLHttpRequest o XHR de comunicarse con el servidor.

18
00:01:17,820 --> 00:01:22,519
Cada vez más, los navegadores están adoptando la API Fetch,

19
00:01:22,519 --> 00:01:26,900
, que es un reemplazo moderno para XMLHttpRequest como

20
00:01:26,900 --> 00:01:32,225
una forma de proporcionar comunicación entre el navegador y el servidor.

21
00:01:32,225 --> 00:01:39,960
Angular aprovecha esto para comunicarse con el servidor utilizando el cliente HTTP.

22
00:01:39,960 --> 00:01:48,450
Vamos a ver el uso del cliente HTTP y cómo podemos usar HttpClientModule,

23
00:01:48,450 --> 00:01:52,425
dentro de nuestra aplicación Angular para habilitar la comunicación cliente-servidor.

24
00:01:52,425 --> 00:01:56,150
Cualquier comunicación entre el cliente y el servidor como esperamos,

25
00:01:56,150 --> 00:01:57,770
va a ser de naturaleza asíncrona.

26
00:01:57,770 --> 00:02:00,410
Entonces, lo que significa que su cliente necesita

27
00:02:00,410 --> 00:02:03,470
para esperar a que los datos se entreguen desde el sitio del servidor.

28
00:02:03,470 --> 00:02:06,620
En consecuencia, su cliente necesita ser

29
00:02:06,620 --> 00:02:12,420
configurado para hacer frente a este retraso en la obtención de los datos.

30
00:02:12,420 --> 00:02:16,295
En el módulo anterior,

31
00:02:16,295 --> 00:02:19,910
ya habíamos configurado nuestras aplicaciones cliente para

32
00:02:19,910 --> 00:02:24,160
poder mostrar el spinner de progreso en la interfaz de usuario,

33
00:02:24,160 --> 00:02:28,795
para mantener informado al usuario sobre el hecho de que hay un retraso en la obtención de los datos,

34
00:02:28,795 --> 00:02:31,985
antes de que la vista sea renderizada.

35
00:02:31,985 --> 00:02:35,210
Eso viene de nuestra ayuda en esta lección,

36
00:02:35,210 --> 00:02:42,880
donde obviamente tenemos que lidiar con el retraso para obtener datos del sitio del servidor.

37
00:02:42,880 --> 00:02:47,000
El acceso a los datos dentro de nuestra aplicación Angular,

38
00:02:47,000 --> 00:02:52,150
siempre es mejor delegar esta responsabilidad en el servicio.

39
00:02:52,150 --> 00:02:56,450
Por lo tanto, dejamos que el servicio se ocupe de la interacción con el servidor,

40
00:02:56,450 --> 00:03:02,795
y luego su componente obtiene los datos llamando a los métodos del servicio.

41
00:03:02,795 --> 00:03:08,405
La interacción del servicio de componentes que ya hemos configurado en el módulo anterior.

42
00:03:08,405 --> 00:03:09,970
Así que, todo lo que tenemos que hacer,

43
00:03:09,970 --> 00:03:16,700
es actualizar nuestros servicios para aprovechar el módulo HTTP para comunicarse con el servidor,

44
00:03:16,700 --> 00:03:20,060
para obtener los datos del servidor y luego,

45
00:03:20,060 --> 00:03:22,635
proporcionar los datos al componente.

46
00:03:22,635 --> 00:03:26,645
El propio servidor HTTP,

47
00:03:26,645 --> 00:03:30,980
devolverá los datos a nuestro cliente y

48
00:03:30,980 --> 00:03:37,245
nuestro módulo HTTP devuelve los datos a nuestro servicio en el seguimiento observable.

49
00:03:37,245 --> 00:03:40,010
Este observable, será procesado y

50
00:03:40,010 --> 00:03:43,030
luego devuelto como observable a nuestro componente.

51
00:03:43,030 --> 00:03:46,760
Esa parte ya hemos configurado en el módulo anterior.

52
00:03:46,760 --> 00:03:51,380
Así, aprovecharemos eso para permitirnos rápidamente

53
00:03:51,380 --> 00:03:56,315
deslizando la comunicación HTTP entre el cliente y el servidor,

54
00:03:56,315 --> 00:04:00,145
entre el servicio y el sitio del servidor,

55
00:04:00,145 --> 00:04:03,080
y luego el resto de la infraestructura

56
00:04:03,080 --> 00:04:05,900
que ya está en su lugar en nuestra aplicación angular

57
00:04:05,900 --> 00:04:12,010
puede tratar fácilmente con el entrega de lo observable a nuestro componente,

58
00:04:12,010 --> 00:04:15,130
y el componente que ya suscribe a ese observador.

59
00:04:15,130 --> 00:04:18,200
El efecto adicional con el que vamos a tratar,

60
00:04:18,200 --> 00:04:21,040
es cómo manejar errores.

61
00:04:21,040 --> 00:04:25,340
Hablaremos de eso con un poco más de detalle en las diapositivas posteriores.

62
00:04:25,340 --> 00:04:27,625
Entonces, como ya mencioné,

63
00:04:27,625 --> 00:04:30,850
el cliente HTTP devuelve un observable.

64
00:04:30,850 --> 00:04:33,845
Entonces, cuando llame al módulo HTTP,

65
00:04:33,845 --> 00:04:38,040
para que configure su servicio para hacer uso del módulo HTTP,

66
00:04:38,040 --> 00:04:40,295
y con el módulo HTTP,

67
00:04:40,295 --> 00:04:46,290
le proporciona varios métodos que coinciden con los verbos get,

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

69
00:04:49,800 --> 00:04:50,870
Por lo tanto, los métodos get, put, post,

70
00:04:50,870 --> 00:04:54,960
y delete son compatibles automáticamente con el módulo HTTP.

71
00:04:54,960 --> 00:04:59,165
Por lo tanto, aprovechará estos métodos para poder ejecutar

72
00:04:59,165 --> 00:05:03,330
esas operaciones particulares en el sitio del servidor.

73
00:05:03,330 --> 00:05:06,365
Por lo tanto, cuando emita una llamada HTTP get,

74
00:05:06,365 --> 00:05:11,000
está solicitando que los datos se entreguen desde el servidor al cliente.

75
00:05:11,000 --> 00:05:13,195
El cliente HTTP a su vez,

76
00:05:13,195 --> 00:05:18,170
procesará el observable que se entrega a través del módulo HTTP angular,

77
00:05:18,170 --> 00:05:22,470
y luego entregará ese observable a nuestro componente.

78
00:05:22,470 --> 00:05:25,550
Dentro de nuestro componente, ya suscribimos

79
00:05:25,550 --> 00:05:28,340
al observable que es entregado por nuestro servicio,

80
00:05:28,340 --> 00:05:32,580
y así manejar los datos que se envían a través de lo observable,

81
00:05:32,580 --> 00:05:35,500
es bastante sencillo para nosotros.

82
00:05:35,500 --> 00:05:38,900
Si la aplicación Angular es

83
00:05:38,900 --> 00:05:43,705
comunicándose con un servidor que devuelve la respuesta en formato JSON,

84
00:05:43,705 --> 00:05:47,280
los clientes HTTP Angular obtienen el método en sí

85
00:05:47,280 --> 00:05:51,750
analiza la respuesta JSON del servidor en un objeto anónimo.

86
00:05:51,750 --> 00:05:58,070
El cliente en sí, no sabe exactamente cómo interpretar la forma de este objeto.

87
00:05:58,070 --> 00:06:04,220
Por lo tanto, podemos ayudar al cliente HTTP especificando la forma del objeto,

88
00:06:04,220 --> 00:06:10,170
especificando una declaración de una clase JavaScript,

89
00:06:10,170 --> 00:06:13,520
que especifica la forma del objeto para que la salida

90
00:06:13,520 --> 00:06:17,025
del get pueda ser consumida fácilmente por la aplicación.

91
00:06:17,025 --> 00:06:19,330
Así que, en el ejercicio,

92
00:06:19,330 --> 00:06:20,500
me verás declarando.

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

94
00:06:23,560 --> 00:06:27,695
y luego dentro de los corchetes angulares,

95
00:06:27,695 --> 00:06:29,940
especifico plato allí.

96
00:06:29,940 --> 00:06:31,555
Entonces, de esa manera,

97
00:06:31,555 --> 00:06:37,400
los datos entrantes para la solicitud get del sitio del servidor se convertirán en

98
00:06:37,400 --> 00:06:41,660
un objeto dish y luego podrán ser consumidos inmediatamente

99
00:06:41,660 --> 00:06:47,185
por mi componente cuando esté diseñando el contenido.

100
00:06:47,185 --> 00:06:48,990
Ahora, si lo requiere,

101
00:06:48,990 --> 00:06:54,315
puede obtener acceso a la respuesta completa que viene desde el sitio del servidor.

102
00:06:54,315 --> 00:06:57,810
Pero eso sería solo en circunstancias específicas,

103
00:06:57,810 --> 00:07:00,320
donde necesita acceso a, por ejemplo,

104
00:07:00,320 --> 00:07:05,820
los encabezados del mensaje de respuesta HTTP entrante, etc.

105
00:07:05,820 --> 00:07:08,300
Pero para la mayoría de los propósitos,

106
00:07:08,300 --> 00:07:11,380
simplemente declarando la forma del objeto,

107
00:07:11,380 --> 00:07:16,100
podemos obtener fácilmente los datos JSON analizados automáticamente de una manera

108
00:07:16,100 --> 00:07:21,410
que puede ser consumido por nuestra aplicación Angular más fácilmente.

109
00:07:21,410 --> 00:07:24,140
Como esperamos, la comunicación

110
00:07:24,140 --> 00:07:27,845
entre el cliente y el servidor no será libre de errores.

111
00:07:27,845 --> 00:07:32,060
Los errores van a aparecer por muchas razones diferentes.

112
00:07:32,060 --> 00:07:36,740
Puede ser que la conexión no se establezca entre el cliente y el servidor,

113
00:07:36,740 --> 00:07:40,130
puede ser el hecho de que la respuesta del servidor se pierde,

114
00:07:40,130 --> 00:07:47,660
puede ser el hecho de que el servidor no puede encontrar los datos que está buscando,

115
00:07:47,660 --> 00:07:54,005
y así devuelve un 404 indicando que el servidor

116
00:07:54,005 --> 00:08:00,515
no puede proporcionar los datos para usted o los datos que faltan en el sitio del servidor, etc.

117
00:08:00,515 --> 00:08:04,070
Por lo tanto, su cliente necesita lidiar con todos estos errores.

118
00:08:04,070 --> 00:08:05,745
Así que, dentro de nuestro servicio,

119
00:08:05,745 --> 00:08:09,200
vamos a configurar nuestro servicio para poder detectar este error.

120
00:08:09,200 --> 00:08:13,935
Por lo tanto, aquí es donde el uso del método catch que es compatible con HTTP,

121
00:08:13,935 --> 00:08:17,870
nos permite detectar el error, procesar ese error,

122
00:08:17,870 --> 00:08:21,745
y luego enviar el mensaje de error a nuestro componente,

123
00:08:21,745 --> 00:08:24,920
y luego dejar que el componente se ocupe del mensaje de error en

124
00:08:24,920 --> 00:08:28,340
de la manera que parezca apropiado.

125
00:08:28,340 --> 00:08:30,485
Ahora, dentro de nuestro componente por ejemplo,

126
00:08:30,485 --> 00:08:33,530
mostraremos la información de error que

127
00:08:33,530 --> 00:08:36,980
obtuvimos en nuestra vista para indicar al usuario,

128
00:08:36,980 --> 00:08:40,755
que se produjo un error en la obtención de los datos del sitio del servidor.

129
00:08:40,755 --> 00:08:43,210
Así que, dentro del servicio,

130
00:08:43,210 --> 00:08:45,015
tenemos que procesar este error.

131
00:08:45,015 --> 00:08:48,710
Ahora, cuando esta información de error obtenida de

132
00:08:48,710 --> 00:08:52,615
el sitio del servidor a través del cliente HTTP se procesa dentro de nuestro servicio,

133
00:08:52,615 --> 00:08:54,815
entonces vamos a convertir eso en una cadena,

134
00:08:54,815 --> 00:08:59,905
y esa cadena se pasará a nuestro componente mediante el método de lanzamiento observable.

135
00:08:59,905 --> 00:09:02,785
Entonces, el método throw nos permite lanzar un error.

136
00:09:02,785 --> 00:09:05,770
Entonces, debido a que en nuestro componente

137
00:09:05,770 --> 00:09:08,770
nos suscribimos a este observable dentro del método de suscripción,

138
00:09:08,770 --> 00:09:10,520
entonces necesita lidiar con el error.

139
00:09:10,520 --> 00:09:12,505
Así que, en la parte de suscripción,

140
00:09:12,505 --> 00:09:17,120
antes hemos visto sólo una función que se especifica para la suscripción,

141
00:09:17,120 --> 00:09:19,820
y que trata de la operación normal.

142
00:09:19,820 --> 00:09:21,490
Pero junto con eso,

143
00:09:21,490 --> 00:09:27,270
también podemos proporcionar una segunda función a la que se entregará el error.

144
00:09:27,270 --> 00:09:32,450
Entonces, me verás configurando la parte de suscripción de mi componente

145
00:09:32,450 --> 00:09:38,480
usando una segunda función especificada dentro del método de suscripción allí,

146
00:09:38,480 --> 00:09:44,475
como un ejemplo ilustrado por este código aquí.

147
00:09:44,475 --> 00:09:47,780
De esa manera, el error será capturado dentro de

148
00:09:47,780 --> 00:09:50,890
mi componente y luego el mensaje de error apropiado,

149
00:09:50,890 --> 00:09:54,380
información será entregada al usuario dentro de la vista.

150
00:09:54,380 --> 00:10:00,825
Por lo tanto, veremos eso como parte del segundo ejercicio en esta lección particular.

151
00:10:00,825 --> 00:10:07,010
Con esta rápida comprensión del cliente HTTP,

152
00:10:07,010 --> 00:10:11,335
pasaremos ahora a los ejercicios donde emplearemos

153
00:10:11,335 --> 00:10:17,795
el cliente HTTP Angular proporcionado a través del módulo HTTP de la biblioteca HTTP Angular,

154
00:10:17,795 --> 00:10:22,740
para permitirnos comunicarnos con nuestro servidor.