¿Cómo funcionan las Promises y Async/Await en JavaScript? [2022]
Summary
TLDREn 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
😀 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.
📚 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.
🔍 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.
Mindmap
Keywords
💡Sincronía
💡JavaScript
💡Promesas
💡Async/Await
💡setTimeout
💡Función
💡Callback
💡Error Handling
💡Data Root
💡Web Application
💡API
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]
تصفح المزيد من مقاطع الفيديو ذات الصلة
Así funcionan las PROMESAS y ASYNC/AWAIT en JAVASCRIPT || Entiende la Asincronía
Manejo básico de CUENTAS T Contabilidad básica
Ley del Coseno | Ejemplo 1 | Encontrar un lado
CÓMO CONSUMIR UN API con JAVASCRIPT desde la web
✅Analizando el CIRCUITO DE ENTRADA de una fuente de PC, fusible, puente de diodos, termistor, etc. 💪
FormData en javascript - Obteniendo datos de un formulario - Como cuando y porque usarlo - JS
5.0 / 5 (0 votes)