Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
fetch te permite pedir datos a un servidor sin recargar la página. Devuelve una promesa, así que usas .then() para procesar la respuesta cuando llega, y .catch() para manejar errores de red.
Explicación
fetch inicia una petición de red y te deja reaccionar cuando la respuesta llega, sin bloquear el resto del código mientras tanto:
fetch("url")Inicia una petición al servidor indicado y devuelve una promesa: un valor que representa algo que estará listo más adelante.
.then(funcion)Registra una función que se ejecuta cuando la promesa se resuelve (la petición terminó), y recibe el resultado como argumento.
respuesta.json()Convierte el cuerpo de la respuesta (texto plano) en un objeto de JavaScript utilizable. También devuelve una promesa, por eso necesita su propio .then().
.catch(funcion)Captura errores de red (como no tener conexión) para que no rompan la página; se ejecuta en vez de los .then() cuando algo falla.
Reto rápido
Cambia "/users/1" por "/users/3" en la URL de fetch y confirma que se muestra otra persona.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
fetch no rechaza la promesa (no dispara .catch()) solo porque el servidor responda con un error como 404: eso sigue considerándose una respuesta válida. Si necesitas detectar códigos de error, revisa la propiedad respuesta.ok o respuesta.status dentro del primer .then().
Dato extra
Encadenar varios .then() es normal: cada uno recibe el valor que devolvió el anterior. Por eso el primer .then() devuelve respuesta.json() y el segundo .then() ya recibe el objeto usuario listo para usar.
Error común
Usar directamente la respuesta de fetch como si ya fuera el dato final, sin el .then() que llama a respuesta.json(): el primer resultado de fetch es un objeto Response (información sobre la petición), no los datos en sí.
Siguiente paso
Ya sabes pedir datos a un servidor con fetch. Ahora veamos cómo guardar información directamente en el navegador del usuario con localStorage y sessionStorage.
Ir a la siguiente lección