🌐 1.10 · Async, Promises y Fetch: hablar con servidores

🎯 Objetivo del tema

🗺️ Mapa del tema

Hasta ahora, tu código JavaScript se ejecuta de arriba a abajo, una línea tras otra. Pero muchas operaciones de la web TOMAN TIEMPO: pedir datos a un servidor, leer un archivo, esperar un temporizador. Si JavaScript se quedara 'esperando' esas operaciones, la página se congelaría. La solución: asincronía. Hoy aprenderás las 3 formas modernas: callbacks (histórico), Promises, y async/await (la estrella).

1.10.1 El problema: el código asíncrono

JavaScript es un lenguaje de UN SOLO HILO: ejecuta una cosa a la vez. Si le pides que 'espere 3 segundos a que llegue un dato del servidor', TODO lo demás se congela: la página no responde, los botones no hacen clic, las animaciones se detienen. Por eso JavaScript necesita asincronía: operaciones que empiezan, dejan 'una nota pendiente' y siguen ejecutando el resto del código.

El ejemplo del restaurante

Imagina un mesero en un restaurante. Si tomara tu pedido, fuera a la cocina, ESPERARA parado hasta que el plato esté listo, y volviera a tu mesa, el restaurante perdería toda la clientela. En cambio, el mesero toma tu pedido, lo deja en cocina, va a atender otras mesas, y cuando el plato está listo lo recoge. Eso es asincronía.

Las 3 operaciones asíncronas más comunes

1.10.2 Callbacks y el callback hell

La forma HISTÓRICA de manejar asincronía en JavaScript: pasar una función (callback) que se ejecuta CUANDO la operación termina. Funciona, pero cuando encadenas muchas operaciones, el código se vuelve ilegible: el famoso 'callback hell' (infierno de callbacks).

// Ejemplo: leer usuario, luego sus pedidos, luego sus productos
getUser(userId, function(user) {
  getOrders(user.id, function(orders) {
    getProducts(orders[0].id, function(products) {
      console.log(products);
    }, function(errorProductos) {
      console.error(errorProductos);
    });
  }, function(errorOrders) {
    console.error(errorOrders);
  });
}, function(errorUser) {
  console.error(errorUser);
});
// 4 niveles de anidación, 4 funciones de error. Ilegible.

Callback hell en todo su esplendor

1.10.3 Promises: la primera solución elegante

Una Promise (promesa) es un OBJETO que representa un valor que ESTARÁ disponible en el futuro (o que NUNCA llegará). Tiene 3 estados: pending (esperando), fulfilled (cumplida, con un valor), rejected (rechazada, con un error). Se 'consume' con .then() para el éxito y .catch() para el error.

La anatomía de una Promise

// Crear una Promise
const miPromesa = new Promise((resolve, reject) => {
  setTimeout(() => {
    const exito = true;
    if (exito) {
      resolve('¡Listo!');  // se cumplió: pasa el valor al .then()
    } else {
      reject('Algo falló');  // se rechazó: pasa el error al .catch()
    }
  }, 2000);
});

// Consumir la Promise
miPromesa
  .then(resultado => console.log(resultado))   // '¡Listo!'
  .catch(error => console.error(error));       // si falló

Crear y consumir una Promise

Promise.all: ejecutar varias en paralelo

// Si tienes 3 peticiones independientes, ejecútalas EN PARALELO
const promesa1 = fetch('/api/usuarios');
const promesa2 = fetch('/api/productos');
const promesa3 = fetch('/api/pedidos');

Promise.all([promesa1, promesa2, promesa3])
  .then(respuestas => Promise.all(respuestas.map(r => r.json())))
  .then(([usuarios, productos, pedidos]) => {
    // Las 3 se completaron. Más rápido que esperar una por una.
    console.log({ usuarios, productos, pedidos });
  })
  .catch(error => console.error('Alguna falló:', error));

Promise.all: paralelismo

1.10.4 async/await: código asíncrono legible

async/await (ES2017) es syntactic sugar sobre las Promises: te permite escribir código asíncrono que se LEE como código sincrónico. Es la forma MODERNA y la que verás en TODO el código nuevo. Si dominas async/await, dominas la asincronía de JavaScript.

El mismo ejemplo, con .then() vs async/await

// Con .then() (Promise clásico)
function cargarUsuario(id) {
  return fetch(`/api/usuarios/${id}`)
    .then(respuesta => respuesta.json())
    .then(usuario => {
      console.log(usuario);
      return usuario;
    })
    .catch(error => console.error(error));
}

// Con async/await (moderno) — MISMO RESULTADO, código más claro
async function cargarUsuario(id) {
  try {
    const respuesta = await fetch(`/api/usuarios/${id}`);
    const usuario = await respuesta.json();
    console.log(usuario);
    return usuario;
  } catch (error) {
    console.error(error);
  }
}

Promise.then() vs async/await

Las 3 reglas de oro de async/await

• async: marca la función como asíncrona. Sin esto, await no funciona.
• await: espera a que una Promise se resuelva. Solo se puede usar dentro de funciones async.
• try/catch: para manejar errores, igual que en código síncrono. Reemplaza al .catch() de las Promises.

1.10.5 Fetch API: peticiones HTTP modernas

fetch() es la API nativa del navegador para hacer peticiones HTTP. Reemplazó al antiguo XMLHttpRequest (que era un infierno de callbacks y config). Con fetch + async/await, hacer una petición a un servidor se reduce a 3 líneas.

GET: pedir datos al servidor

async function obtenerUsuarios() {
  const respuesta = await fetch('/api/usuarios');
  const usuarios = await respuesta.json();  // convierte JSON a objeto JS
  return usuarios;
}

// Uso
const usuarios = await obtenerUsuarios();
console.log(usuarios);

GET con fetch

POST: enviar datos al servidor

async function crearUsuario(nuevoUsuario) {
  const respuesta = await fetch('/api/usuarios', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(nuevoUsuario)  // convierte objeto JS a JSON
  });
  const usuarioCreado = await respuesta.json();
  return usuarioCreado;
}

// Uso
const nuevo = await crearUsuario({ nombre: 'Ana', email: 'ana@mail.com' });

POST con fetch

1.10.6 Manejo de errores: try/catch y .catch()

Las cosas fallan. La red se cae. El servidor se desconecta. El JSON viene malformado. El usuario pierde conexión a mitad de una petición. Un buen código NO IGNORA estos casos: los anticipa, los maneja, y le da feedback útil al usuario.

try/catch con async/await

async function cargarDatos() {
  try {
    const respuesta = await fetch('/api/datos');
    if (!respuesta.ok) {  // fetch no lanza error con 404, hay que chequearlo
      throw new Error(`HTTP ${respuesta.status}: ${respuesta.statusText}`);
    }
    const datos = await respuesta.json();
    return datos;
  } catch (error) {
    // Mostrar mensaje útil al usuario
    mostrarError('No pude cargar los datos. Revisa tu conexión.');
    console.error('Detalle técnico:', error);
    return null;  // o lo que tu app necesite
  }
}

Manejo robusto de errores

Errores comunes con fetch

1.10.7 Frameworks JS: React, Vue, Angular y Svelte en el horizonte

Hasta ahora escribiste JavaScript 'puro' (vanilla): manipulación directa del DOM, fetch, async/await, eventos. Funciona, pero cuando tu app crece (más de 5 vistas, estado compartido entre componentes, listas grandes, formularios complejos), el código se vuelve difícil de mantener. Aquí entran los FRAMEWORKS JS: librerías que te dan estructura, reactividad, y patrones probados para apps complejas. Los 4 gigantes son React (Meta), Vue (Evan You), Angular (Google) y Svelte (Rich Harris). Cada uno tiene filosofía distinta, comunidad distinta, y casos de uso ideales. Aquí vas a entender el panorama para saber cuál aprender primero cuando termines este curso.

Los 4 frameworks JS más usados en 2025: comparativa honesta

El MISMO componente 'Contador' en los 4 frameworks

// === REACT (con useState hook) ===
import { useState } from 'react';

function Contador() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}
// Filosofia: estado centralizado en el componente, re-render cuando cambia.

// === VUE 3 (Composition API con <script setup>) ===
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <div>
    <p>Contador: {{ count }}</p>
    <button @click="count++">+1</button>
  </div>
</template>
// Filosofia: reactividad declarativa, HTML extendido. Familiar para gente de HTML/jQuery.

// === ANGULAR (con TypeScript y decoradores) ===
import { Component } from '@angular/core';

@Component({
  selector: 'app-contador',
  template: `
    <div>
      <p>Contador: {{ count }}</p>
      <button (click)="increment()">+1</button>
    </div>
  `
})
export class ContadorComponent {
  count = 0;
  increment() { this.count++; }
}
// Filosofia: 'baterias incluidas'. TypeScript obligatorio, opinionated, estructura rigida.

// === SVELTE 4 (compilado, no runtime) ===
<script>
  let count = 0;
  function increment() { count++; }
</script>

<div>
  <p>Contador: {count}</p>
  <button on:click={increment}>+1</button>
</div>
// Filosofia: el compilador HACE el trabajo. Sin virtual DOM, sin runtime, código minimo.

El mismo 'Contador' en React, Vue, Angular y Svelte

Las preguntas clave para elegir framework

• ¿Qué pide el mercado laboral de tu ciudad/país? React domina en USA/Europa, Vue es muy fuerte en China/Asia, Angular en enterprise europeo. Busca en LinkedIn 'React junior' vs 'Vue junior' vs 'Angular junior' y compara.
• ¿Tu equipo viene de qué background? De jQuery/HTML → Vue es el camino más natural. De Java/C# → Angular se siente familiar (TypeScript, decoradores, DI). De Ruby/Python → React (JS flexible, menos estructura).
• ¿Qué tipo de app vas a construir? Un SaaS B2B con 50 vistas → React o Angular (estructura). Una landing page interactiva → Svelte (performance). Un MVP rápido → Vue (curva baja). Un dashboard interno → React.
• ¿Cuánto tiempo tienes para aprender? React: 2-3 meses para ser productivo. Vue: 1 mes. Svelte: 2 semanas. Angular: 3-4 meses (TypeScript + decoradores + RxJS).
• ¿Quieres el camino más popular o el más moderno? React es el más popular (más ofertas, más recursos, más librerías). Svelte es el más moderno (mejor DX, mejor performance, menos código).

Cómo instalar cada framework (Vite es el estándar en 2025)

# REACT (recomendado con Vite)
npm create vite@latest mi-app -- --template react-ts
cd mi-app
npm install
npm run dev  # http://localhost:5173

# VUE 3 (oficial con create-vue)
npm create vue@latest mi-app
cd mi-app
npm install
npm run dev  # http://localhost:5173

# ANGULAR (oficial con Angular CLI, requiere Node 18+)
npm install -g @angular/cli
ng new mi-app --routing --style=scss
cd mi-app
ng serve  # http://localhost:4200

# SVELTE 4 / SVELTEKIT (oficial con create-svelte)
npm create svelte@latest mi-app
cd mi-app
npm install
npm run dev  # http://localhost:5173

# Tiempo de setup: <5 minutos en todos. Vite es el estándar,
# arranca en 1 segundo, hace HMR instantaneo.

# Estructura de cada proyecto:
# React/Vue/Svelte: src/App.{jsx,vue,svelte}, src/main.{jsx,ts}, src/index.css
# Angular: src/app/, src/app/app.component.ts, src/main.ts

Comando de instalación de los 4 frameworks (todos con Vite)

📚 Contenido ampliado

Material adicional, referencias externas verificadas y ejemplos extendidos.