Por qué deberías dominar Fetch nativo (especialmente ahora)

Hace unos años, usar librerías como Axios parecía la opción obvia.
Sintaxis más limpia, parseo automático de JSON, interceptores… simplemente hacía todo más fácil.

Pero recientemente, con problemas de seguridad y riesgos en el ecosistema (incluyendo casos donde paquetes populares fueron comprometidos), algo quedó muy claro:

👉 Cuanto más dependes de abstracciones, más frágil se vuelve tu stack.

Esto no se trata de dejar de usar herramientas.
Se trata de entender la base.

Y cuando hablamos de hacer peticiones HTTP en el navegador o en Node.js, esa base es fetch.

🧠 ¿Qué es Fetch?
fetch es una API nativa de JavaScript que te permite hacer peticiones HTTP.

Sin dependencias
Sin instalaciones
Sin sorpresas
Ya viene incluida en navegadores modernos y en Node.js (v18+).

En esencia, fetch devuelve una Promise que se resuelve con un objeto Response.

⚡ El fetch más simple que puedes escribir
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
Simple, ¿verdad?

Pero en aplicaciones reales necesitamos algo más estructurado, reutilizable y seguro.

🔧 Paso a paso: creando una función limpia con fetch
Vamos a construir una función bien hecha desde cero.

1. Definir una base URL Esto mantiene tus endpoints limpios y fáciles de mantener.

const baseUrl = "https://jsonplaceholder.typicode.com";

1. Crear una función async Usar async/await hace el código más claro.

export async function getUsers() {

1. Hacer la petición

const response = await fetch(${baseUrl}/users);

En este punto, response no es tu data todavía — es un objeto con información como status, headers, etc.

1. Procesar la respuesta

const processedResponse = await response.json();

Esto convierte la respuesta en datos utilizables en JavaScript.

1. Manejar errores correctamente Nunca confíes en la red.

try {
// lógica
} catch (err) {
console.error("Error fetching users:", err);
return [];
}

✅ Versión final (base lista para producción)

const baseUrl = "https://jsonplaceholder.typicode.com";
export async function getUsers() {
try {
const response = await fetch(${baseUrl}/users);
const processedResponse = await response.json();
console.log(processedResponse);
return processedResponse;
} catch (err) {
console.error("Error fetching users:", err);
return [];
}
}

⚠️ Mejora importante (que muchos ignoran)
fetch NO lanza errores automáticamente en fallos HTTP (como 404 o 500).

Become a Medium member
Es decir, esto:

fetch("/wrong-url")
👉 NO entra al catch.

Por eso siempre deberías validar:

if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}

🔐 Versión más segura

export async function getUsers() {
try {
const response = await fetch(${baseUrl}/users);
if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}
const processedResponse = await response.json();
return processedResponse;
} catch (err) {
console.error("Error fetching users:", err);
return [];
}
}

🚀 Por qué esto importa más que nunca
Cuando dependes totalmente de librerías como Axios:

Heredas sus vulnerabilidades
Dependes de su mantenimiento
Pierdes visibilidad de lo que realmente pasa
Y cuando algo falla… te quedas sin control.

Pero cuando entiendes fetch:

Debuggeas más rápido
Reduces dependencias
Mantienes el control
Y siendo honestos…

👉 Para la mayoría de casos, ya no necesitas Axios.

⚖️ ¿Cuándo sí usar Axios?
Para ser justos, Axios sigue siendo útil cuando necesitas:

Interceptores de request/response
Transformaciones automáticas
Soporte para navegadores antiguos
Pero incluso así, entender fetch te hace mejor desarrollador.

💭 Conclusión
Los frameworks cambian.
Las librerías van y vienen.

Pero los fundamentos…

👉 se acumulan.

Aprender fetch no es solo hacer requests — es tener control sobre tu stack.

Y en un mundo donde las dependencias pueden romperse de un día para otro…

👉 eso ya no es opcional.

👋 Sígueme para más
Comparto tips simples, snippets y buenas prácticas de programación.

Sígueme como @adams.nxt

🔗 Código
Puedes encontrar más ejemplos en mi GitHub:
https://github.com/adamsnxt