Neofetch

wraper de fetch para hacer mas simple el uso de la api nativa de js fetch

Parametros

Neofetch.get(url,options)

url: Es la url a la que queremos mandar la peticion, en el caso de peticiones GET o DELETE no es necesario concantener las parameros

options: Es un objeto que espera tener la siguiente forma

{
  body: {},
  paramms: [{key: id, value: 1}],
  headers: {},
  optiosn: {}
}

• body: Representa el cuerpo de la peticion en los tipos POST, PUT o PATCH se puede mandar como un objeto normal, internamente ya se hace el stringify

• params: Es un arreglo de objetos de tipo key y value con el que se modifica el url de la peticion para que se manden correctamente

• headers: Objeto que representa los encabezados que se quieren pasar en la peticion, ademas de los comunes que ya estan presentes en todas las peticiones

• options: Objeto que representa opciones adicionales que se quieren argrea a la peticion

Interceptores

Se implemento el uso de diferentes interceptores del tipo errores, request o response al momento de realizar peticones http la forma de usarlos es la siguiente:

NeoFetch.interceptors.error.use((error) => {
  console.error("Error global:", error.status, error.message)
})

NeoFetch.interceptors.request.use(async (config) => {
  console.log("Enviando petición:", config.url);

  const token = localStorage.getItem("access_token");

  if (token) {
    config.headers = {
      ...config.headers,
      Authorization: `Bearer ${token}`
    };
  }

  return config; 
});

NeoFetch.interceptors.response.use(async ({ data, response }) => {
  console.log("Respuesta recibida:", response.status);

  if (Array.isArray(data)) {
    data = data.map(item => ({ ...item, receivedAt: new Date().toISOString() }));
  }

  return { data, response };
});

Manejo de errores

Se implemento la respuesta de una exception, de esta manera se puede usar un bloque try catch para el manejo de errores, se puede implementar de la siguiente manera

try{
  const { data } = await NeoFetch.get('/api/users')
} catch(error){
  console.error(`Error ${err.status}:`, err.data || err.message)
}

El objeto que se devuelve en la exception tiene el siguiente aspecto

error = {
    `HTTP ${response.status}: ${response.statusText}`,
    status: = response.status,
    data: data,
    url: swapurl,
}

Timeout

Se implemento el uso de timeout en las peticiones, a continuacion se muestra como se puede usar esta configuracion

try {
  const { data } = await NeoFetch.get("https://httpbin.org/delay/5", {
    timeout: 2000, // 2 segundos
  });
  console.log("Respuesta:", data);
} catch (err) {
  if (err.isTimeout) {
    console.error("Timeout alcanzado:", err.message);
  } else {
    console.error("Otro error:", err.message);
  }
}

De esta forma se puede configurar un tiempo para que la peticion sea cancelada si no se responde a tiempo

Tambien se puede usar un AbortController manual, en caso de necesitar implementar la cancelacion desde alguna parte diferente

const controller = new AbortController();

NeoFetch.get("https://httpbin.org/delay/10", { signal: controller.signal })
  .then(({ data }) => console.log("✅ Completado:", data))
  .catch(err => {
    if (err.name === "AbortError") {
      console.log("🚫 Petición cancelada manualmente");
    }
  });

// Cancelar manualmente después de 2 segundos
setTimeout(() => controller.abort(), 2000);

Se puede capturar un error de tipo timeout, con la siguiente condfiguracion

NeoFetch.interceptors.error.use(async (err) => {
  if (err.name === "AbortError") {
    console.warn("🧩 Petición abortada:", err.message);
  } else {
    console.error("🚨 Error HTTP:", err.status, err.message);
  }
});

NeofetchClient

Ahora esta disponible una nueva clase instanciable, para permitir configuracion por cada instancia

configuracion

Cuando se crea una nueva instancia del cliente se pueden pasar los siguiente argumentos

const api = new NeoFetch(baseUrl,defautlHeaders, timeout);

• baseUrl: Es el contenido fijo en la url, por ejemplo local:host, permitiendp solo usar una url corta en los metodos get, post,...etc
• defautlHeaders: Los headers que se quieren mandar en todas las peticiones, por ejemplo application/json, auth etc
• timeout: La cantidad de tiempo hasta que se cancele la peticion por tiempo de espera