1
00:00:00,990 --> 00:00:02,640
Entonces, para terminar esta sección,

2
00:00:02,640 --> 00:00:04,020
vamos a revisar rápidamente

3
00:00:04,020 --> 00:00:07,290
cómo podemos utilizar técnicas de JavaScript asíncrono

4
00:00:07,290 --> 00:00:09,390
para recuperar datos.

5
00:00:09,390 --> 00:00:13,650
Entonces, para cargar datos desde una API web externa.

6
00:00:13,650 --> 00:00:15,750
Y el primer camino en el que vamos

7
00:00:15,750 --> 00:00:19,983
Hacer esto es utilizar directamente el concepto de promesas.

8
00:00:21,360 --> 00:00:24,810
Y comencemos desactivando todo este código.

9
00:00:24,810 --> 00:00:26,163
que ya no necesitamos.

10
00:00:27,330 --> 00:00:30,390
Así que ahora vamos a dejar este dominio.

11
00:00:30,390 --> 00:00:33,780
de libros y nos centraremos rápidamente aquí

12
00:00:33,780 --> 00:00:35,583
en algo completamente diferente.

13
00:00:36,510 --> 00:00:40,590
Entonces, para recuperar datos de una API en los navegadores

14
00:00:40,590 --> 00:00:43,503
tenemos la llamada API de recuperación.

15
00:00:44,340 --> 00:00:47,010
Entonces una función que se llama buscar

16
00:00:47,010 --> 00:00:51,330
y al que podemos pasar una URL de una API.

17
00:00:51,330 --> 00:00:53,520
Y en realidad usemos un tipo

18
00:00:53,520 --> 00:00:58,520
de API ficticia que se ve comúnmente en los tutoriales.

19
00:00:58,830 --> 00:01:02,587
Esa es la API JSONPlaceholder.

20
00:01:05,250 --> 00:01:06,663
Sí, no importa.

21
00:01:07,530 --> 00:01:10,503
Así que simplemente busque en Google este JSONPlaceholder.

22
00:01:11,490 --> 00:01:12,323
está bien.

23
00:01:12,323 --> 00:01:15,750
Y luego abre esta, esta página.

24
00:01:15,750 --> 00:01:18,723
Y luego podemos copiar esta URL aquí mismo.

25
00:01:19,800 --> 00:01:22,350
Así que reduzca las tareas pendientes, pero sin esa.

26
00:01:22,350 --> 00:01:23,970
Entonces eso no es necesario.

27
00:01:23,970 --> 00:01:25,920
Y enseguida aquí también ves

28
00:01:25,920 --> 00:01:28,383
que están usando la función de búsqueda, ¿verdad?

29
00:01:29,580 --> 00:01:30,750
Así que creemos una nueva cadena.

30
00:01:30,750 --> 00:01:34,680
así y luego pegue esa URL.

31
00:01:34,680 --> 00:01:38,910
Ahora, para que esto realmente funcione en Qokka aquí mismo

32
00:01:38,910 --> 00:01:41,100
necesitas al menos la versión 18

33
00:01:41,100 --> 00:01:44,160
de Node.js instalado en su computadora.

34
00:01:44,160 --> 00:01:47,940
Entonces, si no hiciste eso anteriormente cuando mencioné

35
00:01:47,940 --> 00:01:50,130
que deberías usar la versión 18

36
00:01:50,130 --> 00:01:54,630
entonces este es un buen momento para actualizar su versión de Node.js.

37
00:01:54,630 --> 00:01:57,600
Porque Qokka aquí en realidad no usa un navegador,

38
00:01:57,600 --> 00:01:59,520
pero está usando Node.js.

39
00:01:59,520 --> 00:02:03,903
Y la función de recuperación solo se agregó a Node en la versión 18.

40
00:02:05,130 --> 00:02:07,080
¿bueno? Pero de todos modos,

41
00:02:07,080 --> 00:02:11,190
¿Qué va a pasar aquí cuando se detecte esta función?

42
00:02:11,190 --> 00:02:14,670
Porque al obtener los datos de esta API aquí,

43
00:02:14,670 --> 00:02:18,990
Así que, por supuesto, tomará algún tiempo a partir de esta cadena.

44
00:02:18,990 --> 00:02:22,410
Debido a que JavaScript necesita realizar una solicitud HTTP,

45
00:02:22,410 --> 00:02:25,830
debe esperar hasta que se procese esa solicitud,

46
00:02:25,830 --> 00:02:29,250
y luego necesita descargar esos datos básicamente

47
00:02:29,250 --> 00:02:30,630
desde este servidor.

48
00:02:30,630 --> 00:02:34,770
Y mientras tanto, JavaScript sigue ejecutándose.

49
00:02:34,770 --> 00:02:37,263
Entonces, si bloqueamos algo en la consola aquí,

50
00:02:40,530 --> 00:02:42,390
Jonás, por ejemplo,

51
00:02:42,390 --> 00:02:44,790
se ejecutará inmediatamente.

52
00:02:44,790 --> 00:02:49,230
Por lo tanto, JavaScript no esperará hasta que se obtengan estos datos.

53
00:02:49,230 --> 00:02:51,090
Simplemente se ejecutará como función.

54
00:02:51,090 --> 00:02:54,960
y luego pasará inmediatamente a la siguiente línea de código,

55
00:02:54,960 --> 00:02:57,390
que en este caso es este.

56
00:02:57,390 --> 00:03:01,530
Entonces, ¿cómo esperamos básicamente este código aquí?

57
00:03:01,530 --> 00:03:05,250
¿Y hacer algo tan pronto como lleguen los datos?

58
00:03:05,250 --> 00:03:08,850
Bueno, ahí es donde surgen las técnicas de JavaScript asíncrono.

59
00:03:08,850 --> 00:03:10,410
ven a jugar.

60
00:03:10,410 --> 00:03:14,280
Entonces, esta función de búsqueda aquí, lo que devuelve inmediatamente,

61
00:03:14,280 --> 00:03:19,230
y luego pasar a la siguiente línea, es la llamada promesa,

62
00:03:19,230 --> 00:03:24,033
y deberíamos poder verlo con un registro consular aquí.

63
00:03:25,380 --> 00:03:26,340
vamos a ver.

64
00:03:26,340 --> 00:03:29,880
Y de hecho, esta es una supuesta promesa.

65
00:03:29,880 --> 00:03:32,730
y aquí dice que está pendiente porque ese es uno

66
00:03:32,730 --> 00:03:36,360
de los múltiples estados en los que puede estar una promesa.

67
00:03:36,360 --> 00:03:39,360
Entonces puede estar pendiente cuando todavía está haciendo algo.

68
00:03:39,360 --> 00:03:40,560
en el fondo.

69
00:03:40,560 --> 00:03:44,670
Se puede rechazar si hubo un error. En este caso,

70
00:03:44,670 --> 00:03:47,190
si hubo un error al obtener estos datos,

71
00:03:47,190 --> 00:03:48,570
o se puede cumplir,

72
00:03:48,570 --> 00:03:52,140
lo que significa que los datos llegaron exitosamente.

73
00:03:52,140 --> 00:03:54,180
Y una vez más, no profundizaré

74
00:03:54,180 --> 00:03:55,650
en los detalles aquí.

75
00:03:55,650 --> 00:03:57,180
Para eso puedes seguir adelante.

76
00:03:57,180 --> 00:04:00,600
y lea la documentación de promesa en MDN,

77
00:04:00,600 --> 00:04:02,820
o puedes ver algún vídeo de YouTube,

78
00:04:02,820 --> 00:04:04,620
o por supuesto también puedes

79
00:04:04,620 --> 00:04:07,080
echa un vistazo a mi curso completo de JavaScript.

80
00:04:07,080 --> 00:04:09,840
Pero, de todos modos, la promesa dice que estamos interesados.

81
00:04:09,840 --> 00:04:13,440
Aquí está el estado cumplido, ¿verdad?

82
00:04:13,440 --> 00:04:16,800
Entonces, ese es el estado al que realmente llegaron los datos,

83
00:04:16,800 --> 00:04:18,810
y podemos manejar ese estado

84
00:04:18,810 --> 00:04:23,433
usando o agregando el método then.

85
00:04:24,300 --> 00:04:29,300
Entonces, por supuesto, primero deshagámonos de este console.log,

86
00:04:29,400 --> 00:04:33,450
y entonces, nuevamente, esto devuelve una promesa,

87
00:04:33,450 --> 00:04:37,200
y en una promesa podemos llamar al método then.

88
00:04:37,200 --> 00:04:40,410
Y entonces el método then básicamente será llamado tan pronto como

89
00:04:40,410 --> 00:04:42,300
a medida que se cumple la promesa.

90
00:04:42,300 --> 00:04:46,710
Entonces, tan pronto como regresó exitosamente con los datos.

91
00:04:46,710 --> 00:04:49,350
Ahora las promesas se utilizan para algo más que la obtención de datos,

92
00:04:49,350 --> 00:04:51,900
pero aquí solo lo estoy usando como ejemplo.

93
00:04:51,900 --> 00:04:53,130
¿bueno?

94
00:04:53,130 --> 00:04:54,540
Ahora en este entonces método

95
00:04:54,540 --> 00:04:56,820
necesitamos pasar una función de devolución de llamada,

96
00:04:56,820 --> 00:04:59,190
que es básicamente el código que luego

97
00:04:59,190 --> 00:05:02,283
ejecutarse tan pronto como lleguen los datos.

98
00:05:03,810 --> 00:05:08,073
Entonces, JavaScript llamará a esta función de devolución de llamada aquí.

99
00:05:08,073 --> 00:05:10,740
con la respuesta que ha recibido.

100
00:05:10,740 --> 00:05:13,230
Por eso me gusta llamar a esto aquí res,

101
00:05:13,230 --> 00:05:15,480
y estos datos luego deben convertirse

102
00:05:15,480 --> 00:05:18,840
de json a un objeto JavaScript.

103
00:05:18,840 --> 00:05:21,632
Nuevamente, sin profundizar en esto aquí,

104
00:05:21,632 --> 00:05:25,653
aquí solo necesita ser res.json.

105
00:05:27,330 --> 00:05:28,260
¿bueno?

106
00:05:28,260 --> 00:05:29,250
Y ahora la cosa es

107
00:05:29,250 --> 00:05:33,780
que al hacerlo se obtendrá otra promesa.

108
00:05:33,780 --> 00:05:37,200
Entonces, este punto json aquí también lleva algo de tiempo,

109
00:05:37,200 --> 00:05:39,960
entonces también es una operación asincrónica

110
00:05:39,960 --> 00:05:42,753
y por lo tanto, aquí necesitamos agregar otro entonces.

111
00:05:45,390 --> 00:05:46,710
¿bueno?

112
00:05:46,710 --> 00:05:50,310
Pero entonces aquí ya tenemos nuestros datos finales.

113
00:05:50,310 --> 00:05:52,950
en formato JavaScript.

114
00:05:52,950 --> 00:05:56,100
Y entonces, esta función aquí quedará atrapada.

115
00:05:56,100 --> 00:05:58,110
con el resultado de esta función anterior

116
00:05:58,110 --> 00:05:59,400
que entonces son los datos.

117
00:05:59,400 --> 00:06:01,290
Así que simplemente bloqueemos estos datos.

118
00:06:01,290 --> 00:06:03,303
a la consola en este punto.

119
00:06:04,950 --> 00:06:06,030
Así que veamos.

120
00:06:06,030 --> 00:06:09,183
Y de hecho, aquí tenemos las cosas por hacer.

121
00:06:10,680 --> 00:06:12,960
Entonces hay muchos de ellos.

122
00:06:12,960 --> 00:06:16,440
Todos ellos llegaron a través de la API JASONPlaceholder.

123
00:06:16,440 --> 00:06:18,030
Ahora lo que notas aquí otra vez

124
00:06:18,030 --> 00:06:21,390
es que imprimió por primera vez a Jonas en la consola.

125
00:06:21,390 --> 00:06:26,390
Entonces el resultado de esto, y solo más tarde es cuando esta matriz

126
00:06:26,970 --> 00:06:31,140
La lista de objetos pendientes finalmente también se imprimió en la consola.

127
00:06:31,140 --> 00:06:34,053
Y nuevamente, eso se debe a que estos datos llegaron más tarde.

128
00:06:35,010 --> 00:06:38,730
Entonces lo que pasó aquí fue que, como mencioné antes

129
00:06:38,730 --> 00:06:42,960
es que esta función de recuperación disparó una solicitud a la API,

130
00:06:42,960 --> 00:06:46,440
y luego inmediatamente JavaScript pasó a la siguiente línea,

131
00:06:46,440 --> 00:06:49,110
que es este de aquí, donde simplemente, básicamente

132
00:06:49,110 --> 00:06:52,680
disfunción registrada aquí para ser ejecutada más tarde.

133
00:06:52,680 --> 00:06:55,620
Lo mismo aquí, pero luego se ejecutó inmediatamente.

134
00:06:55,620 --> 00:06:58,170
esta línea de código, ¿verdad?

135
00:06:58,170 --> 00:06:59,460
Luego pasó algún tiempo

136
00:06:59,460 --> 00:07:01,890
y luego llegaron los datos del IPI.

137
00:07:01,890 --> 00:07:05,160
Y entonces, JavaScript vuelve aquí.

138
00:07:05,160 --> 00:07:07,143
y ejecuta esta función de devolución de llamada

139
00:07:07,143 --> 00:07:09,180
que habíamos registrado antes.

140
00:07:09,180 --> 00:07:11,760
Y aquí es donde llega la respuesta.

141
00:07:11,760 --> 00:07:15,420
Se convierte a JSON y aquí recibimos los datos.

142
00:07:15,420 --> 00:07:18,810
en esta función de devolución de llamada y regístrelo en la consola.

143
00:07:18,810 --> 00:07:21,060
Entonces, literalmente, JavaScript esperará

144
00:07:21,060 --> 00:07:23,820
hasta que ejecute estas funciones aquí,

145
00:07:23,820 --> 00:07:26,670
que normalmente no es como funciona JavaScript.

146
00:07:26,670 --> 00:07:30,210
Pero aquí estamos usando JavaScript asincrónico.

147
00:07:30,210 --> 00:07:33,660
aunque normalmente JavaScript es un lenguaje sincrónico

148
00:07:33,660 --> 00:07:37,950
donde una línea de código simplemente se ejecuta tras otra.

149
00:07:37,950 --> 00:07:40,320
Ahora, está bien, y aquí ahora en este punto.

150
00:07:40,320 --> 00:07:42,780
podrías hacer algo un poco más significativo.

151
00:07:42,780 --> 00:07:44,130
Por ejemplo, en reaccionar,

152
00:07:44,130 --> 00:07:48,060
entonces normalmente tomaríamos estos datos y estableceríamos algún estado

153
00:07:48,060 --> 00:07:52,740
que luego se reflejaría directamente en la interfaz de usuario,

154
00:07:52,740 --> 00:07:55,320
pero, por supuesto, hablaremos de eso más adelante.

155
00:07:55,320 --> 00:07:58,950
Por ahora, básicamente solo quería mostrarles,

156
00:07:58,950 --> 00:08:02,910
o para revisar cómo usamos estos métodos de promesa aquí

157
00:08:02,910 --> 00:08:06,420
para afrontar con éxito el momento en el que

158
00:08:06,420 --> 00:08:08,403
los datos llegan desde la API.