Axios es una conocida biblioteca de JavaScript. Es un cliente HTTP basado en promesas para navegadores y Node.js. Si ha estado trabajando como programador de JavaScript en los últimos años, entonces definitivamente utilizó esta biblioteca. En octubre de 2019, el paquete Axios se descargó de npm 25 millones de veces. Parece que el futuro de Axios no tiene nubes. Pero, ¿y si te digo que Axios es un proyecto muerto? Esto es exactamente de lo que
se trató una
discusión sobre Reddit. A saber, estamos hablando de lo siguiente:
- El repositorio Axios GitHub tiene un nivel muy bajo de actividad de desarrollador.
- Se ignoran los problemas y las relaciones públicas.
- El equipo de desarrollo está en silencio.
La situación se ve agravada por la
vulnerabilidad ampliamente discutida. Esta vulnerabilidad se informó en 2017. Los autores del proyecto la ignoraron durante más de dos años.
Cuando la biblioteca Axios se hizo popular, los navegadores no tenían una API que implementara un cliente HTTP basado en promesas. La interfaz estándar de solicitud XML HTTP (XHR) era inconveniente, era difícil trabajar con ella. Los desarrolladores aceptaron con gusto Axios debido al hecho de que esta biblioteca les facilitó la vida.
La API Fetch se lanzó en 2015. ¿Por qué seguimos usando Axios en 2019? Comparemos estas dos tecnologías.
Volumen de código de plantilla
▍Fetch
fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(json => console.log(json))
▍Axios
axios.get("https://jsonplaceholder.typicode.com/todos/1") .then(response => console.log("response", response.data))
Al usar Fetch, tienes que lidiar con dos promesas. Pero cuando trabajamos con Axios, tenemos acceso directo al resultado JSON en la propiedad de
data del objeto de respuesta.
El método
body mixin
json() toma un flujo de
Respuesta y lo lee por completo. Devuelve una promesa que se resuelve con el resultado JSON de analizar el texto del cuerpo de la solicitud.
Debe utilizar aún más código repetitivo en Fetch cuando trabaje con solicitudes POST.
▍Fetch
fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", body: JSON.stringify({ title: "Title of post", body: "Post Body" }) }) .then(res => { if (!response.ok) throw Error(response.statusText); return response.json(); }) .then(data => console.log(data)) .catch(error => console.log(error));
▍Axios
axios .post("https://jsonplaceholder.typicode.com/posts", { title: "Title of post", body: "Body of post" }) .then(response => console.log(response.data)) .catch(error => console.log(error));
El uso de Axios evita escribir grandes cantidades de código repetitivo y hace que el código sea más limpio y claro.
Manejo de errores
▍Fetch
fetch("https://jsonplaceholder.typicode.com/todos/100000") .then(response => { if (!response.ok) throw Error(response.statusText); return response.json(); }) .then(data => console.log("data", data)) .catch(error => { console.log("error", error); });
▍Axios
axios .get("https://jsonplaceholder.typicode.com/todos/100000") .then(response => { console.log("response", response); }) .catch(error => { console.log("error", error); });
La biblioteca Axios informa errores de red, pero la API Fetch no. Al trabajar con Fetch, siempre debe verificar la propiedad
response.ok . Para simplificar la solución de este problema, verificar este error puede emitirse como una función separada:
const checkForError = response => { if (!response.ok) throw Error(response.statusText); return response.json(); }; fetch("https://jsonplaceholder.typicode.com/todos/100000") .then(checkForError) .then(data => console.log("data", data)) .catch(error => { console.log("error", error); });
Funciones faltantes
Axios puede monitorear el progreso de la carga de datos. Fetch no es compatible con esto. Esto puede ser un factor decisivo en la elección de la tecnología para aquellos que están desarrollando una aplicación que permite a los usuarios subir fotos o archivos de video al servidor.
const config = { onUploadProgress: event => console.log(event.loaded) }; axios.put("/api", data, config);
Bibliotecas alternativas
Aquí hay un par de alternativas a Axios y la API Fetch:
- Ky es un cliente HTTP en miniatura e inteligente basado en
window.fetch . - Superagent es una pequeña biblioteca progresiva de cliente HTTP basada en
XMLHttpRequest .
Resumen
¿Que debo usar en 2019? Depende mucho. Por ejemplo, si necesita realizar un seguimiento del progreso de carga de materiales en un servidor, Axios o Superagent es lo mejor para usted. Si puede manejar las limitaciones de Fetch, entonces es mejor que use esta API. Y para mejorar un poco el código Fetch, pruebe una biblioteca de contenedor como Ky.
Estimados lectores! ¿Qué clientes HTTP utilizas en tus proyectos?
