Muchas aplicaciones consultan información mediante una API. En JavaScript, fetch permite hacer solicitudes de red y recibir una respuesta. Aprender a manejar fallos es tan importante como obtener los datos.
1. Qué hace fetch
fetch devuelve una promesa que se resuelve con un objeto Response cuando llega la respuesta HTTP. Un código de error como 404 o 500 no hace que la promesa se rechace automáticamente; por eso debes comprobar response.ok.
2. Consulta un recurso público
El ejemplo utiliza una dirección de demostración. La disponibilidad de una API externa puede cambiar. Nunca coloques claves privadas en código que se ejecuta en el navegador.
async function consultarPublicacion() {
try {
const respuesta = await fetch(
'https://jsonplaceholder.typicode.com/posts/1'
);
if (!respuesta.ok) {
throw new Error('Error HTTP: ' + respuesta.status);
}
const datos = await respuesta.json();
console.log(datos.title);
} catch (error) {
console.error('No se pudo cargar el recurso', error);
}
}
consultarPublicacion();3. Maneja fallos y estados
Muestra un mensaje de carga mientras llega el resultado. Si la respuesta no es correcta, informa el problema sin exponer datos internos del servidor. Utiliza try/catch para controlar también errores de red o JSON inválido.
4. Usa la información con cuidado
No insertes directamente texto desconocido mediante innerHTML. Prefiere textContent cuando el contenido procede de otra fuente. Valida los campos que necesitas: que una respuesta sea JSON no garantiza su estructura.
5. Ejercicio
Cambia la URL del ejemplo por otra API pública que permita peticiones desde el navegador. Comprueba cómo responde si desconectas Internet o solicitas un recurso inexistente.