La API Fetch
fetch(url) pide al navegador que envíe una solicitud HTTP. Devuelve enseguida una promesa que normalmente se resuelve con un Response, no con JSON analizado.
Primero Response, después los datos
await fetch(...) entrega estado, cabeceras y flujo del cuerpo. response.json() lee el texto, analiza JSON y devuelve otra promesa con datos de JavaScript.
Dos etapas separadas
Separa el transporte del análisis. Una respuesta puede tener un estado útil aunque el cuerpo no sea JSON.
📊 De la solicitud a los datos
| Expresión | Resultado | Significado |
|---|---|---|
| fetch(url) | Promise<Response> | solicitud iniciada |
| await fetch(url) | Response | estado, cabeceras y flujo del cuerpo |
| response.json() | Promise<any> | lectura y análisis del cuerpo |
| await response.json() | datos de JavaScript | objeto o valor analizado |
fetch devuelve una promesa
El ejemplo autónomo usa una URL Blob solo para mostrar el tipo. Es un recurso en memoria del navegador, no un endpoint HTTP del mismo origen.
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
const ticket = fetch(url);
console.log(ticket instanceof Promise);
ticket.finally(() => URL.revokeObjectURL(url));
La salida es true. En una aplicación, cambia la URL Blob por una ruta HTTP como /data/drink.json.
Espera Response y luego JSON
El siguiente ejemplo crea el mismo recurso local y realiza ambas esperas.
async function loadDrink() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
console.log(data.drink);
} finally {
URL.revokeObjectURL(url);
}
}
loadDrink();
La salida es lida tea. Un archivo real /data/drink.json podría contener {"drink":"lida tea"} y se leería igual.
Comprueba los errores HTTP
fetch suele resolverse aunque HTTP responda 404 o 500. Un fallo de red puede rechazarla, pero un mal estado normalmente no. Revisa response.ok o response.status.
const response = new Response("Not found", {
status: 404,
statusText: "Not Found"
});
console.log(response.ok);
console.log(response.status);
La respuesta creada muestra false y 404, las mismas propiedades que mirarías tras un fetch real. No analices una página de error como JSON salvo que la API lo garantice.
json también devuelve una promesa
json() lee y analiza el cuerpo de forma asíncrona.
const response = new Response('{"drink":"lida tea"}', {
headers: { "Content-Type": "application/json" }
});
const dataPromise = response.json();
console.log(dataPromise instanceof Promise);
dataPromise.then(data => console.log(data.drink));
La salida es true. Después de await response.json(), data es el objeto de JavaScript y data.drink es la cadena.
Demo sin depender de un endpoint
La página obtiene una URL Blob y funciona sola. Muestra el flujo y el estado 200, pero no finge ser una solicitud al servidor.
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
async function load() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
document.getElementById("cup").textContent = data.drink;
document.getElementById("line").textContent =
response.status + " / " + data.drink;
} finally {
URL.revokeObjectURL(url);
}
}
load();
</script>
</body>
</html>
La página muestra 200 / lida tea. En producción usa una URL HTTP y conserva la comprobación de ok antes de analizar.
Pruébalo
Crea /data/drink.json en un servidor local y sustituye la URL Blob. Después solicita una ruta ausente y compara ok y status.
Errores frecuentes
No confundas la promesa de fetch con los datos. Llama y espera json(). No dependas de catch para detectar cada 404.
Recuerda
fetch envía una solicitud y da una promesa de Response. Comprueba ok y analiza el cuerpo esperado. response.json() da una promesa con datos.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior