Cuando se trata de manejar solicitudes HTTP en JavaScript, Axios y Fetch han sido durante mucho tiempo las herramientas de referencia. Sin embargo, existe una alternativa poderosa y moderna que los desarrolladores deberían considerar —  Ky. Ky, liviano y repleto de funciones avanzadas, hace que el manejo de solicitudes HTTP sea más fácil y eficiente. En este artículo, analizaremos por qué Ky se destaca, con comparaciones directas con Axios y Fetch API.

1. Descripción general de Ky, Axios y Fetch API

axios

Axios es un popular cliente HTTP basado en promesas para JavaScript. Simplifica las solicitudes HTTP al ofrecer funciones como análisis JSON automático, interceptores de solicitudes y tiempos de espera personalizados. Sin embargo, el tamaño de su archivo puede convertirse en un inconveniente, especialmente para aplicaciones livianas.

Obtener API

Fetch es una API integrada del navegador para realizar solicitudes HTTP. Si bien se usa ampliamente, Fetch tiene algunas limitaciones: no incluye manejo de errores predeterminado ni reintentos integrados, lo que requiere que los desarrolladores escriban código adicional incluso para una funcionalidad básica.

Kentucky

Ky es una alternativa ligera (157~ KB) a Axios y Fetch, construida sobre Fetch pero que ofrece una API con más funciones. Con reintentos integrados, manejo de errores simplificado y enlaces de solicitud personalizables, Ky logra un equilibrio entre simplicidad y potencia.

¿Por qué elegir Ky?

• Ligero: solo 157~ KB de tamaño, ideal para aplicaciones sensibles al rendimiento.
• Moderno: construido sobre la API Fetch pero con mejores valores predeterminados.
• Soporte de reintento: reintentos automáticos en solicitudes fallidas.
• Hooks: Fácil manipulación de solicitudes y respuestas con ganchos beforeRequest y afterResponse.

2. Por qué Ky es mejor: características y ventajas clave

Ligero y eficaz

Esto convierte a Ky en una excelente opción para aplicaciones donde el rendimiento y el tamaño del paquete son críticos. A pesar de ser liviano, Ky no sacrifica funciones esenciales como los reintentos y el manejo de errores.

API simple, funciones potentes

La sintaxis de Ky es tan sencilla como la de Fetch, pero ofrece más potencia integrada. Por ejemplo, realizar una solicitud GET con Ky es tan fácil como:

import ky from 'ky';
const data = await ky.get('https://api.example.com/data').json();

¿Por qué es mejor que Fetch?

• Análisis JSON automático: no es necesario analizar manualmente la respuesta.
• Manejo de errores: Ky arroja errores significativos para códigos HTTP como 404 o 500.
• Reintentos: Ky reintenta automáticamente las solicitudes fallidas, a diferencia de Fetch, que falla silenciosamente.

Reintentos integrados

Ky viene con soporte de reintento incorporado, una característica crucial para manejar condiciones de red poco confiables. Axios también ofrece la función de reintento, pero es necesario utilizar un complemento adicional o configurarlo usted mismo. Por el contrario, Ky proporciona esta función de forma predeterminada sin configuración.

await ky.get('https://api.example.com/data', { retry: 2 });

En este ejemplo, Ky reintentará la solicitud hasta 2 veces en caso de falla, sin ninguna configuración adicional.

3. beforeRequest y afterResponse: El poder de los ganchos en Ky

Una de las características más atractivas de Ky es su sistema hooks, particularmente beforeRequest y afterResponse. Estos enlaces le brindan control total sobre sus solicitudes y respuestas HTTP sin la necesidad de middleware externo, que Axios suele requerir.

Gancho beforeRequest: Mejore las solicitudes fácilmente

Con Ky, puedes modificar fácilmente las solicitudes salientes usando el enlace beforeRequest. Ya sea que necesite agregar tokens de autenticación o modificar encabezados, beforeRequest lo hace sencillo.

Ejemplo: agregar un token de autorización a cada solicitud.

ky.extend({
  hooks: {
    beforeRequest: [
      request => {
        const token = localStorage.getItem('authToken');
        request.headers.set('Authorization', `Bearer ${token}`);
      }
    ]
  }
});

Esto reduce el código repetitivo, lo que facilita el manejo de la autenticación a nivel global.

Gancho afterResponse: simplifique el manejo de respuestas

Con el gancho afterResponse, puedes manipular las respuestas en toda tu aplicación. Este enlace es especialmente útil para manejar reintentos en códigos de estado específicos, como actualizar tokens caducados.

Ejemplo: actualizar un token caducado automáticamente en una respuesta 401 no autorizada.

ky.extend({
  hooks: {
    afterResponse: [
      async (request, options, response) => {
        if (response.status === 401) {
          const newToken = await refreshAuthToken();
          request.headers.set('Authorization', `Bearer ${newToken}`);
          return ky(request);
        }
      }
    ]
  }
});

Con esta configuración, puedes actualizar tokens sin problemas sin duplicar la lógica en tu aplicación.

4. Manejo de errores: Ky vs Axios vs Fetch API

axios

Axios proporciona un manejo decente de errores a través de interceptores, pero carece de la simplicidad que Ky ofrece de fábrica. Axios a menudo requiere una lógica personalizada para los reintentos y el manejo del código de estado de error.

Obtener API

El manejo de errores de Fetch está limitado de forma predeterminada. No arroja errores para códigos de estado HTTP como 404 o 500, lo que obliga a los desarrolladores a verificar los estados de respuesta manualmente.

Kentucky

Ky sobresale en el manejo de errores. Genera automáticamente errores para respuestas HTTP que no son 2xx y proporciona funcionalidad de reintento para solicitudes fallidas sin necesidad de código adicional. Esto convierte a Ky en una solución sólida para manejar errores con elegancia.

try {
  const data = await ky.get('https://api.example.com/data').json();
} catch (error) {
  console.error('Request failed:', error);
}

Ky envuelve toda la solicitud en una promesa y arroja automáticamente un error si el código de estado de respuesta indica una falla, lo que simplifica la depuración.

5. Ejemplos prácticos: Ky en acción

Pongamos a Ky a prueba con algunos ejemplos prácticos que muestran su simplicidad y potencia.

Ejemplo 1: realizar una solicitud GET

const response = await ky.get('https://api.example.com/items').json();
console.log(response);

Ky maneja automáticamente el análisis JSON y arroja un error para cualquier código de estado que no sea 2xx, cosa que Fetch no hace.

Ejemplo 2: Solicitud POST con reintentos

const response = await ky.post('https://api.example.com/create', {
  json: { name: 'Ky' },
  retry: 3
}).json();
console.log(response);

Ky vuelve a intentar la solicitud POST hasta 3 veces si falla, lo que ofrece mayor confiabilidad que Fetch o Axios sin configuración adicional.

6. Conclusión: ¿Vale la pena cambiar a Ky?

Si está buscando una solución moderna, ligera y repleta de funciones para realizar solicitudes HTTP en JavaScript, Ky es una excelente elección. Si bien Axios y Fetch todavía se utilizan ampliamente, Ky ofrece ventajas clave como reintentos automáticos, enlaces para personalizar solicitudes y respuestas y un mejor manejo de errores predeterminado.

Para los desarrolladores que priorizan la simplicidad, el rendimiento y el control sobre las solicitudes HTTP, definitivamente vale la pena considerar Ky como herramienta principal en sus proyectos de JavaScript.

Para obtener más ejemplos e información detallada de la API, puede visitar https://www.npmjs.com/package/ky.