‫Instructor: Hablemos ahora de
‫una característica sorprendente de JavaScript asincrónico llamada async / await.
‫Así que las promesas ya han mejorado mucho nuestro
‫código, pero aún podemos hacerlo mejor.
‫Entonces, en lugar de consumir promesas, con el método then, que
‫aún nos hace usar todas estas funciones de devolución de llamada,
‫podemos usar algo llamado async / await.
‫Esa es una nueva característica introducida en JavaScript en ES8, que
‫nos hará la vida mucho más fácil.
‫Por lo general, cuando
‫escribimos código, consumiremos promesas todo el tiempo,
‫pero generalmente no las produciremos tanto.
‫Y así, async / await lo hace mucho más fácil de hacer.
‫Ahora, para usar async
‫/ await, necesitamos crear una función llamada async.
‫Así que comentemos esta parte aquí, para que no
‫la perdamos por completo, en caso de que desee
‫mantenerla aquí como referencia o algo así.
‫Así que getDogPic es la función que vamos a escribir.
‫Y ahora necesitamos marcar esta función
‫como una función asincrónica.
‫Entonces usamos async
‫aquí, y luego creamos la función como lo hacemos normalmente.
‫Entonces, esta palabra clave asíncrona aquí simplemente significa
‫que esta es una función especial que es asíncrona.
‫Básicamente, uno que sigue ejecutándose en segundo
‫plano mientras se ejecuta el código que contiene, mientras
‫que el resto del código sigue ejecutándose en el bucle de eventos.
‫Entonces, estas funciones asincrónicas harán un trabajo
‫asincrónico sin bloquear el bucle de eventos, ¿de acuerdo?
‫Esta función asincrónica también devolverá
‫automáticamente una Promesa.
‫Pero más sobre eso un poco más adelante en este video.
‫Por ahora, lo que es realmente
‫importante saber es que dentro de una función asíncrona siempre podemos tener
‫una o más expresiones de espera y
‫así es como funcionan.
‫Entonces usamos await y luego Promise aquí.
‫Así que comencemos con este, ¿de acuerdo?
‫Y luego podemos guardar el resultado de eso en una variable.
‫En este caso, data.
‫Bien, entonces esto aquí será lo mismo que
‫tener este fragmento de código.
‫Entonces veamos qué pasa aquí.
‫Entonces, esta espera aquí básicamente detendrá la
‫ejecución del código en este punto hasta que se resuelva esta Promesa.
‫Ahora, si la Promesa se cumple,
‫lo que recuerda significa que tuvo éxito,
‫entonces el valor de la
‫expresión de espera es el valor resuelto de
‫la Promesa, que finalmente se asigna a la variable de datos, ¿de acuerdo?
‫Entonces, en lugar de tener la Promesa
‫y luego el método
‫then, que luego obtiene los datos como argumento.
‫Con async / await es mucho más simple.
‫Todo lo que hacemos es básicamente detener la ejecución del código
‫en esta Promesa aquí, esperar hasta
‫que regrese con su valor y luego almacenar ese valor en una variable.
‫Y así, el código es
‫incluso más fácil de entender que antes.
‫Y ese es el objetivo
‫de async / await: es hacer que nuestro código se
‫parezca más a un código síncrono mientras, de
‫hecho, sigue siendo asincrónico detrás de escena, ¿de acuerdo?
‫Así que sigamos con esto y copiemos las piezas de
‫este ejemplo anterior en el nuevo, ¿de acuerdo?
‫Entonces, antes, teníamos nuestra Promesa, luego teníamos nuestro controlador y luego
‫registramos los datos en la consola.
‫Así que eso es exactamente
‫lo que tenemos, simplemente de una manera diferente aquí.
‫Entonces almacenamos nuestros datos en la variable
‫y luego los registramos aquí.
‫A continuación, obtenemos la imagen del perro de la API.
‫Entonces tenemos la variable res, entonces esa será esta.
‫Entonces, nuevamente, el resultado del controlador
‫de entonces y esperamos esta Promesa aquí para regresar con los datos.
‫Espero que esto empiece a tener sentido ahora.
‫Entonces, después de eso, registramos esto en la consola, por lo que el
‫resultado de esa llamada a la API.
‫Y finalmente, usamos nuestra última Promesa
‫para escribir esa cadena en un archivo.
‫Así que esa es esta
‫Promesa aquí, y esta no resuelve ningún valor significativo.
‫Así que ni siquiera necesitamos almacenar nada en una variable.
‫Todo lo que hacemos es detener el
‫código aquí hasta que finalice el proceso de escritura.
‫Y luego inicie sesión en la
‫consola esta cadena.
‫Entonces, si comparas este código con lo que teníamos antes,
‫se ve mucho más limpio
‫y mucho más fácil de entender, ¿no es así?
‫Ahora, para que esto funcione, todo
‫lo que tenemos que hacer es llamar a esta función aquí.
‫Dale un guardado y, de hecho, todavía funciona.
‫Entonces todavía obtenemos nuestro resultado.
‫Todo sigue funcionando igual.
‫Entonces eso es asombroso, ¿verdad?
‫Solo una última cosa que debemos hacer aquí
‫es nuestro manejo de errores.
‫Porque en este momento, no estamos manejando errores en ningún lado, ¿verdad?
‫Así que aquí abajo usamos el método de
‫captura, pero ahora mismo, realmente
‫no podemos adjuntar eso en ningún lado, ¿verdad?
‫Entonces, en cambio, lo
‫que hacemos aquí es usar algo llamado try-catch.
‫Y en realidad eso no tiene nada que ver con async
‫/ await, es una característica estándar de JavaScript.
‫Déjame mostrarte cómo funciona.
‫Así que básicamente envolvemos todo nuestro código en un bloque de prueba.
‫Entonces, básicamente, el
‫código intentará ejecutar lo que sea que esté aquí.
‫Y luego también necesitamos un bloque de
‫captura, que tendrá acceso a un error si lo hay.
‫Entonces, si ocurre un error en este bloque aquí, saldrá
‫inmediatamente de este bloque, este
‫bloque de prueba aquí, entonces este.
‫E inmediatamente ingrese al bloque catch, y nos
‫dará acceso al error que sucedió
‫en el bloque try.
‫Así que ahora, todo lo que tenemos que hacer es tomar este
‫fragmento de código para este registro
‫de la consola, ponerlo aquí, guardarlo y ahora funciona.
‫Solo para causar
‫un error ahora, cambiemos este aquí nuevamente.
‫Y de hecho, no pude encontrar ese archivo.
‫Entonces esta Promesa aquí rechazada, ¿verdad?
‫Entonces, esta Promesa fue rechazada y hubo un error
‫y de inmediato entró en el bloque de captura y luego
‫registró este error en la consola.
‫Ponerlo de nuevo.
‫Y ahora, de hecho, funciona de nuevo.
‫Bien, así es como funciona async / await.
‫Así que recuerde que solo podemos usar await si
‫está dentro de una función asincrónica.
‫Es por eso que siempre se convoca, por
‫lo que siempre espera una barra asincrónica.
‫Debido a que estas dos características, pertenecen estrechamente.
‫Entonces, para recapitular rápidamente,
‫async / await nos permite en lugar de
‫tener todos estos controladores con estas
‫funciones de devolución de llamada en ellos.
‫Nos permite hacer que nuestro código parezca más sincrónico.
‫Entonces, todo lo que hacemos es usar la palabra clave
‫await frente a nuestra Promesa.
‫Y luego esperará a que esa
‫Promesa regrese con su resultado.
‫Solo recuerde que esto
‫es lo que llamamos azúcar sintáctico para promesas.
‫Entonces, simplemente hace que las promesas se vean más hermosas,
‫pero detrás de escena todo sigue funcionando igual con
‫la lógica de Promesa que les expliqué antes.
‫Nuevamente, esto es solo para hacernos
‫la vida un poco más fácil al codificar y hacer
‫que nuestro código se parezca un poco más a un código síncrono.
‫Así es como implementamos async / await.
‫En el siguiente
‫video aprenderemos un poco más sobre cómo funcionan realmente las funciones asíncronas.