Consumo de
APIs en
JavaScript
De callbacks a async/await:
dominando la comunicación
asíncrona
Contexto del Módulo
¿Qué vamos a aprender
hoy?
En esta clase exploraremos las diferentes formas de manejar
operaciones asíncronas en JavaScript, fundamentales para
consumir APIs públicas. Comenzaremos con el patrón tradicional de
callbacks, comprenderemos sus limitaciones (el temido callback
hell), y avanzaremos hacia soluciones más elegantes como
Promises y async/await.
01 02
Fetch API Callbacks
La herramienta moderna para El patrón tradicional y sus
hacer peticiones HTTP desafíos
03 04
Promises Async/Await
La solución al callback hell Código asíncrono que parece
síncrono
Al final, aplicaremos todo lo aprendido consumiendo la API de Los
Simpsons para crear un proyecto práctico y divertido.
Fetch API: Tu puerta de
entrada a datos externos
Fetch API es la interfaz moderna de
JavaScript para realizar peticiones
HTTP. Reemplazó a XMLHttpRequest
ofreciendo una sintaxis más limpia y
basada en Promises. Con fetch(),
podemos obtener datos de servidores,
enviar información, y comunicarnos
con APIs REST de forma elegante.
Sintaxis básica Importante:
Fetch API está
fetch('[Link] disponible en
m/datos') todos los
.then(response => navegadores
[Link]()) modernos y en
.then(data => [Link] (desde
[Link](data)) la versión 18).
.catch(error => No requiere
[Link](error)); librerías
adicionales.
La función fetch() siempre devuelve
una Promise, lo que la hace perfecta
para trabajar con código asíncrono. El
primer .then() convierte la respuesta
a JSON, y el segundo procesa los
datos obtenidos.
Callbacks: El fundamento
de la programación
asíncrona
Un callback es simplemente una función que se pasa como
argumento a otra función para ser ejecutada más tarde. Es el
mecanismo más básico para manejar operaciones asíncronas en
JavaScript, como leer archivos, hacer peticiones HTTP, o esperar
eventos del usuario.
Ejemplo simple de callback
function procesarDatos(datos, callback) {
[Link]('Procesando:', datos);
// Simulamos operación asíncrona
setTimeout(() => {
callback('Datos procesados: ' + datos);
}, 1000);
}
procesarDatos('Usuario123', (resultado) => {
[Link](resultado);
// Salida después de 1 segundo: "Datos procesados:
Usuario123"
});
Ventaja Desventaja
Patrón simple y directo para Puede volverse difícil de
operaciones únicas leer con múltiples
operaciones encadenadas
Callback Hell: Cuando los
callbacks se descontrolan
El "callback hell" o "pirámide de la perdición" ocurre cuando
encadenamos múltiples callbacks anidados. El código se vuelve
difícil de leer, mantener y depurar. Cada nivel de anidación añade
complejidad y hace que el flujo del programa sea confuso.
obtenerUsuario(userId, (usuario) => {
obtenerPedidos([Link], (pedidos) => {
obtenerDetalles(pedidos[0].id, (detalles) => {
obtenerEnvio([Link], (envio) => {
[Link]('Dirección:', [Link]);
// ¡Y así sucesivamente!
Promises: El código
asíncrono elegante
Una Promise (promesa) es un
objeto que representa el
resultado eventual de una
operación asíncrona. Puede
estar en uno de tres estados:
pendiente, resuelta (fulfilled) o
rechazada (rejected). Las
Promises nos permiten
encadenar operaciones y
manejar errores de forma
centralizada.
Tip: Cada .then()
Estructura de una devuelve una nueva
Promise Promise, permitiendo
encadenamientos
const miPromise = new infinitos de forma
Promise((resolve, limpia.
reject) => {
// Operación
asíncrona
if (exito) {
resolve(resultado);
} else {
reject(error);
}
});
Ejemplo práctico: Refactorizando el callback hell
obtenerUsuario(userId)
.then(usuario => obtenerPedidos([Link]))
.then(pedidos => obtenerDetalles(pedidos[0].id))
.then(detalles => obtenerEnvio([Link]))
.then(envio => [Link]('Dirección:',
[Link]))
.catch(error => [Link]('Error:', error));
¡Mucho más legible! El código fluye de arriba hacia abajo, y el
manejo de errores está centralizado en un solo .catch().
Async/Await:
Promises con
apariencia
síncrona
Async/await es azúcar sintáctica
sobre Promises que hace que el
código asíncrono se vea y se
comporte como código síncrono. La
palabra clave async convierte una
función en asíncrona, y await
pausa la ejecución hasta que la
Promise se resuelva.
Función async
Declara que una
función devolverá una
Promise
Palabra clave
await
Espera que una
Promise se resuelva
antes de continuar
Try/catch
Maneja errores de
forma tradicional y
clara
Con Con
Promises async/await
(.then)
async
fetch('ht function
tps://api obtenerDa
.com/dato tos() {
s') try {
const
.then(res res =
=> await
[Link]( fetch('ht
)) tps://api
.com/dato
.then(dat s');
a => { const
data =
console.l await
og(data); [Link](
}) );
.catch(er console.l
r => { og(data);
} catch
console.e (err) {
rror(err)
; console.e
}); rror(err)
;
}
}
Comparación: Tres
enfoques para la misma
tarea
Veamos cómo evoluciona el código al obtener datos de un usuario y
sus publicaciones usando los tres patrones. Observá cómo cada
enfoque mejora la legibilidad y el mantenimiento del código.
1 2 3
Callbacks Promises Async/await
anidados encadenada
s async
obtenerUsu function
ario(5, obtenerUsu mostrarDat
(usuario) ario(5) os() {
=> { try {
.then(usua const
[Link] rio => { usuario =
g(usuario. await
nombre); [Link] obtenerUsu
g(usuario. ario(5);
obtenerPos nombre);
ts(usuario return [Link]
.id, obtenerPos g(usuario.
(posts) => ts(usuario nombre);
{ .id); const
}) posts =
[Link] await
g(posts); .then(post obtenerPos
}, s => { ts(usuario
(error) => .id);
{ [Link]
g(posts); [Link]
[Link] }) g(posts);
ror(error) } catch
; .catch(err (error) {
}); or => {
}, (error) [Link]
=> { [Link] ror(error)
ror(error) ;
[Link] ; }
ror(error) }); }
;
}); Lineal y legible, Parece código
un solo punto síncrono,
Difícil de seguir, de manejo de máxima claridad
errores errores
manejados en
múltiples
lugares
Práctica: Consumiendo
The Simpsons API
¡Pongamos todo en práctica! Vamos a consumir la API de Los
Simpsons para obtener personajes aleatorios. Esta API nos permite
experimentar con peticiones reales y manejar datos JSON de forma
práctica.
Endpoint de la API
[Link]
01 02
Hacer la petición Procesar respuesta
Usar fetch() para obtener un Convertir la respuesta a JSON y
personaje aleatorio extraer datos
03 04
Mostrar información Manejo de errores
Renderizar nombre, imagen y Capturar y mostrar errores de
datos del personaje forma apropiada
Código del ejercicio con async/await
async function obtenerPersonajeSimpsons() {
try {
const response = await
fetch('[Link]
');
if (![Link]) {
throw new Error(`Error HTTP: ${[Link]}`);
}
const personaje = await [Link]();
[Link]('Nombre:', [Link]);
[Link]('Ocupación:', [Link]);
[Link]('Imagen:', [Link]);
// Podés agregar lógica para mostrar en el DOM
[Link]('nombre').textContent =
[Link];
[Link]('imagen').src =
[Link];
} catch (error) {
[Link]('Error al obtener personaje:', error);
}
}
// Ejecutar la función
obtenerPersonajeSimpsons();
Desafío Final: Galería de
Personajes
Tu misión
Creá una aplicación web que
muestre una galería de 6
personajes aleatorios de Los
Simpsons. Implementá las
siguientes funcionalidades:
1. Hacer 6 peticiones simultáneas
usando [Link]()
2. Mostrar nombre, imagen y Tip: Usá
primera ocupación de cada [Link]([fet
personaje
ch(...),
3. Agregar un botón "Cargar fetch(...)])
Nuevos Personajes" que para hacer
refresque la galería múltiples
4. Implementar un loader mientras peticiones en
se cargan los datos paralelo y esperar
5. Manejar errores y mostrar que todas se
mensajes apropiados al usuario completen.
Bonus opcional
Agregar un filtro para buscar
personajes por nombre
Implementar paginación o
scroll infinito
Guardar personajes favoritos
en localStorage
Estructura HTML sugerida
<div id="galeria">
<!-- Los personajes se insertarán aquí -->
</div>
<button id="cargar">Cargar Nuevos Personajes</button>
<div id="loader" class="oculto">Cargando...</div>
¡Éxitos con el proyecto! Recordá aplicar todo lo que aprendimos
sobre async/await, manejo de errores, y buenas prácticas al
consumir APIs.