async/await y gestión de errores
Escriba funciones async con la palabra clave await, envuelva las llamadas esperadas en bloques try/catch y comprenda cómo async/await es azúcar sintáctico sobre las Promises.
async/await y gestión de errores es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es async/await?
async/await es azúcar sintáctico sobre las Promises. Una función async siempre devuelve una Promise. La palabra clave await pausa la función hasta que la Promise esperada se establece. El código parece sincrónico, pero se ejecuta de forma asíncrona.
Función async
Añada la palabra clave async delante de una declaración o expresión de función. La función ahora envuelve implícitamente su valor de retorno en una Promise.
async function fetchUser(id) {
// implicitly returns a Promise
return { id, name: 'Alice' };
}
// Equivalent to:
function fetchUser(id) {
return Promise.resolve({ id, name: 'Alice' });
}await: pausar para esperar Promises
await solo puede utilizarse dentro de una función async. Pausa la ejecución hasta que la Promise se resuelve y devuelve el valor resuelto. El resto del código del bucle de eventos continúa ejecutándose.
async function loadProfile(id) {
const user = await fetchUser(id); // waits for Promise
const posts = await fetchPosts(user.id); // waits again
return { user, posts };
}await secuencial frente a paralelo
Esperar de forma secuencial es fácil de leer, pero resulta lento si las tareas no dependen unas de otras. Utilice Promise.all() para esperar varias tareas independientes en paralelo.
// Sequential (slow if tasks are independent):
const user = await fetchUser(id);
const settings = await fetchSettings(id); // waits for user unnecessarily
// Parallel (fast):
const [user, settings] = await Promise.all([
fetchUser(id),
fetchSettings(id),
]);try/catch para gestionar errores
Envuelva las llamadas con await en try/catch para gestionar los rechazos. El bloque catch recibe el motivo del rechazo como objeto de error.
async function saveUser(data) {
try {
const response = await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' }
});
if (!response.ok) throw new Error(`Server error ${response.status}`);
return await response.json();
} catch (err) {
console.error('Save failed:', err.message);
throw err; // re-throw so caller can handle
}
}await de nivel superior
En los módulos ES (no en CommonJS), puede utilizar await en el nivel superior sin envolverlo en una función async. Resulta útil para inicializar módulos.
// module.js (ES module)
const config = await fetch('/config.json').then(r => r.json());
export const API_URL = config.apiUrl;async/await con forEach: una trampa
Array.forEach() no espera a los callbacks asíncronos. Utilice for...of para la iteración asíncrona secuencial o Promise.all(arr.map(...)) para la paralela.
// WRONG — forEach doesn't await:
items.forEach(async (item) => {
await processItem(item); // runs but forEach doesn't wait
});
// CORRECT — sequential:
for (const item of items) {
await processItem(item);
}
// CORRECT — parallel:
await Promise.all(items.map(item => processItem(item)));Objetos Error y errores personalizados
Lance siempre objetos Error, no cadenas, para conservar los seguimientos de pila. Cree clases de error personalizadas para errores específicos del dominio que los consumidores puedan capturar por tipo.
class NetworkError extends Error {
constructor(message, status) {
super(message);
this.name = 'NetworkError';
this.status = status;
}
}
try {
const res = await fetch(url);
if (!res.ok) throw new NetworkError(`Failed`, res.status);
} catch (err) {
if (err instanceof NetworkError && err.status === 401) {
redirectToLogin();
} else {
throw err;
}
}finally en async/await
El bloque finally se ejecuta tanto si try se completa correctamente como si falla, igual que .finally() en una Promise. Utilícelo para liberar recursos u ocultar estados de carga.
async function loadData() {
setLoading(true);
try {
const data = await fetch('/api/data').then(r => r.json());
setData(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false); // always runs
}
}IIFE asíncrona para puntos de entrada de módulos
Envuelva el punto de entrada de un script en una IIFE asíncrona cuando no pueda utilizar await de nivel superior.
(async () => {
const data = await fetchInitialData();
renderApp(data);
})();AbortController para cancelación
Pase una señal de AbortController a fetch para cancelar una solicitud en curso. Capturar AbortError por separado evita mostrar un error al usuario.
const controller = new AbortController();
try {
const data = await fetch(url, { signal: controller.signal }).then(r => r.json());
setData(data);
} catch (err) {
if (err.name !== 'AbortError') setError(err.message);
}
// Cancel:
controller.abort();Comprobación rápida
¿Qué construcción gestiona correctamente los errores de una Promise esperada?
Resumen: async/await
Las funciones async siempre devuelven Promises. await pausa la ejecución hasta que una Promise se establece. Utilice try/catch para gestionar errores. Para operaciones paralelas, utilice Promise.all(). Evite await dentro de forEach: utilice for...of o Promise.all. AbortController cancela solicitudes en curso. El await de nivel superior funciona en módulos ES.
Preguntas frecuentes
¿La lección «async/await y gestión de errores» es gratis?
Sí — el texto completo de «async/await y gestión de errores» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «async/await y gestión de errores»?
Escriba funciones async con la palabra clave await, envuelva las llamadas esperadas en bloques try/catch y comprenda cómo async/await es azúcar sintáctico sobre las Promises. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «async/await y gestión de errores»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El event loop: call stack queue microtasks
- Callbacks y callback hell
- Promises: then catch finally Promise.all
- async/await y gestión de errores