Así funcionan las PROMESAS y ASYNC/AWAIT en JAVASCRIPT || Entiende la Asincronía
Summary
TLDREste video tutorial, impartido por Carlos Azaústre, aborda los conceptos fundamentales de sincronía en JavaScript, centrándose en las promesas y el uso de async/await. Explicado con un ejemplo práctico, Carlos profundiza en cómo manejar el código asíncrono y lidiar con la espera inherente a las tareas como la lectura de archivos o llamadas a APIs. Además, ofrece consejos para freelaancers interesados en trabajar con startups a través de la plataforma Lemon. El contenido es relevante y fácil de entender, con un toque de humor y una recomendación de suscribirse para contenido futuro relacionado.
Takeaways
- 👋 Carlos Azaústre es el presentador del canal de YouTube donde se explican conceptos de JavaScript y programación web.
- 🔔 Suscríbete y activa la campanita para no perderte futuros videos sobre JavaScript y desarrollo web.
- 💻 Lemon.punto es una plataforma para trabajar como freelance con startups a nivel mundial, principalmente en inglés.
- 📚 El video utiliza Room JS, una aplicación para escribir y ver el resultado inmediato de código JavaScript.
- 📖 La sincronía en JavaScript se refiere a la espera antes de que los datos solicitados sean devueltos.
- 🕒 `setTimeout` es una función de JavaScript que simula un retardo en la ejecución del código.
- 🔄 Las Promesas en JavaScript permiten manejar código asíncrono, lidiando con estados de resolución o rechazo.
- 🛠 `async/await` es una sintaxis sugar que simplifica la forma de manejar promesas, permitiendo un código más legible y secuencial.
- 📈 La versión 16 de JavaScript permite el uso de `async/await` fuera de funciones o bloques asíncronos (top level await).
- 🔗 El script proporciona un ejemplo de cómo se puede simular una solicitud asíncrona y cómo se manejan las respuestas y errores utilizando promesas y async/await.
Q & A
¿Qué es la sincronía en JavaScript y cómo se relaciona con las promesas?
-La sincronía en JavaScript se refiere a la forma en que las funciones se ejecutan de manera secuencial, esperando a que una acción termine antes de comenzar la siguiente. Las promesas son un objeto de JavaScript que permite manejar código asíncrono, ofreciendo una forma de programación orientada a promesas que incluye estados de pending (pendiente), fulfilled (cumplido) y rejected (rechazado). Esto permite a los programadores manejar la asincronía de manera más eficiente y legible.
¿Qué es la función setTimeout y cómo se utiliza para simular la asincronía?
-La función setTimeout de JavaScript permite introducir un retardo en la ejecución de un código. Se utiliza para simular la asincronía al pausar la ejecución de un script por un período de tiempo específico, en milisegundos, antes de ejecutar una función de callback. En el ejemplo del script, setTimeout se usa para retrazar la visualización de datos, imitando así el tiempo de espera que se experimenta al obtener información de una API o leyendo un archivo.
¿Qué es la plataforma Lemon y cómo funciona para los freelancers?
-Lemon es una plataforma que permite a los freelancers trabajar con startups de todo el mundo de manera remota. El proceso implica registrarse en la plataforma, realizar un test de 15 minutos en inglés, participar en una entrevista por videollamada y, finalmente, realizar una prueba técnica para demostrar las habilidades. Esto ayuda a los freelancers a evitar problemas como buscar clientes, negociar precios y estar pendiente de pagos, centrando su atención en el trabajo de desarrollo de código.
¿Qué es la programación asíncrona y cómo se diferencia de la síncrona?
-La programación asíncrona se refiere a la ejecución de tareas que no bloquean el flujo principal del programa mientras esperan la finalización de otras tareas. Esto permite que el programa continue ejecutándose mientras se llevan a cabo operaciones lentas como la lectura de archivos o la comunicación con una base de datos. En contraste, la programación síncrona implica que el programa se detiene para esperar la finalización de una tarea antes de continuar con el siguiente, lo que puede resultar en una mala experiencia de usuario debido a posibles retrasos.
¿Qué son los objetos Promise y cómo funcionan?
-Los objetos Promise en JavaScript son una forma de manejar código asíncrono. Un objeto Promise representa un valor que aún no se ha calculado, pero se espera que lo hará en el futuro. Los Promise tienen tres estados posibles: pending (pendiente), fulfilled (cumplido) y rejected (rechazado). Cuando un Promise está en estado pending, se puede adjuntar funciones de callback (usando la propiedad then para resolverse y catch para rechazarse) que se ejecutarán una vez que el Promise esté fulfilled o rejected, permitiendo así una gestión más eficiente de la asincronía.
¿Cómo se puede manejar la asincronía en JavaScript utilizando async/await?
-Async/await es una característica de sintaxis en JavaScript que permite escribir código asíncrono de una manera que parece síncrona. La palabra reservada async se coloca delante de una función para indicar que es asíncrona, y la palabra reservada await se utiliza dentro de la función para pausar la ejecución de la función hasta que una Promise sea fulfilled o rejected. De esta manera, async/await facilitan la lectura y el mantenimiento del código asíncrono, haciéndolo más legible y fácil de entender.
¿Qué es la top-level await y cómo se utiliza en JavaScript?
-La top-level await es una característica de JavaScript que permite el uso de la palabra reservada await fuera de una función asíncrona, directamente en el nivel superior del script. Esto significa que puedes esperar la resolución de una Promise sin tener que encerrar el código en una función específica. La top-level await es útil para simplificar el código y hacer que la asincronía sea más fácil de manejar, especialmente en scripts que se ejecutan en el entorno de nodo (Node.js) o en el navegador moderno que soporta esta característica.
¿Qué es RoomJS y cómo se utiliza para aprender sobre JavaScript?
-RoomJS es una aplicación que permite escribir código JavaScript y ver su resultado inmediatamente en el lado derecho de la pantalla. No es un editor de código, sino más bien una herramienta para hacer explicaciones y probar diferentes funciones para ver su resultado. Es útil para tutoriales y para aprender sobre JavaScript y la programación web en general, ya que permite a los usuarios ver directamente los resultados de sus experimentos de codificación.
¿Cómo se implementa un test de 15 minutos en inglés en el proceso de Lemon?
-El test de 15 minutos en inglés que se menciona en el proceso de Lemon es una evaluación que se realiza a los freelancers para asegurarse de que tienen un nivel de inglés suficiente para realizar trabajo de calidad en un entorno internacional. Aunque el script no proporciona detalles específicos sobre el contenido del test, se puede inferir que evalúa habilidades de comprensión, comunicación y posiblemente técnicas de programación en inglés.
¿Qué es la diferencia entre el uso de .then y .catch con promesas?
-El método .then asociado con un objeto Promise se utiliza para manejar el caso en el cual la Promise se resuelve, es decir, cuando se cumple y se tiene un resultado. Por otro lado, el método .catch se utiliza para manejar el caso en el cual la Promise se rechaza, es decir, cuando ocurre un error o una situación anómala. .then permite el procesamiento de los datos devueltos después de una operación asíncrona exitosa, mientras que .catch permite la captura y el manejo de errores para evitar que el programa se interrumpa o se comporte de manera inesperada.
¿Cómo se maneja un error en la función asíncrona con Promise y async/await?
-Para manejar errores en una función asíncrona utilizando Promise y async/await, se utiliza la palabra reservada try dentro del código que se desea ejecutar y se espera que pueda generar un error. Si un error ocurre, se puede capturar y procesar dentro de un bloque catch asociado a la función async. Esto permite un manejo más estructurado y legible de errores en código asíncrono, permitiendo una mejor capacidad de respuesta ante situaciones anómalas o inesperadas.
¿Cuál es la ventaja de utilizar async/await sobre la programación con promesas tradicional?
-La ventaja principal de utilizar async/await sobre la programación con promesas tradicional es que async/await proporciona una sintaxis más limpia y legible, lo que hace que el código asíncrono sea más fácil de leer y entender. En lugar de cadenas de .then y .catch, async/await permite escribir código que parece secuencial y síncrono, simplificando la lógica de control de flujo y facilitando la comprensión de cómo se ejecutan las tareas asíncronas.
Outlines
📚 Introducción a la sincronía y promesas en JavaScript
Este párrafo comienza con una introducción al concepto de sincronía en JavaScript, abordando temas como las promesas, asíncrono weight y flujo de programación. El video pretende aclarar estos conceptos a través de un ejemplo de código. El presentador, Carlos Azaústre, invita a la audiencia a suscribirse al canal de YouTube para obtener más tutoriales y recursos sobre programación web. Además, promociona la plataforma Lemon, que permite trabajar como freelance con startups de todo el mundo,简化了自由职业者的工作流程.
👨💻 Explicación de las promesas y manejo de errores en JavaScript
En el segundo párrafo, se profundiza en el uso de promesas para manejar código asíncrono en JavaScript. Se describe la modificación de una función para que utilice una promesa y maneje tanto la resolución como el rechazo de la promesa. Se explica el uso de 'resolve' y 'reject' para indicar éxito o error en la obtención de datos. Además, se discuten las mejores prácticas para manejar errores y se presenta un ejemplo práctico de cómo implementar estas concepts utilizando 'try' y 'catch'.
🌐 Uso de 'async/await' y top-level await en JavaScript
El tercer párrafo se centra en el uso de 'async/await' para escribir código asíncrono de una manera más legible y secuencial. Se explica cómo 'async/await' simplifica el manejo de promesas en JavaScript. También se menciona el concepto de 'top-level await', que permite el uso de 'await' fuera de funciones asíncronas, gracias a la versión 16 de JavaScript. Se ejemplifica el uso de 'top-level await' en un entorno de terminal, mostrando cómo se puede acceder a datos y manejar promesas de manera directa.
Mindmap
Keywords
💡Sincronía
💡Promesas
💡Async/Await
💡Top-Level Await
💡Lemon
💡Freelance
💡Recruiting
💡Programación Web
💡YouTube
💡Estructura de Datos
💡Callback
Highlights
Explicación del concepto de sincronía en JavaScript y cómo funciona la programación asíncrona.
Introducción a Promises y su papel en el manejo del código asíncrono.
Cómo se implementa un retardo en la ejecución de funciones usando setTimeout.
Creación de una función asíncrona que utiliza un callback para simular una tarea con delay.
Ejemplo práctico de cómo se comporta la sincronía al leer datos de un array en JavaScript.
Descripción de cómo se manejan los errores en una función asíncrona utilizando reject.
Introducción a async/await como una forma de escribir código asíncrono de manera más legible.
Explicación de cómo se puede utilizar async/await para simplificar el manejo de promesas.
Muestra de cómo se puede usar top-level await en JavaScript para escribir async code en el nivel superior.
Recomendación de la plataforma Lemon para que los freelances trabajen con startups a nivel mundial.
Procedimiento para que los desarrolladores se registren en Lemon y realicen una prueba técnica.
Breve descripción de Room JS como herramienta para escribir y ver el resultado de código JavaScript.
Comparación entre la sincronía y asíncronia en JavaScript con ejemplos de lectura y escritura de datos.
Explicación detallada de cómo se manejan los estados de una promesa: pending, resolved y rejected.
Uso de cláusulas try/catch para manejar errores en funciones asíncronas.
Importancia de la versión de JavaScript para el uso de async/await en el nivel superior (top-level await).
Transcripts
tienes dudas con la sincronía en
javascript no entiendes muy bien el
concepto de promesas asinca weight y
cómo funciona el flujo de la
programación pues estás en el vídeo
indicado vamos a ver a través de un
ejemplo de código cómo funciona este
concepto mi nombre es carlos azaústre y
en este canal de youtube vas a encontrar
muchos más tutoriales y recursos sobre
javascript y programación web en general
te recomiendo que te suscribas y le des
a la campanita para no perderte ninguno
de los próximos vídeos que publique si
eres freelance o quieres serlo y además
quieres trabajar con startups te
recomiendo que le eches un vistazo al
lemon punto esta plataforma te permite
trabajar con startup de todo el mundo
como freelance y por supuesto en remoto
el proceso es muy sencillo te registras
ellos se ponen en contacto contigo y
tendrás que hacer un pequeño test de
unos 15 minutos en inglés ya que la
mayoría de las ofertas son para países
de habla inglesa después tendrás una
entrevista por videollamada como las
típicas que sueles tener con el equipo
de recruiting de las empresas y por
último una prueba técnica para comprobar
tus habilidades con eso ya estará listo
para participar en un proyecto de todas
las startups que hay en lemont la idea
de esto es que tú como freelance te
puedas olvidar de todo el tema buscar
clientes negociar tu precio ahora estar
pendiente de los pagos etcétera en
resumen te olvidas de toda la parte de
ventas y te centras en tu trabajo que es
desarrollar código te dejo en la
descripción del vídeo y también en el
comentario fijado un link para que
puedas hacerte de tu perfil y ahora
vamos con el código para explicarlo me
voy a basar en un vídeo que ya hice en
este canal hace un par de años pero de
una manera más actualizada imagina que
tienes la siguiente estructura de datos
por ejemplo un array con varios objetos
en este caso pues tres objetos que
representan tres libros si nosotros
creamos una función llamada por ejemplo
que data
que devuelva los datos y nosotros
llamamos a esta función pues nos
aparecen aquí inmediatamente como puedes
ver en el lado derecho seguramente te lo
estés preguntando la aplicación que
estoy usando se llama room js es una
aplicación que te permite escribir
código javascript y ver su resultado
inmediatamente en el lado derecho no es
un editor de código sino simplemente
pues sirve para hacer explicaciones de
este tipo o probar diferentes funciones
para ver su resultado tienes un short en
el canal donde te lo cuento un poco más
vale aquí recibimos los datos
directamente porque esto no es así crono
esto es sin crono es decir los datos
están ahí los llamamos y nos los pinta
pero imaginemos que estos datos pues no
los tenemos en local sino que están en
un fichero que tenemos que leer o
estamos haciendo una petición a un api a
una url que nos devuelve esos datos vale
pues ahí es donde entra el concepto de
la sincronía esa acción que realizamos
es decir una escritura o una lectura en
un fichero o una llamada a la base de
datos oa una url externa por medio de un
ápice de frascuelo o lo que sea tiene un
pequeño delay pueden ser
pero aún así ya sí que es un retardo no
llega inmediatamente cuando se ejecuta o
se llama a la función que pide es esos
datos para simular ese comportamiento
aquí en el ejemplo vamos a utilizar una
función de javascript que se llama set
time out con save time out lo que
conseguimos es meter un pequeño retardo
a lo que queremos que devuelva te lo
explico con código vamos a modificar la
función que está utilizando ese time out
escribimos el time out y esta función
recibe dos parámetros el primero es una
función de callback que vamos a poner en
formato arroz función y separado por una
coma un número que representa el tiempo
en milisegundos que queremos que se
retarde esa función entonces vamos a
poner por ejemplo 2000 que serían dos
segundos 2000 milisegundos 2 segundos y
dentro del call back vamos a poner un
cónsul of the day time
ok entonces ahora si llamamos a great
day está
y esperamos esos dos segundos nos
aparecen los datos vale como veis ha
tardado dos segundos antes lo escribía
directamente y ahora pues ha talado esos
dos segundos aquí porque lo esté
imprimiendo directamente pero imagínate
que este time out en lugar del con sólo
tuviera un return data ok y yo aquí
metiese s get day está dentro de un
cónsul lo que vale para imprimir esos
datos si ves nos devuelve un define
porque porque está ejecutando esto
directamente que el data y no va a
recibir respuesta hasta dentro de dos
segundos eso es la sincronía como
arreglamos esto como hacemos que cuando
queramos imprimir esos datos aparezcan y
no nos aparezca un define o no nos
aparezca nada si te das cuenta y
trabajas con frameworks como read por
ejemplo o view cuando haces una petición
asíncrona y te llegan los datos no se
pintan o no aparecen inmediatamente en
su interfaz sino que tienes que hacer
algo para que para que exista esa carga
es el audi y luego ya aparezcan los
datos pues esto es básicamente el
principio de ese concepto esto se
resuelve con las promesas el objeto
promise o promesas es un objeto de
javascript que permite manejar el código
asíncrono entonces vamos de nuevo a
modificar la función que data utilizando
una promesa para que cuando el código
esté listo lo pueda resolver
de algún error pues lo pueda rechazar y
así luego nosotros podemos llamar a esa
función get data de otra manera y
podemos manejar esos dos estados el de
resuelto y el de rechazado comentó este
código de aquí y esta función ahora lo
que va a devolver es un nuevo objeto
promise
y este objeto promise devuelve una
función de callback nuevamente
y la función de callback recibe dos
parámetros que son el objeto ry sol y el
objeto billete y sol lo vamos a usar
para cuando queramos resolver la promesa
cuando ya tengamos los datos
correctamente y los queramos devolver
utilizaremos resol si ocurre algún error
o nosotros de alguna manera queremos
hacer un rechazo a esa llamada por
alguna circunstancia que ahora veremos
por un ejemplo pues utilizaremos rayet
entonces pues vamos primero con el rayet
ya si utilizamos una buena práctica que
es utilizar cláusulas de cierre es decir
intentar escribir al inicio de tus
funciones el caso peor para devolver
error o salir de la función lo primero
es decir primero se comprueba si hay
errores y después ya se realiza el
código si no hubiera errores entonces
vamos a hacer una comprobación aquí de
sida está producto online es igual es
igual a cero pues vamos a hacer un reset
de hecho vamos a utilizar llaves para
que se vea un poco mejor un riel y esto
que devuelva a un nuevo error y el
mensaje puede ser
y los datos están vacíos si se sale de
aquí es que no hay errores entonces
ahora ponemos el código correcto cuál es
el código correcto para simular el
retardo vamos a utilizar el set time out
que teníamos antes entonces lo copió de
aquí y lo pegó y le quitó los
comentarios
y ahora en lugar de return data lo que
vamos a hacer es re solve that ok
esta sería nuestra función asíncrona
nuestra promesa que si tiene errores la
rechaza y si todo es correcto la
resuelve como llamamos a esta hora bueno
pues escribimos la función get data pero
ahora esta función se le pueden
concatenar dos funciones una seria punto
de y otra sería punto catch en punto de
lo que vamos a tener es cuando se
resuelva la promesa es decir los datos
correctos y en punto catch si tenemos
algún error entonces end en esto de
hecho se suele escribir de esta manera
para que sea más legible entonces en d
vamos a recibir el objeto de datos este
de aquí data aquí lo puede llamar como
quieras si quieres podemos llamarlos
response para que veas que no es
exactamente el mismo nombre que se pone
y con response lo que vamos a hacer es
que cuando ya tengamos eso pues que lo
imprima por
por consola ok y el catch lo que recibe
es un objeto de error
y de igual manera pues aquí se trataría
entonces hacemos con sol blog
y mesa o si no porque si no nos va a
mostrar el objeto error directamente
para que tengo un error porque tenía ahí
un punto y coma y si ves no sé si te has
dado cuenta tenemos aquí abajo promise
pending y después aparece ya el objeto
data resuelto ok nosotros si ponemos get
data únicamente no aparece nada aparece
el objeto promise pendín es decir está
en pendiente y como no hay nada que lo
pueda ejecutar cuando se resuelva pues
se queda ahí de hecho si haces un con
solo lo que data pasa exactamente lo
mismo necesitas resolverlo de alguna
manera o al menos tener algo que haga
que cuando eso se resuelva ejecutarlo
entonces por eso tenemos emden y el
catch está el pending y después ya
aparece la respuesta qué pasa si hay un
error bueno aquí hemos puesto que el
error sería si los datos fueran 0
entonces vamos a comentar el objeto data
y vamos a hacer que data sea una raíz
vacía vale entonces cómo ves aparece
promise pendín y directamente data y
sentís bueno aparece directamente porque
no le hemos hecho el simulacro del pero
bueno creo que se entiende el concepto
esto es el objeto promise habrás visto
que hay otro concepto que es el de think
and white asinca weight no es más que un
azúcar sintáctico sugar sintax en inglés
que es una forma de escribir el mismo
código pero de es una forma de hacer
exactamente lo mismo que hemos visto
aquí pero escrito de otra manera que
resulta más legible parece que estás
escribiendo código secuencial pero
realmente es código asíncrono vale con
asinca weight esto se escribiría de la
siguiente manera nosotros podríamos
tener aquí una variable llamada libros
por ejemplo y llamar a greg data pero
como esta función es asíncrona
deberíamos de escribir un a white
delante aquí aparece un error pero esto
es problema de run js vale anteriormente
a weight es una palabra reservada que
sólo se puede utilizar dentro de una
función o de un bloque que tenga la
palabra reservada a sinc es decir esto
tendríamos que meterlo dentro de una
función
así función como quieras llamar page de
ching de ita
meteríamos ahí eso y luego pues
podríamos hacer lo que fuera con los
libros vale por ejemplo el famoso con
solo y nosotros después ya llamar a zinc
para no confundir vamos a comentar la
función anterior y puedes ver aquí que
pone promise rejected error data y sentí
porque teníamos los datos
vacíos entonces vamos a volver a des
comentar esto vamos a volver a tener
todos los datos y ahí vemos promi
spending y aparece como ves es más
secuencial porque parece que tú aquí
dices vale dame que data dame los libros
los cuadros en esta variable y lo
imprimo pero ésta esté a weight esta
weight lo que hace es sustituir a este
punto de y punto cut que teníamos antes
el error que hemos visto es que no
podemos poner a white cake data
directamente así pero esto como digo es
problema de room js en las últimas
versiones de leyes ya se puede utilizar
lo que se llama el top level away es
decir puedes utilizar a weight fuera de
una función de tipo asíncrono lo puedes
usar así tal cual entonces para eso
vamos a abrir la terminal vale aquí
tengo un terminal y podemos ver que
tengo la versión 16 14
entramos al intérprete de comandos de no
de escribiendo un out y entonces aquí
podemos escribir código javascript si yo
aquí pongo con solo
hola mundo
esto funciona igual que la consola de
desarrollo del navegador o el programa
este que estoy utilizando que se llama
run js vale entonces aquí voy a copiar
los datos para tenerlos pues ahí en
memoria
si yo escribo data pues ahí los tenemos
y voy a escribir la función promesa que
teníamos aquí ok pues ahora como estoy
en la versión 16 y acepta el top de
belagua y yo puedo escribir aquí sin
problema con c's boot
a white jet data
y si yo ahora escribo con su blog
books pues ahí lo tengo y como ves no he
tenido que crear ninguna función
asíncrona en meter todo esto dentro de
esa función y luego llamar a la función
sino que directamente puede utilizar a
weight a nivel alto a top level y así es
como funciona la sincronía en javascript
con el objeto promise y con asinca
weight espero que te haya sido útil y te
haya servido para reforzar conocimientos
si es así no olvides darle like a este
vídeo suscribirte y si tienes más dudas
sobre la sincronía en javascript
déjamelo en los comentarios nos vemos en
un próximo vídeo chao
Ver Más Videos Relacionados
¿Cómo funcionan las Promises y Async/Await en JavaScript? [2022]
CÓMO CONSUMIR UN API con JAVASCRIPT desde la web
Organizing Obsidian with Maps of Content (MOCs)
Prozentwert berechnen - Prozentrechnung mit Formel - Mathematik einfach erklärt | Lehrerschmidt
GPT ACTIONS // Cómo editar el SCHEMA [Tutorial completo]
INTEGRALES - Clase Completa desde cero
5.0 / 5 (0 votes)