Uso de Async/Await para Promesas Asíncronas en JavaScript

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:50

Uso de Async/Await para Promesas Asíncronas en JavaScript

Curso de Fundamentos de JavaScript

Clase 47 de 55

Clase 47 / 55

Recursos

Trabajar con código asíncrono en JavaScript tiene varias formas, y una de las más claras y legibles es async y await. Esta sintaxis permite escribir funciones que manejan promesas de manera secuencial, sin perder las ventajas del procesamiento asíncrono. A continuación se explica cómo funciona, cómo se compara con las promesas tradicionales y cómo consumir una API pública paso a paso.

¿Qué es async y await y por qué mejora la legibilidad del código asíncrono?

Cuando se marca una función con la palabra reservada async, esa función automáticamente devuelve una promesa [01:23]. Esto significa que el motor de JavaScript toma el código dentro de ella y lo envía a la sección de Web API, donde se resuelve de forma independiente. Una vez resuelta, el event loop se encarga de devolver el resultado al call stack para que se ejecute el callback correspondiente [00:38].

La diferencia principal frente a las promesas encadenadas con .then() es la legibilidad. Con async y await, los pasos se leen de arriba hacia abajo, como si fueran código síncrono, aunque por debajo siguen siendo asíncronos [01:50].

¿Cómo funciona el flujo con promesas y then?

Antes de pasar a async y await, conviene entender el enfoque tradicional. El fetch es una Web API que también retorna una promesa [02:10]. Al consumir una API pública, por ejemplo la de Rick and Morty, el flujo con promesas luce así:

Se llama a fetch() pasando la URL del API.
El primer .then() recibe la respuesta y la convierte a JSON con response.json().
Un segundo .then() toma esa data ya convertida y la utiliza, por ejemplo imprimiéndola en consola.
El .catch() captura cualquier error que ocurra en la cadena.

Este patrón funciona correctamente. Al ejecutar la función fetchData(), la consola muestra los primeros veinte personajes que el API devuelve por defecto [04:42].

¿Cómo se transforma esa misma función a async y await?

Para convertir la función anterior se necesitan pocos cambios, pero son significativos [05:20]:

Se agrega la palabra async antes de la declaración de la función.
Se reemplaza la cadena de .then() por variables que usan await.
Se envuelve el código en un bloque try catch para manejar errores.

El bloque try contiene el código que debe ejecutarse correctamente. Si algo falla, el control pasa automáticamente al bloque catch, que recibe el error [05:55]. Esta estructura es el equivalente directo del .catch() en promesas tradicionales.

Dentro del try, el código queda así:

javascript async function fetchData() { try { const response = await fetch('https://rickandmortyapi.com/api/character'); const data = await response.json(); console.log(data); } catch (error) { console.log(error); } }

La palabra await le indica al motor que debe esperar a que la promesa del fetch se resuelva antes de continuar con la siguiente línea [06:30]. Primero se espera la respuesta del servidor y se guarda en response. Después se espera a que esa respuesta se convierta a JSON y se almacena en data. Finalmente se imprime el resultado.

¿Qué resultado se obtiene al ejecutar la función con async y await?

Al llamar a fetchData() en el navegador, el resultado es idéntico al obtenido con promesas encadenadas: una promesa resuelta de forma exitosa que contiene veinte personajes de Rick and Morty [08:05]. La consola muestra que se trata de una promesa completada, lo que confirma que async y await no cambia el mecanismo interno, solo la forma en que se escribe.

Algunos puntos importantes para recordar:

async convierte cualquier función en una que retorna una promesa.
await solo puede usarse dentro de funciones marcadas como async.
try catch reemplaza al .catch() para el manejo de errores.
El fetch es una Web API independiente que trabaja de forma asíncrona y devuelve una promesa.

Existen múltiples APIs públicas para practicar, como la de Pokémon, Star Wars o Rick and Morty [03:00]. Elegir cualquiera de ellas permite experimentar con fetch, promesas y async/await hasta dominar el flujo asíncrono.

Si ya trabajas con promesas y quieres que tu código sea más fácil de leer y mantener, prueba reescribir tus funciones con async y await y comparte cómo te fue.

Kevin Vargas Murcia

Hace 2 años

Async y Await en JavaScript

Async y await son dos palabras clave introducidas en JavaScript (ES8) para simplificar la programación asíncrona. Antes de su llegada, se utilizaban promesas para manejar operaciones asíncronas, pero el código podía resultar complejo y difícil de leer.

¿Qué es Async?

Async se utiliza para declarar una función como asíncrona.
Una función asíncrona siempre devuelve una promesa.
Dentro de una función async, puedes utilizar la palabra clave await.

¿Qué es Await?

Await se utiliza únicamente dentro de una función async.
Pausa la ejecución de la función hasta que la promesa asociada se resuelva o rechace.
El valor resuelto de la promesa se asigna a la variable que está a la izquierda de await.

Ventajas de usar Async/Await:

Código más legible: El código se parece más a código síncrono, lo que mejora la comprensión.
Manejo de errores más fácil: Puedes utilizar try...catch para manejar errores de las promesas.
Mejor estructuración del código: Facilita la organización del código asíncrono.

En resumen:

Async/await es una sintaxis que hace que el código asíncrono sea más fácil de escribir y leer. Transforma el código asíncrono en un estilo similar al síncrono, lo que mejora la mantenibilidad y legibilidad del código.

Israel Elias Manjarrez Quimiz

Hace 2 años

gracias por ese resumen

Kyb3r Cipher

Hace 2 años

Gracias por la informacon

Comentarios (26)26 comentarios

Sandra Rosa Arroyo Paredes

Miguel Enrique Velásquez Millán

Sebastián Echeverri Flórez

David Elias Gatica Morales

Hace un año

Marco Rodrigo Polo Silva

Sebastián Martínez

Francisco Ebgueny Pérez José

Daniel Vergel

Hace 3 meses

Jose Maldonado

Daniel Andres Rojas Paredes

Platzi

Andres Ng

Juliana Rios

Henry Manolo Gutiérrez Gordillo

Kenneth Angulo L

Hace 2 meses

Roger Alberto Chan Arjona

Hace 5 meses

Marlon de León

Hace 10 meses

David Rangel

Jorge Ivan Martinez Guerra

Johanna Marcela Orjuela Flórez

Ana Rotela Cabrera

Matias Ezequiel Rivero

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Uso de Async/Await para Promesas Asíncronas en JavaScript