Avanzado⏱ 50 min
⚡
JavaScript · Capítulo 11
Asincronismo
Maneja operaciones asíncronas con Promises, async/await y consume APIs reales con fetch.
📖
Teoría
JavaScript es single-threaded (un hilo), pero puede manejar operaciones asíncronas (que toman tiempo) sin bloquear la UI usando callbacks, Promises y async/await.
Promise: representa una operación que terminará en el futuro.
async/await: sintaxis moderna para trabajar con Promises como si fueran síncronas.
fetch: API para hacer solicitudes HTTP (consumir APIs).
javascript
// fetch devuelve una Promise
// async/await hace el código más legible
async function obtenerUsuario(id) {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (!response.ok) {
throw new Error(`Error HTTP: ${response.status}`);
}
const usuario = await response.json(); // otro await
console.log(usuario.name, usuario.email);
return usuario;
} catch (error) {
console.error("Error al obtener usuario:", error.message);
}
}
// Llamar función async
obtenerUsuario(1);
// Múltiples peticiones en paralelo
async function obtenerVariosUsuarios() {
const ids = [1, 2, 3];
const promesas = ids.map(id =>
fetch(`https://jsonplaceholder.typicode.com/users/${id}`).then(r => r.json())
);
const usuarios = await Promise.all(promesas); // espera todas
console.log(usuarios);
}💡JSONPlaceholder
JSONPlaceholder (jsonplaceholder.typicode.com) es una API pública perfecta para practicar. Tiene endpoints para:
/users, /posts, /todos, /photos, /albums y /comments. No requiere autenticación.⚡
Ejercicio práctico
🎯 Tu misión
Consume la API JSONPlaceholder para mostrar una lista de usuarios. Usa fetch + async/await para obtener los usuarios, y muestra sus datos en tarjetas HTML. Maneja errores con try/catch.
Console
Vista previa