Con la llegada de las aplicaciones web modernas y el crecimiento de Javascript, los plugins clásicos de jQuery, o la forma tradicional de XHR para recuperar datos, en sitios web o aplicaciones web, perdieron el poder que tenían en el mercado, ya que nacieron nuevas formas de hacerlo. Algunas son nativas y muy potentes, como es el caso de la API de fetch.
Fetch
fetch() es un método que promete mucho y funciona en muchos casos. Sin embargo, si estás buscando a soluciones más abrangentes y sólidas, bibliotecas como Axios, Request, o Superagent pueden ser lo que estás buscando para desarrollar tu proyecto.
Hoy quiero compartir contigo las características de estas bibliotecas de cliente HTTP más utilizadas. No se trata, por tanto del típico “Axios vs Request vs Superagent”. Espero que este artículo te ayude a seleccionar la mejor biblioteca de cliente HTTP para tu nuevo proyecto si estás interesado en alguna solución para conectar a GraphQL o a una API REST para enviar y recibir datos.
Veamos cuales son las mejores alternativas a fetch.
Axios
La semana pasada hablábamos sobre las Promises de JavaScript y no fue una casualidad. La verdad es que es casi imposible desarrollar aplicaciones web modernas sin utilizarlas en alguna funcionalidad. Axios no es una excepción.
¿Qué es Axios?
Axios es un cliente HTTP basado en Promise para el navegador y para Node.js. Axios soporta todos los navegadores modernos y su instalación es muy sencilla gracias a npm, bower o yarn, o su versión cdn.
Axios es usada por más de 1.600.000 repositorios y se destaca por las siguientes características:
Pros
- Permite realizar peticiones XMLHttpRequests desde el navegador.
- Permite hacer peticiones http desde node.js
- Soporte de la API de Promise (obviamente)
- Soporte del lado del cliente para proteger contra XSRF
- Intercepta peticiones y respuestas
- Transforma datos de peticiones y de respuestas
- Transforma automáticamente datos JSON
Cons
- No es tan sencillo de utilizar
- Necesitas instalar un plugin nuevo.
- No soporta HTTP2, ni Electro, ni la API de Stream
Ejemplo
Request
Request se define como un cliente simplificado para hacer peticiones HTTP. Siendo el cliente más popular, y uno de los primeros en el gestor de paquetes npm, Request es realmente simple de usar, pero al contrario de Axios no está basada en Promise. Si necesitas usar Promise puedes utilizar la solución request-promise creada por Bluebird. Request-promise es un envoltorio de Request que retorna Promises.
Pros
- Soporta HTTPS
- Sigue las redirecciones por defecto
- Streaming. Puedes transmitir cualquier respuesta a un flujo de archivos
- Formularios. Soporta application/x-www-form-urlencoded y multipart/form-data para uploads
- Autenticación HTTP y OAuth
Cons
- No se basa en Promises de forma nativa
- No soporta la versión 2 de OAuth
- Desde marzo de 2019 que está en modo de mantenimiento. `request is done` :(
Ejemplo
Superagent
SuperAgent es una API ligera de AJAX diseñada para ofrecer flexibilidad, legibilidad y una baja curva de aprendizaje que, como Axios, funciona también con Node.js y está basada en Promises.
Pros
- Biblioteca muy conocida por la comunidad
- interfaz fluida para hacer peticiones HTTP
- Arquitectura de plugins
- Muchos plugins disponibles para diferentes funcionalidades
- API para Promise y Stream
- Cancelación de petición
- Reintenta cuando hay algún fallo
Cons
- No soporta el monitoreo del progreso de carga como XMLHttpRequest.
- No soporta errores con metadatos
Ejemplo
Conclusión
Para terminar, fetch es el nuevo estandard y es soportado por Chrome y Firefox sin que utilices ninguna biblioteca adicional. Si realmente quieres usar esta herramienta en tus aplicaciones siempre podrás usar algún polyfill para soportar otros navegadores.
De todas formas, creo que vale la pena tener en cuenta las características de Axios o las de SuperAgent para tu próximo proyecto. Ambas tienen buena documentación, son fáciles de utilizar y su curva de aprendizaje no es demasiado empinada. Por otro lado, si eres un fan de Request, debes tener en cuenta que Request está llegando a su final y puede ser un problema implementar con esta biblioteca en producción.
¿Qué biblioteca utilizas para hacer peticiones en tu aplicación web?
Fotografía: StockSnap en Pixabay
Fuentes:
