La Fetch API es la forma moderna y nativa de pedir y enviar datos en JavaScript, sin librerías externas. Con ella consumes APIs, cargas datos de un servidor y envías formularios. En esta guía verás peticiones GET y POST, cómo manejar JSON, cómo controlar los errores de verdad (que es donde falla casi todo el mundo) y cómo hacerlo legible con async/await.
Antes de seguir, conviene que domines la asincronía en JavaScript, porque Fetch devuelve promesas. Este artículo forma parte de la hoja de ruta para aprender JavaScript.
Una petición GET básica
fetch() recibe una URL y devuelve una promesa. La respuesta hay que convertirla a JSON con .json(), que también es asíncrono.
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((datos) => console.log(datos))
.catch((error) => console.error('Error:', error));Lo mismo con async/await
Más legible y la forma recomendada hoy:
async function cargarUsuarios() {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const datos = await response.json();
console.log(datos);
}
cargarUsuarios();Controlar errores de verdad (response.ok)
Aquí está el error más común: fetch no lanza un error si el servidor responde 404 o 500. Solo falla si no hay conexión. Por eso hay que comprobar response.ok a mano.
async function cargarUsuarios() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) {
throw new Error(`Error HTTP: ${response.status}`);
}
const datos = await response.json();
console.log(datos);
} catch (error) {
console.error('No se pudieron cargar los datos:', error);
}
}Con esto controlas tanto los fallos de red (que caen en el catch) como las respuestas de error del servidor (que capturas con response.ok).
Enviar datos con POST y JSON
Para enviar datos (crear un recurso, mandar un formulario), pasas un segundo argumento con el método, las cabeceras y el cuerpo convertido a JSON con JSON.stringify().
async function crearPost() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: 'Mi primer post',
body: 'Contenido del post',
userId: 1
})
});
const creado = await response.json();
console.log(creado);
}Recuerda: los datos que llegan del servidor vienen como texto JSON y los conviertes a objeto con .json(); los que envías, los conviertes de objeto a texto con JSON.stringify().
Preguntas frecuentes
¿Fetch reemplaza a XMLHttpRequest?
Sí, para casi todo. XMLHttpRequest es el sistema antiguo, más verboso. Fetch es más limpio, usa promesas y está soportado en todos los navegadores modernos. Solo verás XMLHttpRequest en código heredado.
¿Por qué mi fetch no captura el error 404?
Porque fetch solo rechaza la promesa ante fallos de red, no ante respuestas de error del servidor. Debes comprobar response.ok (o response.status) y lanzar tú el error, como en el ejemplo de arriba.
¿Necesito Axios si tengo Fetch?
No es imprescindible. Axios añade comodidades (convierte el JSON solo, maneja errores HTTP por defecto), pero para la mayoría de proyectos Fetch nativo es suficiente y no suma peso a tu web.
Siguiente paso: llevar tu JavaScript al backend con Node.js y npm. Y para el temario completo, la hoja de ruta de JavaScript.
