𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 𝘆 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 𝗲𝘅𝗽𝗹𝗶𝗰𝗮𝗱𝗼𝘀

Imagina que pides una pizza por internet.

No te quedas parado en la puerta sin hacer nada hasta que llega. Ves videos, trabajas o hablas con amigos. Cuando llega la pizza, comes.

JavaScript funciona de la misma manera.

Tareas como peticiones a una API o llamadas a una base de datos toman tiempo. Si JavaScript esperara a cada tarea, tu aplicación se congelaría. En su lugar, continúa ejecutando otro código mientras espera.

Una Promise representa un valor que llegará en el futuro.

Una Promise tiene tres estados:

Rara vez verás el código utilizado para crear una nueva Promise. Esto se debe a que las herramientas modernas como fetch() ya te devuelven una Promise.

¿Qué hace .then()?

Mucha gente piensa que .then() recupera datos. No es así.

.then() registra una función de callback. Le dices a JavaScript: "Cuando esta Promise termine, ejecuta esta función".

Es como una aplicación de comida a domicilio. Pides comida y la aplicación dice: "Llámame cuando llegue la comida". La función espera el resultado.

¿Por qué usar Async/Await?

Puedes encadenar llamadas a .then() para obtener datos de usuario, luego publicaciones y luego comentarios. Esto funciona, pero las cadenas largas son difíciles de leer.

Async/await hace que el código parezca código normal, paso a paso. Es más limpio y fácil de seguir.

¿Bloquea await a JavaScript?

Esta es una pregunta común en entrevistas. La respuesta es no.

Cuando JavaScript encuentra la palabra clave await, solo pausa esa función async específica. El resto de tu aplicación sigue funcionando.

Flujo de ejemplo:

  1. Ejecuta el código en la función async.
  2. Encuentra await y pausa esa función.
  3. Ejecuta el resto de la aplicación.
  4. Cuando la tarea termina, reanuda la función async.

Async/await es solo una forma más limpia de escribir Promises. Es azúcar sintáctica.

Conclusiones clave:

Fuente: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm