Entonces, en la conferencia anterior, aprendimos cómo
para manejar la obtención de datos utilizando métodos de promesa.
Pero en esta conferencia, vayamos un paso más allá.
y aprende a hacer exactamente lo mismo con una apariencia mucho más agradable.
y una sintaxis más limpia llamada async/await.
Entonces, esta sintaxis que acabamos de aprender aquí funciona muy bien.
pero yo diría que no es lo más fácil de trabajar.
En cierto modo, no es el código más bonito.
Entonces, básicamente podemos implementar esta lógica aquí.
de una manera diferente usando funciones asíncronas
y la palabra clave de espera.
Ahora, todo lo que les expliqué en la conferencia anterior.
sigue siendo 100% válida, y toda la idea
detrás de las promesas no desaparece.
Lo único que va a desaparecer
Son estos los manejadores que están aquí.
Entonces, lo haremos nuevamente de una manera más limpia.
Ahora, en lugar de hacerlo así,
Creemos una función asíncrona.
Entonces, eso es simplemente una función con la palabra clave async y
antes, y luego llamémoslo o obtengamos todos.
Entonces tomemos esta parte aquí.
y de hecho ahora comentaré todo esto aquí.
Y ahora podemos, dentro de la función asíncrona, esperar esto.
Entonces, espere esta promesa inmediatamente aquí.
Y lo que sucederá entonces es que en realidad,
Dentro de esta función asíncrona, JavaScript no
pase inmediatamente a la siguiente línea, como suele hacer.
Entonces, como expliqué en la conferencia anterior, JavaScript,
de forma predeterminada, siempre continuará inmediatamente
a la siguiente línea.
Básicamente, nunca espera a nadie.
Entonces, cuando lo recojamos aquí, inmediatamente se moverá aquí,
muévete aquí y muévete aquí.
Por supuesto, no ejecutará estas funciones de devolución de llamada,
pero básicamente los registrará.
Eso no es realmente importante, pero lo importante es
que vimos que inmediatamente, este código aquí estaba bloqueado
a la consola.
Entonces, mucho antes de que llegaran los datos de la API.
Pero ahora, con la palabra clave await dentro de las funciones asíncronas,
Por primera vez en JavaScript, tenemos una forma.
de detener y pausar el código dentro de una función.
Y al hacer esto, hace que la función parezca mucho más
normal de nuevo y mucho más normal,
código JavaScript sincrónico.
Porque entonces podemos almacenar muy simplemente el resultado.
de esto aquí en una variable.
Entonces, llamémoslo nuevamente respuesta.
y es exactamente el mismo nombre que antes.
Entonces, aquí llamamos a la respuesta una res.
dentro de esta función de devolución de llamada porque, bueno, la respuesta
de la recuperación son los datos que se pasan a esta devolución de llamada.
Entonces, básicamente la respuesta es esta res.
Así que aquí podemos llamarlo inmediata y directamente así.
de una manera mucho más legible
y mucho más fácil de entender.
Y lo mismo, entonces, con los datos.
Entonces, podemos llamarlo inmediatamente datos.
y luego simplemente espere res.jsn.
Y luego podemos registrarlo en la consola así.
Y luego podemos llamar esa función aquí.
Y ahí vamos.
Entonces, aquí obtenemos nuevamente todos estos datos que teníamos antes.
Pero, claro, esa espera sólo sirve
dentro de esta función asíncrona.
Entonces, si aquí volvemos a registrar a Jonas en la consola,
verías que Jonas, por supuesto,
debe registrarse nuevamente antes.
Porque si bien JavaScript aquí simplemente define la función,
luego deriva aquí, llama a la función
e inmediatamente pasa a la siguiente línea.
Pero esta función aquí, mientras se ejecuta,
en realidad espera, pero solo aquí dentro de esta función asíncrona
y sólo en las líneas que tienen esta palabra clave de espera.
Entonces, ¿qué crees que pasaría si realmente lo intentáramos?
¿Devolver algo desde aquí y almacenarlo en una variable?
Entonces, ¿devolver estas publicaciones? Bueno, eso no es correcto.
Bueno, en realidad, sí, datos. Aquí se llama datos.
Ahora, intentemos almacenar eso aquí en alguna variable.
Entonces, todos iguales, consigan todos.
Entonces, ¿qué crees que se registraría?
a la consola de aquí?
Bueno, podemos verlo aquí. Es una promesa.
Entonces, ¿qué está pasando aquí?
Bueno, es lo mismo que antes.
Inmediatamente después de llamar a esta función,
JavaScript pasa inmediatamente a la siguiente línea.
No espera.
Y entonces, en este punto, JavaScript no tiene manera
de saber aún cuáles van a ser estos todos.
Y así de simple, todos es una promesa,
lo que significa que el valor del resultado de esta función asíncrona
Siempre es solo una promesa.
Y este es un conocimiento fundamental que necesitas.
tener para trabajar con funciones asíncronas
y con datos asíncronos en general en JavaScript.
Porque ahora, si realmente quisieras obtener estos todos
aquí, nuevamente tendrías que usar el método then
aquí o lo habrías hecho
para utilizar otra función asíncrona/espera.
Ahora tienes otra promesa en tus manos aquí.
que necesitas manejar.
Pero, afortunadamente para nosotros, en React, eso no es muy común.
porque normalmente lo que queremos tan pronto como recibimos algunos datos
es establecer el estado.
Entonces, eso lo haríamos inmediatamente aquí en esta función asíncrona.
y entonces normalmente no devolveríamos nada aquí.
Así que esto fue simplemente mostrarles nuevamente el modo sincrónico.
y naturaleza asincrónica de JavaScript.
Entonces, si quieres entender esto un poco mejor,
entonces puedes seguir adelante y comparar estas dos soluciones aquí,
que logran exactamente lo mismo,
y ver en qué se diferencian y cómo, al menos
En mi opinión, este es mucho mejor porque se ve,
De nuevo, como una función normal,
mientras que este de aquí realmente no lo hace.
Entonces, aquí puedes almacenar fácilmente el resultado.
de los datos esperados inmediatamente en algunas variables.
Y sí, entonces úsalos en un flujo.
eso parece un código sincrónico.
Bien, y con esto, terminamos nuestra revisión.
de la sección JavaScript esencial para React.
Espero que esto te haya puesto al día.
con todo el JavaScript que necesitas saber para poder
para ahora completar exitosamente este curso.
Y ahora ha llegado el momento de actuar de verdad.
al curso de React completo y definitivo.