Entonces, para terminar esta sección,
vamos a revisar rápidamente
cómo podemos utilizar técnicas de JavaScript asíncrono
para recuperar datos.
Entonces, para cargar datos desde una API web externa.
Y el primer camino en el que vamos
Hacer esto es utilizar directamente el concepto de promesas.
Y comencemos desactivando todo este código.
que ya no necesitamos.
Así que ahora vamos a dejar este dominio.
de libros y nos centraremos rápidamente aquí
en algo completamente diferente.
Entonces, para recuperar datos de una API en los navegadores
tenemos la llamada API de recuperación.
Entonces una función que se llama buscar
y al que podemos pasar una URL de una API.
Y en realidad usemos un tipo
de API ficticia que se ve comúnmente en los tutoriales.
Esa es la API JSONPlaceholder.
Sí, no importa.
Así que simplemente busque en Google este JSONPlaceholder.
está bien.
Y luego abre esta, esta página.
Y luego podemos copiar esta URL aquí mismo.
Así que reduzca las tareas pendientes, pero sin esa.
Entonces eso no es necesario.
Y enseguida aquí también ves
que están usando la función de búsqueda, ¿verdad?
Así que creemos una nueva cadena.
así y luego pegue esa URL.
Ahora, para que esto realmente funcione en Qokka aquí mismo
necesitas al menos la versión 18
de Node.js instalado en su computadora.
Entonces, si no hiciste eso anteriormente cuando mencioné
que deberías usar la versión 18
entonces este es un buen momento para actualizar su versión de Node.js.
Porque Qokka aquí en realidad no usa un navegador,
pero está usando Node.js.
Y la función de recuperación solo se agregó a Node en la versión 18.
¿bueno? Pero de todos modos,
¿Qué va a pasar aquí cuando se detecte esta función?
Porque al obtener los datos de esta API aquí,
Así que, por supuesto, tomará algún tiempo a partir de esta cadena.
Debido a que JavaScript necesita realizar una solicitud HTTP,
debe esperar hasta que se procese esa solicitud,
y luego necesita descargar esos datos básicamente
desde este servidor.
Y mientras tanto, JavaScript sigue ejecutándose.
Entonces, si bloqueamos algo en la consola aquí,
Jonás, por ejemplo,
se ejecutará inmediatamente.
Por lo tanto, JavaScript no esperará hasta que se obtengan estos datos.
Simplemente se ejecutará como función.
y luego pasará inmediatamente a la siguiente línea de código,
que en este caso es este.
Entonces, ¿cómo esperamos básicamente este código aquí?
¿Y hacer algo tan pronto como lleguen los datos?
Bueno, ahí es donde surgen las técnicas de JavaScript asíncrono.
ven a jugar.
Entonces, esta función de búsqueda aquí, lo que devuelve inmediatamente,
y luego pasar a la siguiente línea, es la llamada promesa,
y deberíamos poder verlo con un registro consular aquí.
vamos a ver.
Y de hecho, esta es una supuesta promesa.
y aquí dice que está pendiente porque ese es uno
de los múltiples estados en los que puede estar una promesa.
Entonces puede estar pendiente cuando todavía está haciendo algo.
en el fondo.
Se puede rechazar si hubo un error. En este caso,
si hubo un error al obtener estos datos,
o se puede cumplir,
lo que significa que los datos llegaron exitosamente.
Y una vez más, no profundizaré
en los detalles aquí.
Para eso puedes seguir adelante.
y lea la documentación de promesa en MDN,
o puedes ver algún vídeo de YouTube,
o por supuesto también puedes
echa un vistazo a mi curso completo de JavaScript.
Pero, de todos modos, la promesa dice que estamos interesados.
Aquí está el estado cumplido, ¿verdad?
Entonces, ese es el estado al que realmente llegaron los datos,
y podemos manejar ese estado
usando o agregando el método then.
Entonces, por supuesto, primero deshagámonos de este console.log,
y entonces, nuevamente, esto devuelve una promesa,
y en una promesa podemos llamar al método then.
Y entonces el método then básicamente será llamado tan pronto como
a medida que se cumple la promesa.
Entonces, tan pronto como regresó exitosamente con los datos.
Ahora las promesas se utilizan para algo más que la obtención de datos,
pero aquí solo lo estoy usando como ejemplo.
¿bueno?
Ahora en este entonces método
necesitamos pasar una función de devolución de llamada,
que es básicamente el código que luego
ejecutarse tan pronto como lleguen los datos.
Entonces, JavaScript llamará a esta función de devolución de llamada aquí.
con la respuesta que ha recibido.
Por eso me gusta llamar a esto aquí res,
y estos datos luego deben convertirse
de json a un objeto JavaScript.
Nuevamente, sin profundizar en esto aquí,
aquí solo necesita ser res.json.
¿bueno?
Y ahora la cosa es
que al hacerlo se obtendrá otra promesa.
Entonces, este punto json aquí también lleva algo de tiempo,
entonces también es una operación asincrónica
y por lo tanto, aquí necesitamos agregar otro entonces.
¿bueno?
Pero entonces aquí ya tenemos nuestros datos finales.
en formato JavaScript.
Y entonces, esta función aquí quedará atrapada.
con el resultado de esta función anterior
que entonces son los datos.
Así que simplemente bloqueemos estos datos.
a la consola en este punto.
Así que veamos.
Y de hecho, aquí tenemos las cosas por hacer.
Entonces hay muchos de ellos.
Todos ellos llegaron a través de la API JASONPlaceholder.
Ahora lo que notas aquí otra vez
es que imprimió por primera vez a Jonas en la consola.
Entonces el resultado de esto, y solo más tarde es cuando esta matriz
La lista de objetos pendientes finalmente también se imprimió en la consola.
Y nuevamente, eso se debe a que estos datos llegaron más tarde.
Entonces lo que pasó aquí fue que, como mencioné antes
es que esta función de recuperación disparó una solicitud a la API,
y luego inmediatamente JavaScript pasó a la siguiente línea,
que es este de aquí, donde simplemente, básicamente
disfunción registrada aquí para ser ejecutada más tarde.
Lo mismo aquí, pero luego se ejecutó inmediatamente.
esta línea de código, ¿verdad?
Luego pasó algún tiempo
y luego llegaron los datos del IPI.
Y entonces, JavaScript vuelve aquí.
y ejecuta esta función de devolución de llamada
que habíamos registrado antes.
Y aquí es donde llega la respuesta.
Se convierte a JSON y aquí recibimos los datos.
en esta función de devolución de llamada y regístrelo en la consola.
Entonces, literalmente, JavaScript esperará
hasta que ejecute estas funciones aquí,
que normalmente no es como funciona JavaScript.
Pero aquí estamos usando JavaScript asincrónico.
aunque normalmente JavaScript es un lenguaje sincrónico
donde una línea de código simplemente se ejecuta tras otra.
Ahora, está bien, y aquí ahora en este punto.
podrías hacer algo un poco más significativo.
Por ejemplo, en reaccionar,
entonces normalmente tomaríamos estos datos y estableceríamos algún estado
que luego se reflejaría directamente en la interfaz de usuario,
pero, por supuesto, hablaremos de eso más adelante.
Por ahora, básicamente solo quería mostrarles,
o para revisar cómo usamos estos métodos de promesa aquí
para afrontar con éxito el momento en el que
los datos llegan desde la API.