Async/Await y Fetch API

Async/Await

• async convierte una función en promesa y permite usar await dentro.
• await espera una promesa y devuelve su valor sin necesidad de then.
• Errores: se manejan con try/catch como si fuera código síncrono.
• Paralelo vs secuencial: esperar una por una es más lento; usa Promise.all para paralelizar.
• No bloquea el hilo: await pausa la funcion async, pero el event loop sigue atendiendo otras tareas.
• Evitar await en loops: si no depende uno del otro, dispara todo y luego Promise.all.

javascript
Copiar
1async function cargarTodo() {
2  // Secuencial
3  const user = await fetch("/api/user").then(r => r.json());
4  const posts = await fetch("/api/posts").then(r => r.json());
5
6  // Paralelo
7  const [u, p] = await Promise.all([
8    fetch("/api/user").then(r => r.json()),
9    fetch("/api/posts").then(r => r.json()),
10  ]);
11
12  return { user, posts, u, p };
13}

javascript
Copiar
1// Evitar await dentro de for cuando se puede paralelizar
2const ids = [1, 2, 3];
3const promesas = ids.map((id) => fetch(`/api/user/${id}`));
4const respuestas = await Promise.all(promesas);

Fetch API

• GET para leer datos y POST para crear; fetch devuelve una promesa.
• Errores HTTP: fetch no lanza error automático, hay que validar response.ok.
• Headers y JSON: define Content-Type y usa JSON.stringify.
• Timeouts: AbortController permite cancelar peticiones lentas.
• Parseo: response.json() tambien devuelve una promesa; se debe await.
• CORS: si el servidor no permite el origen, el navegador bloquea la respuesta.

javascript
Copiar
1async function fetchSeguro(url) {
2  const res = await fetch(url);
3  if (!res.ok) throw new Error(`HTTP ${res.status}`);
4  return res.json();
5}
6
7async function crearPost(data) {
8  const res = await fetch("/api/posts", {
9    method: "POST",
10    headers: { "Content-Type": "application/json" },
11    body: JSON.stringify(data),
12  });
13  if (!res.ok) throw new Error("Error al crear");
14  return res.json();
15}

javascript
Copiar
1// Timeout con AbortController
2async function fetchConTimeout(url, ms) {
3  const controller = new AbortController();
4  const timer = setTimeout(() => controller.abort(), ms);
5  try {
6    const res = await fetch(url, { signal: controller.signal });
7    if (!res.ok) throw new Error(`HTTP ${res.status}`);
8    return res.json();
9  } finally {
10    clearTimeout(timer);
11  }
12}

Proyecto completo: Weather App

• Obtener clima por ciudad, mostrar resultados y manejar errores.
• Guardar última búsqueda en localStorage.
• Debe tener estados claros: loading, success, empty, error.
• Agregar debounce al input para no disparar llamadas en cada tecla.
• Manejar ciudades no encontradas con mensaje amigable.