‫Instructor: Ya aprendió
‫a usar Async / Await,
‫pero en realidad hay un poco
‫más para aprender sobre cómo funcionan realmente las funciones Async.
‫Así que hagámoslo ahora.
‫Para comprender un poco mejor lo que sucede aquí, intentemos
‫agregar algo de consola. registra después y
‫antes de llamar a funciones Async aquí.
‫Bien, consuela. log
‫Así que el paso
‫uno obtendrá fotos de
‫perros, está bien.
‫Y luego el número dos.
‫Aquí
‫solo digamos, terminamos de obtener fotos de perros.
‫Bueno. Así que salvémoslo.
‫Y vaya, qué pasó aquí.
‫Tenemos estas dos consolas. registros antes
‫de todos los registros que provienen de la función Async.
‫Entonces tenemos el uno, dos para este y
‫este y solo después
‫de eso tenemos los registros que
‫provienen de la imagen del perro.
‫¿Es eso lo que esperabas?
‫Entonces, si no, analicemos lo que sucedió aquí.
‫Bueno, como te dije antes, esta función Async realmente
‫se ejecuta en segundo plano.
‫Porque así es como se supone que se
‫comportan las funciones Async.
‫¿Verdad, eso tiene mucho sentido?
‫Así que no podemos simplemente detener el código aquí.
‫Así que tan pronto como accedemos a
‫esta función, no podemos simplemente detener la ejecución de nuestro hilo principal aquí.
‫¿Derecha?
‫Y esa es toda la filosofía de no bloquear
‫el registro de eventos.
‫Por lo tanto, necesitamos obtener algunas imágenes de perros de la API,
‫pero esa no es una excusa para detener la ejecución sobre el código.
‫Entonces para bloquear el registro de eventos.
‫Entonces, como resultado, cuando el motor de secuencia de comandos
‫de Java se detuvo, esta línea de código aquí,
‫simplemente descargará la función get dog pic al fondo y
‫pasará directamente a la siguiente línea.
‫Entonces esta segunda consola. inicie sesión aquí.
‫Por lo tanto, tiene sentido que primero se registre esta cadena aquí,
‫luego comenzará a ejecutar esta función,
‫luego de inmediato registrará esta línea de código y,
‫mientras tanto, leemos este archivo en segundo plano, y
‫tan pronto como sea listo,
‫comenzará a imprimir este registro, este registro y
‫también este registro.
‫Entonces eso es exactamente lo que está sucediendo aquí.
‫Uno dos, y luego los tres restantes.
‫¿Tener sentido? Bueno.
‫Luego vayamos un paso
‫más allá y devolvamos algo de nuestra función Async.
‫Así que voy a cambiar esto aquí a
‫tres, para que desde esta función, podamos devolver
‫una cadena que diga dos, bueno, digamos listo y luego agreguemos aquí
‫nuevamente un emoji aquí para que
‫aparezca un poco más en nuestra consola.
‫Tan listo aquí.
‫Y luego salvemos eso.
‫Simplemente alguna variable, no importa cuál sea.
‫Y luego registre x en la consola.
‫Así que veamos qué pasa.
‫Y ahora aquí tenemos esta extraña promesa
‫pendiente en lugar de la cadena aquí que tal vez estábamos esperando.
‫Entonces, ¿por qué está x aquí y no esta
‫cadena, sino esta promesa aquí?
‫Bueno, ¿recuerdas cómo dije al comienzo del
‫último video que una función
‫Async en realidad devuelve una promesa automáticamente?
‫Bueno, esta es la prueba de eso.
‫Entonces, en lugar de iniciar sesión listo en la consola en este punto,
‫solo nos dice que x es una promesa que en este
‫punto todavía se está ejecutando, por lo
‫que aún está pendiente.
‫Por eso dice pendiente aquí.
‫Por lo tanto, el script java, por supuesto, no puede saber que
‫x será esta cadena lista aquí en algún momento.
‫Y así simplemente pasa a la siguiente consola. log tal
‫como lo habíamos comentado antes.
‫Y en el momento en que JavaScript realmente
‫sabe que esta x aquí debería ser la tensión que devolvimos bien
‫en ese momento, este código aquí hace
‫tiempo que terminó de ejecutarse.
‫Pero, ¿qué deberíamos hacer si realmente
‫quisiéramos obtener ese valor de retorno aquí?
‫Entonces, ¿qué pasa si realmente quisiéramos devolver esta cadena y
‫registrarla a través de la consola?
‫Bueno, tendríamos que tratar esta función Async
‫como una promesa.
‫Y entonces usaríamos el método DEN
‫en él o nuevamente, usaríamos Async / Await.
‫Déjame mostrarte cómo hacer eso.
‫Entonces, en lugar de intentar guardar el valor devuelto
‫en una variable, podemos usar el método DEN en ella.
‫Y aquí es donde podemos llamarlo x.
‫Así que consola. log x, al igual que lo que
‫teníamos aquí y luego también haríamos este dentro del
‫identificador DEN, ¿de acuerdo?
‫Así que repasemos lo que hicimos aquí.
‫Así que conseguir una foto de perro devuelve una promesa, ¿recuerdas eso?
‫Y para cada uno de los que tenemos una promesa, utilizamos el método
‫DEN para tener acceso a su valor futuro.
‫Entonces, el valor que eventualmente regresará.
‫En ese caso, esta será la cadena de dos listas.
‫¿Okey?
‫Entonces, si desea obtener
‫x a eso, debemos usar el método DEN como lo hicimos aquí.
‫Y solo después de eso, podemos registrar
‫la tercera cadena aquí.
‫Entonces, si lo guardamos ahora
‫de esta manera, debería funcionar como se esperaba.
‫Y sí lo hace.
‫Entonces tenemos nuestro primer registro, luego todos los
‫registros provenientes de nuestra función Async, luego el listo
‫proviene de la línea 42 aquí.
‫Y finalmente, el número 3. Perfecto.
‫Y espero que tenga mucho sentido para ti.
‫Ahora bien, ¿qué pasa si realmente hubo un error?
‫Bueno, eso es un poco más difícil de manejar.
‫Así que, de nuevo, provoquemos un error como lo hicimos antes.
‫Pero ves que en realidad todavía ingresamos al
‫método DEN aquí.
‫Así que este bloque de aquí, está bien.
‫Entonces, incluso si hubiera un error aquí en esta promesa,
‫básicamente todavía se resuelve como una promesa exitosa.
‫Entonces todavía devuelve este valor aquí.
‫E incluso si agregamos nuestro controlador de captura aquí,
‫eso no cambiará ese hecho.
‫Bien, usemos catch aquí y
‫luego usemos la consola. registre y registre el error
‫aquí para que pueda ver que todavía no registró ningún error.
‫Y eso es nuevamente porque esta promesa que
‫proviene de esta función Async aún
‫se marcará como exitosa.
‫Pero si realmente desea marcarlo como
‫rechazado, tendremos que hacer algo llamado lanzar un error.
‫Así que hagámoslo aquí en este bloque de captura.
‫Entonces, si hubo un error, no solo queremos registrarlo
‫en la consola, también queremos lanzarlo.
‫Entonces usamos una función de JavaScript incorporada llamada throw.
‫Y con eso podemos lanzar un error.
‫Así que esto marcará ahora toda esta función de esta promesa
‫como rechazada.
‫Bueno.
‫En realidad, no solo registremos este error,
‫simplemente hagamos un error para hacerlo un poco más visible, y
‫quizás algo así como una explosión.
‫Si, algo como esto.
‫De acuerdo, entonces démosle una oportunidad y veamos qué sucede.
‫Y bam, ahora tenemos nuestro error aquí en realidad.
‫Entonces dice que no pude encontrar ese
‫archivo, por lo que este registro proviene de
‫este registro de captura aquí, pero al mismo tiempo arrojará un error.
‫Y si arroja un error, marcará
‫toda esta promesa como rechazada.
‫Y es por eso que ingresamos el registro de capturas aquí.
‫Lo que, por supuesto, activará a su vez
‫esta consola. registro de este error.
‫¿Okey?
‫Y esto, por supuesto, es una capa completamente nueva de complejidad.
‫Bueno.
‫Pero sigue siendo muy importante comprender cómo funciona esto porque
‫sucede en la vida real todo el tiempo.
‫Por lo tanto, necesitamos devolver valores de funciones
‫asíncronas todo el tiempo y, por lo
‫tanto, es importante saber cómo manejar estos valores devueltos.
‫En este caso, use DEN y catch.
‫Ahora, el problema con esto es que mezcla
‫promesas con Async / Await.
‫Así que tenemos Async / Await
‫aquí, luego, de repente, volvemos a usar
‫DEN y nos ponemos aquí.
‫Así que déjame mostrarte otro patrón de cómo hacerlo.
‫Bien, entremos en nuestra parte aquí, no
‫de esta manera, más así.
‫Y entonces usemos Async / Await para implementar esta lógica.
‫Ahora no queremos crear una función de nombre completamente nueva para esto,
‫por lo que vamos a usar un patrón bien conocido que
‫espero que sepas, que es un
‫IIFE, por lo que una expresión de función invocada inmediatamente.
‫Bien, entre paréntesis, definimos nuestra función.
‫Así, y luego lo llamamos de inmediato.
‫¿Recuérdalo?
‫Entonces, en este caso, dado que queremos usar Async /
‫Await, también decimos que es una función Async.
‫Está bien, y esto parece un poco extraño
‫aquí, pero si tomó, por ejemplo, mi curso de
‫JavaScript, en realidad le resultará familiar.
‫De acuerdo, de nuevo, declaras una función
‫entre paréntesis y luego la llamas función de inmediato.
‫Y así, de esta manera, no tiene que declarar
‫una función de nombre completo nuevamente a la que luego llamará en
‫algún momento más adelante.
‫Bueno.
‫Ahora que estamos usando Async /
‫Await, estamos usando el patrón try it catch nuevamente, como antes.
‫Así que fíjese, tenga acceso al error aquí, y
‫en realidad no podemos omitirlo aquí.
‫Entonces, incluso si no queremos usar
‫este error, aún tenemos que escribirlo aquí.
‫Bueno.
‫En futuras versiones de
‫JavaScript esto desaparecerá, pero por ahora debemos hacerlo así.
‫Entonces aquí es donde estará este error.
‫Y aquí arriba, tendremos todas estas consolas. registros.
‫Este
‫y este.
‫Y ahora espero que sepa cómo obtener
‫el valor de la función Async.
‫Entonces sabes cómo hacer eso.
‫De hecho, pausaré el video y te permitiré descubrir
‫cómo hacerlo por tu cuenta, ¿de acuerdo?
‫Así que acepta ese pequeño desafío y volveré
‫en un segundo.
‫Entonces, ¿lograste obtener esta cadena aquí, para que estos
‫dos estén listos en la variable x
‫como lo hicimos antes?
‫¿Así que así de aquí?
‫Así que es como lo hicimos antes.
‫Declaras una variable y luego esperas la promesa.
‫Y la promesa, en este caso, es conseguir una foto de perro.
‫¿Okey?
‫Entonces, esta función aquí es una función Async
‫y, por lo tanto, devuelve una promesa.
‫Y el valor de resultado de
‫esa promesa es este valor
‫aquí, que se devuelve, por lo que al esperar
‫ese valor, el resultado será esta cadena.
‫Así que lo almacenamos en x y luego, por supuesto,
‫podemos registrarlo en la consola.
‫Así que consola. log x.
‫Luego, en caso de que haya un error, lo detectará y
‫lo registrará en la consola aquí también.
‫Si le damos un guardado
‫ahora, entonces bam todavía obtenemos el error porque lo
‫teníamos aquí, por lo que esa parte aún funciona.
‫Arreglarlo, guardarlo y aquí vamos.
‫Así que ahora está funcionando según lo previsto.
‫Pero, de nuevo, con Async / Await es mucho más
‫limpio, se ve mucho mejor y también es más fácil de entender.
‫Y entonces no estamos mezclando Async / Await en un solo lugar
‫aquí y luego usando DEN y atrapar aquí como lo
‫hicimos antes con este fragmento de código.
‫¿Okey?
‫Entonces, en la vida real, este tipo de cosas ocurren todo el tiempo.
‫Entonces, tenemos una función Async y la llamamos
‫desde otra función Async, y tal vez incluso llamamos
‫a otra función Async desde
‫esa primera función Async, por lo que
‫tenemos un montón de estas funciones Async interactuando entre sí.
‫Por eso es muy importante que sepa cómo
‫funciona todo esto.
‫Y nuevamente, para recapitular, lo más
‫importante que debe recordar es que una función Async
‫devuelve automáticamente una promesa, y que el valor que devolvemos
‫de una función Async será el valor de resultado de
‫esa promesa.
‫Y a partir de ahí, simplemente podemos manejarlo
‫como una promesa más.
‫Y eso es exactamente lo que hicimos aquí al
‫esperar esa primera promesa que creamos.
‫¿Okey?
‫Así que, por favor, intente entender esto y
‫asegúrese de entenderlo realmente.
‫Porque durante el resto del curso voy
‫a asumir que sabes cómo trabajar con estas cosas.
‫Y esa es exactamente la razón por
‫la que creé esta sección, para sacarla del camino antes de
‫que realmente empecemos a trabajar sin JS y express, y todas estas cosas buenas.
‫¿Okey?
‫Así que casi terminamos con esta sección, solo hay una pequeña
‫cosa que quiero mostrarles en
‫el siguiente video.