¿Cómo funcionan las Promises y Async/Await en JavaScript? [2022]

Summary

En este video, Carlos Azaústre, el presentador, aborda el tema de la sincronía en JavaScript, centrando su atención en el uso de promesas y la sintaxis `async/await`. Comienza explicando cómo la ejecución de código JavaScript puede verse afectada por retrasos en la red, lo que lleva a la necesidad de manejar la asincronía. Para ilustrar esto, utiliza la función `setTimeout` para simular una solicitud a una API y muestra cómo las promesas pueden manejar la resolución de tales tareas de manera eficiente. Luego, introduce la sintaxis `async/await` como una forma más elegante y legible de escribir código asíncrono, comparándola con el enfoque tradicional de las promesas y `.then()`/`.catch()`. Carlos destaca que ambas formas son válidas y compatibles con la mayoría de los navegadores, dejando la elección al desarrollador según las necesidades del proyecto. El video termina con una invitación a los espectadores para que dejen sus comentarios y dudas, y promueve la interacción con el canal.

Takeaways

• 📚 Carlos Azaústre es el presentador del canal y habla sobre la sincronía en JavaScript, específicamente el uso de Promesas, `async` y `await`.
• 🌐 Utiliza jsbing.com para ejecutar y ver la salida de código JavaScript, HTML y CSS sin necesidad de un editor o configuración.
• 🎬 Se simula una situación en la que los datos, que podrían provenir de una API o servicio, tienen un retardo en su entrega.
• ⏱️ `setTimeout` se utiliza para simular la sincronía en JavaScript, ejecutando una función después de un tiempo determinado.
• 🔄 Las Promesas son objetos especiales de JavaScript que permiten manejar el retardo en la ejecución del código de manera asíncrona.
• 📁 Una Promesa se resuelve con un valor o se rechaza con un error, siempre devolviendo algo al final de su ejecución.
• 🔗 Las Promesas permiten concatenar operaciones asíncronas, ejecutándolas una después de la otra en secuencia.
• 📝 `async/await` es una forma de escribir código asíncrono de manera más legible y secuencial, aunque internamente sigue utilizando Promesas.
• 🚀 La palabra reservada `await` se utiliza dentro de una función `async` para pausar la ejecución hasta que una Promesa se resuelva.
• 🛑 `try/catch` se puede utilizar para manejar errores en código `async`, capturando cualquier excepción que se lance.
• ✅ La elección entre usar Promesas y `async/await` depende de preferencias personales y necesidades específicas del proyecto.

Q & A

¿Qué es la sincronía en JavaScript y cómo afecta la ejecución del código?

La sincronía en JavaScript se refiere a cómo el código se ejecuta en orden, una instrucción después de la otra. Cuando hay una operación asíncrona, como una llamada a una API, el código siguiente no espera a que la operación termine antes de ejecutarse, lo que puede llevar a problemas de consistencia de datos.

¿Qué son las Promesas en JavaScript y cómo resuelven los problemas de sincronía?

Las Promesas son objetos especiales de JavaScript que representan el resultado de una operación asíncrona. Permiten manejar el éxito o fracaso de una operación de manera separada, evitando así el problema de la sincronía y facilitando la programación orientada a eventos.

¿Cómo se utiliza la función `setTimeout` para simular una operación asíncrona?

La función `setTimeout` se utiliza para ejecutar un fragmento de código después de un cierto período de tiempo. En el ejemplo, se utiliza para simular un retardo en la obtención de datos, imitando así una operación asíncrona.

¿Qué hace la función `resolve` en el contexto de una Promesa?

La función `resolve` es una de las dos funciones que se pasan como argumentos al crear una nueva Promesa. Se invoca cuando la operación asíncrona finaliza con éxito, y se utiliza para proporcionar el valor resultante de la Promesa.

¿Cómo se utiliza la palabra clave `async` y `await` para escribir código asíncrono de manera más legible?

La palabra clave `async` se utiliza para marcar una función como asíncrona, y `await` se utiliza dentro de una función asíncrona para esperar a que se resuelva una Promesa. Esto permite escribir código que se comporta de manera similar al código sincrono, facilitando su lectura y mantenimiento.

¿Qué es `async/await` y cómo se diferencia de las Promesas tradicionales?

El `async/await` es una sintaxis más moderna y legible para manejar operaciones asíncronas en JavaScript. Aunque funciona internamente con Promesas, permite escribir código que parezca secuencial, simplificando la programación asíncrona.

¿Cómo se maneja un error en una operación asíncrona utilizando `async/await`?

Con `async/await`, los errores se manejan dentro de un bloque `try/catch`. Si la operación asíncrona produce un error, se lanza la excepción y se puede capturar en el bloque `catch`.

¿Por qué es importante manejar tanto el éxito como el fracaso de una operación asíncrona?

Es importante manejar tanto el éxito como el fracaso de una operación asíncrona para garantizar la robustez del programa. Esto permite que el código reaccione adecuadamente a diferentes situaciones y maneje errores de manera efectiva.

¿Cómo se utiliza la función `then` en una Promesa para manejar el resultado de una operación asíncrona?

La función `then` se utiliza para especificar qué hacer una vez que una Promesa se resuelve. Recibe el valor resultante de la Promesa y permite encadenar más operaciones o manejar el resultado de manera adecuada.

¿Qué es `.catch` y cómo se utiliza en el manejo de errores de Promesas?

El método `.catch` se utiliza para manejar errores en una Promesa. Se ejecuta si la Promesa se rechaza, es decir, si ocurre un error en la operación asíncrona que la Promesa representa.

¿Cómo se puede concatenar Promesas para ejecutar varias operaciones asíncronas en secuencia?

Se pueden concatenar Promesas utilizando la función `.then()` para encadenar operaciones asíncronas. Cada `.then()` después de la primera maneja el resultado de la Promesa devuelta por el `.then()` anterior.

¿Cómo se utiliza el operador `await` dentro de una función marcada con `async`?

El operador `await` se utiliza dentro de una función `async` para pausar la ejecución de la función hasta que una Promesa se resuelva. Permite escribir código asíncrono de manera más clara y estructurada.

Outlines

00:00

😀 Introducción a la sincronía en JavaScript

El primer párrafo presenta al canal y a su anfitrión, Carlos Azaústre, y se centra en la sincronía en JavaScript, específicamente el uso de Promesas, 'async' y 'await'. Se describe cómo la ejecución de código JavaScript puede verse afectada por retrasos en la red, y cómo las Promesas pueden manejar esta asincronía. Se utiliza la función 'setTimeout' para simular la latencia en la obtención de datos, y se discute cómo las Promesas permiten que el código se ejecute de manera más eficiente y cómo se resuelven los errores.

05:02

📚 Utilización de 'async' y 'await' para manejar asincronía

El segundo párrafo profundiza en el uso de 'async' y 'await' en JavaScript, que permiten escribir código de manera más secuencial a pesar de que la ejecución sigue siendo asíncrona. Se muestra cómo se puede utilizar 'await' para esperar la resolución de una Promesa y cómo se puede manejar el error en caso de que la Promesa sea rechazada. Además, se destaca la importancia de encapsular el código 'await' dentro de una función asíncrona y se menciona el uso de bloques 'try' y 'catch' para capturar posibles errores.

10:04

🔍 Comparación entre Promesas y 'async'/'await'

El tercer párrafo compara las Promesas con 'async' y 'await', destacando que ambos son mecanismos para manejar la asincronía en JavaScript y que son fundamentalmente equivalentes. Se menciona que, aunque 'async' y 'await' ofrecen una sintaxis más limpia y legible, en ocasiones puede ser más práctico utilizar las Promesas con sus métodos '.then()' y '.catch()'. Se concluye con una invitación a los espectadores para que dejen sus comentarios y dudas y se les anima a seguir el canal para recibir más información en futuras publicaciones.

Keywords

💡Sincronía

La sincronía en programación se refiere a la gestión de las operaciones que no son inmediatas, como las llamadas a una API o la espera de una respuesta de red. En el video, el tema de la sincronía es central, ya que se aborda cómo manejar la asincronía en JavaScript usando promesas y async/await.

💡JavaScript

JavaScript es un lenguaje de programación ampliamente utilizado para crear aplicaciones web interactivas. En el video, se utiliza para ilustrar cómo se gestionan las operaciones asincrónicas a través de promesas y async/await.

💡Promesas

Las promesas en JavaScript son un objeto que representa la eventual completación (o fracaso) de una operación asíncrona. En el video, se explica cómo las promesas permiten manejar la asincronía de manera más elegante y cómo se relacionan con la función async/await.

💡Async/Await

Async/Await es una forma de escribir código asíncrono de una manera que se comporta como si fuera síncrono. En el video, se muestra cómo async/await simplifica la escritura de funciones asíncronas, haciendo el código más legible.

💡setTimeout

setTimeout es una función de JavaScript que permite ejecutar un código después de un determinado número de milisegundos. En el video, setTimeout se utiliza para simular la asincronía, demostrando cómo se comporta la función con un retraso.

💡Función

Una función en JavaScript es un bloque de código que solo se ejecuta cuando se llama. En el contexto del video, las funciones son fundamentales para entender cómo se manejan las promesas y async/await, que son llamadas para manejar operaciones asincrónicas.

💡Callback

Un callback es una función que se pasa a otra función como argumento y que se ejecuta dentro de la función que la recibe. En el video, se menciona cómo los callbacks son una forma de manejar la asincronía, aunque se sugiere que las promesas y async/await son formas más modernas y limpias de hacerlo.

💡Error Handling

El manejo de errores en programación es la capacidad de un programa para identificar y responder adecuadamente a condiciones inesperadas. En el video, se discute cómo se manejan los errores en el contexto de las promesas y async/await, usando métodos como .catch para capturar errores.

💡Data Root

En el video, la 'raíz de datos' se refiere a una estructura de datos que contiene información, como una lista de películas con sus títulos y años de estreno. Se utiliza como ejemplo para ilustrar cómo se podría manejar la obtención de datos asincrónicamente.

💡Web Application

Una aplicación web es un programa informático que se ejecuta en un navegador web y se utiliza para interactuar con el usuario a través de la web. En el video, se menciona un ejemplo de una aplicación web que permite ejecutar código JavaScript y ver la salida y la consola rápidamente.

💡API

API (Interfaz de Programación de Aplicaciones) es un conjunto de rutinas y protocolos que permite el acceso a los servicios de un software. En el video, se hace referencia a las llamadas a una API como un ejemplo de operaciones que requieren manejo de asincronía.

Highlights

Carlos Azaústre, el creador del canal, presenta un video sobre la sincronía en JavaScript.

Se discute el uso de Promesas, `async` y `await` para manejar la asincronía en JavaScript.

Se utiliza la plataforma js bin.com para ejecutar y visualizar código JavaScript, HTML y CSS.

Se simula una API que devuelve datos de películas con un retardo usando `setTimeout`.

Se muestra cómo las Promesas permiten manejar la retroalimentación de datos de manera asíncrona.

Se introduce el concepto de `resolve` y `reject` en las Promesas.

Se explica que `async` y `await` son una forma más legible de escribir código asíncrono.

Se menciona que `async` y `await` son compatibles con casi todos los navegadores modernos.

Se demuestra cómo `await` se utiliza para esperar la resolución de una Promesa antes de continuar.

Se ilustra cómo se puede manejar errores usando `try` y `catch` con `async` y `await`.

Se proporciona un ejemplo de cómo forzar un error en una Promesa y cómo se maneja ese error.

Se discute la elección entre el uso de Promesas y `async`/`await` dependiendo de la legibilidad y la simplicidad.

Se aconseja que la decisión de usar Promesas o `async`/`await` sea una cuestión de preferencia personal y proyecto.

Se invita a los espectadores a dar like, suscribirse y comentar con sus dudas o impresiones.

Carlos Azaústre alienta a la participación y comentarios para futuras sesiones y tutoriales.

Se ofrece un resumen de las ventajas de las Promesas y `async`/`await` en la gestión de la asincronía en JavaScript.

Se destaca la importancia de la comprensión de la sincronía en el desarrollo de aplicaciones web modernas.

Transcripts

muy buenas y bienvenido o bienvenida de

nuevo a mi canal mi nombre es carlos

azaústre y puedes encontrarme en

instagram como carlos austero hablar de

la sincronía javascript en concreto el

uso de promesas it y también de asinca

way como a mí me gusta directamente

vamos a pasar al código para que veas

cómo funciona vamos a ello veamos

entonces el ejemplo tengo que ha abierto

js bing.com que es una aplicación web

que nos permite ejecutar código

javascript también html css y ver la

salida y también la consola rápidamente

sin tener que abrir ningún editor tener

que configurar nada así podemos probar

este ejemplo rápido entonces para

empezar vamos a imaginar que tenemos una

raíz de datos que lo tengo aquí copiado

lo voy a pegar es una raíz de datos que

son en este caso tres objetos que bueno

simulan unas películas no tienen una

tienen un title y tienen el año en el

que se estrenaron vale entonces

imaginemos que tenemos una función que

devuelva estos datos

la podemos llamar perfectamente de datos

datos

tenemos una función y esto van

directamente devuelve los datos vamos a

ver que cuando la llamamos un con solo

pues los tenemos ahí directamente porque

esto es algo sin crono es decir yo tengo

un array de datos y tengo una función

que me los devuelve y ya está pero

imaginemos que estos datos pues no los

tenemos aquí sino que es una p que nos

devuelve ese array u otro servicio

etcétera cualquier llamada que se haga a

través de la red tiene un pequeño delay

un tiempo en el que tarda en ejecutarse

pueden ser milisegundos pero ya eso

produce la sincronía de que no es algo

directo como esto no lo tenemos en

ningún servicio sino que es una red de

datos vamos a simular esa sincronía con

la función set time out day time out en

java script nos permite ejecutar una

función pasado x tiempo vamos a verlo

entonces esto luego ya

comentar y vamos a crear de nuevo qué

datos

y

pero ahora simulando ese retraso con

sentime out

que recibe una función

el segundo parámetro es el tiempo vamos

a poner 1.500 milisegundos un segundo y

medio que como ves es muy poco pero ya

es suficiente para que exista esa

sincronía y qué va a hacer esta función

2 directamente lo que dijimos devolver

esa raíz de datos

si ahora lo imprimimos por pantalla

vamos a borrar y corremos nos devuelven

de fainé porque cuando llevamos a la

función se va a ejecutar ese time out

iba a esperar 1500 segundos y como no

hay nada que haga que digamos espere a

que esto se resuelva pues directamente

nos devuelven de find porque no devuelve

nada devuelve datos pero todavía no ha

pasado ese tiempo como se resuelve esto

pues esto se resuelve gracias a las

promesas son un objeto especial de

javascript que nos permite ejecutar un

trozo de código y cuando esté listo se

devuelve y bien y si no hay cualquier

error pues se devuelve un error pero

siempre va a devolver algo lo único que

pues qué va a pasar ese tiempo acceder a

sincronía que caracteriza a javascript

entonces cómo hacemos esto sin lugar de

devolver directamente el set time out

esto devolvemos un objeto

promise

y éste promise recibe como argumentos 22

funciones una vez reason y otra es reyes

y entonces ahora hacemos el set time out

y en lugar de devolver el return datos

directamente no hacemos un retardo sino

que llamamos al reason y le pasamos los

datos

y si hubiera cualquier error pues lo

devolveremos con rayet imaginemos qué

pero en este caso no hace falta entonces

borramos esto

y ahora cómo se llama esta función si

usamos con sólo 10 datos no nos va a

funcionar nos va a devolver un objeto de

tipo promise recuerda que estamos

devolviendo eso un return new promise

pero esto habrá alguna manera como se

accede a este reason pues muy fácil lo

que hay que hacer es de hecho no sería

así sino que llamaríamos a que datos y

cuando se resuelva con dent tendremos

hay una función de callback entonces en

dem tendremos el primer argumento que

escribe la función de cuál va ser a lo

que devuelva ese reason en este caso los

datos aquí lo puede llamar como quieras

los vamos a llamar datos de nuevo y aquí

ya tendrías acceso a ese objeto o wise a

esos datos que recibas entonces aquí ya

sí que lo podríamos imprimir con zoom

lab como son los datos y se hará

ejecutamos vamos a ver qué pasa ese

segundo y medio e inmediatamente se

muestra el contenido de los datos

esto una forma más elegante de hacerlo

de esta manera porque bueno podemos

concatenar promesas podemos hacer si

ésta

esta función de volver a otra nueva

promesa pues la podríamos ejecutar o

resolver aquí después de seguido

y luego al final si hubiera algún error

se recoge con el cat y ahí iría el error

y pues lo que hubiera que lo que

quisieras hacer con ese error de mostrar

por pantalla mandar un log lo que sea

entonces estás como hasta ahora se han

utilizado las promesas con el punto de

en el punto catch

ahora tenemos el as inca wait que es una

manera de escribir esto pero en lugar de

con punto d sería una forma más síncrona

a la hora de escribir lo más secuencial

pero por debajo sigue siendo asíncrono

sigue habiendo promesas como se haría

esto pues lo voy a dejar aquí comentado

para verlo

pero ahora lo que haríamos es cuando

llamemos a que datos podemos utilizar la

palabra reservada a weight 10 datos

y pues el resultado de esa weight lo

podemos guardar en cualquier variable o

lo que sea entonces podemos tener aquí

con sus datos igual a weight de datos

aquí si te das cuenta arriba podríamos

acceder a los datos que devolvía a la

promesa después de ejecutar el ley y en

venden tendríamos una función de

callback que es esta de aquí que he

puesto como una función y ahí tendríamos

acceso a los datos y ya podríamos hacer

lo que fuera imprimirlos y hacer una

transformación lo que sea y de esta

manera queda más digamos secuencial no

tenemos aquí la variable datos entonces

a continuación podríamos imprimirlos

como hemos hecho antes ya es como de

hecho se puede es más legible aquí

decimos que tenemos datos espera a tener

esos datos cuando ya lo tengamos pues

listo seguimos lo único que esto sí lo

ejecutamos

va a dar un error porque bueno da otro

error porque datos ya lo tenía por aquí

me parece datos está aquí vale entonces

vamos a poner aquí datos fecha

i

y nos da un error de que a weight sólo

es válido dentro de una función

asíncrona esto qué significa pues que

tenemos que envolver todo esto dentro de

otra función es la pega que tiene pero

es fácil ponemos función

pachín pachín data por ejemplo como la

quieras llamar

puede ser una función así hago una re

función como tú quieras y esto iría

adentro

[Música]

y lo único es que tienes que poner la

palabra reservada a sinc antes de la

función para que a weight pueda ser

usado entonces luego ya lo único que

tienes que hacer es llamar a fecha in

that a que es esta función que hemos

creado aquí

y ahora si corremos pasa el segundo y

medio y tenemos los datos para hacerlo

más elegante bueno igual que con el

punto de entendemos el punto cat

podemos envolver esto dentro de una

bloque try cats

para que digamos intenta hacer esto

[Música]

y en el caso de que hubiera algún error

pues bueno pues nos nos muestras el

error no

ahora no va a dar el error porque no

tenemos nada que de error vamos a

probarlo de nuevo

veis no de error pero vamos a forzar ese

error vamos a imaginar que pues esto por

lo que sea devuelve un error aquí aquí

dentro de este bloque vamos a hacer aquí

un ir y vamos a decir sí datos punto ley

es

igual a cero

quiere decir que no hay no hay datos en

este a raíz de aquí arriba pues devuelve

un error con rayet new error y le vamos

a llamar no existen datos y si no pues

continúa entonces ahí el time out y hace

el recall vamos a probarlo de momento no

va de error porque tenemos datos con 33

objetos entonces no debería devolver

error vamos a probarlo esperamos ese

segundo y medio y ahí lo tenemos y ahora

imaginemos que pues datos lo voy a

comentar

y ahora datos es un array vacío no hay

no hay nada

entonces si hago run obtenemos el objeto

error

porque él ha dicho que imprima

directamente el error pero si le decimos

que imprima el error message

nos devuelve el error que hemos activado

aquí bueno espero que te haya gustado

que te haya aclarado las dudas acerca de

todo el tema de la sincronía con

promesas de asinca wave javascript para

que veas bueno en resumen asinca weight

y las promesas son para que son

exactamente lo mismo lo único que es una

forma de escribirlo u otra las dos son

perfectamente válidas las dos ya son

compatibles en prácticamente todos los

navegadores entonces se deja a

discreción de cada uno

utilizar la que mejor convenga

normalmente la cinca ways es más limpio

de escribir y más legible pero sí que es

verdad que en ocasiones puede ser más

sencillo utilizar concatenar puntos de

en punto cats dependiendo bueno pues del

proyecto y de la función o el bloque de

código que en ese momento estés

ejecutando y nada más de nuevo espero

que te haya gustado si es así no olvides

darle al like suscribirte al canal si

todavía no lo has hecho deja un

comentario con tus dudas e impresiones

y nada más nos vemos en un próximo vídeo

chao

[Música]