Free Press

Como desarrollador en gran parte autodidacta, he puesto a prueba el amplio mundo de los tutoriales gratuitos/pagados de Internet. Algo que veo aparecer una y otra vez en los tutoriales que realizan peticiones HTTP es el uso de una biblioteca JavaScript llamada Axios. Quería entender por qué una gama tan amplia de educadores de desarrollo web estaban haciendo uso de esta biblioteca aparentemente discreta. Así que decidí indagar para ofrecer una explicación muy sencilla y directa de lo que ofrece Axios y por qué (probablemente) merece la pena utilizarla.

Qué hace

En pocas palabras, Axios es una librería de Javascript que se utiliza para realizar peticiones HTTP desde node.js o XMLHttpRequests desde el navegador que además soporta la API ES6 Promise. Genial, por lo que deducimos que hace algo que ya podemos hacer y que recientemente se ha mejorado significativamente… Entonces, ¿por qué molestarse?

Lo que pretende mejorar: .fetch()

Fetch utiliza un proceso de dos pasos cuando se trata de datos JSON; después de hacer una solicitud inicial, tendrás que llamar al método .json() en la respuesta para recibir el objeto de datos real. Si yo tuviera una petición fetch para recuperar un objeto de conductores relevantes para mi aplicación de búsqueda de coches compartidos, podría tener algo como lo siguiente:

const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)

Esto devolvería una promesa pendiente y un objeto de respuesta que me permitiría saber que mi petición fue exitosa, pero ¿dónde están mis datos? Tenemos que recordar pasar nuestra respuesta al método .json() también.

const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())

Ahora que no es un gran problema, como muchas cosas que realmente se reduce a la memorización de la sintaxis. Pero como desarrolladores, somos simultáneamente las criaturas más perezosas y más eficientes del planeta – por lo que cualquier tipo de taquigrafía o ahorro de tiempo es digno de consideración, entra en Axios.

Mejor manejo de errores

Hay un poco de trabajo extra que tenemos que poner en nuestro extremo (de nuevo, se podría argumentar que esto es sólo una cuestión de memorización de la sintaxis) para el resultado deseado cuando se trata de registrar adecuadamente los errores de respuesta con .fetch(). MDN explica:

Una promesa fetch() rechazará con un TypeError cuando se encuentre un error de red o CORS esté mal configurado en el lado del servidor, aunque esto suele significar problemas de permisos o similares – un 404 no constituye un error de red, por ejemplo.

Supongamos que hay algo mal con nuestra variable baseUrl. La expectativa de la salida para el siguiente bloque de código sería error, pero en su lugar está bien. ¿Por qué es esto?

const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));

Resulta que fetch() sólo rechaza las promesas en situaciones de error de red relativamente raras como un fallo de búsqueda de DNS. Por suerte fetch() proporciona una simple bandera ok que indica si el código de estado de una respuesta está o no en el rango de éxito. Por lo general, lo que sucede es que terminarás escribiendo una función de manejo de errores de talla única para ser utilizada en todas tus llamadas a fetch().

Instalación de Axios

Conseguir nuevas bibliotecas es muy fácil hoy en día (Mmm.. ruibarbo), yo prefiero npm. En la raíz de la carpeta de tu proyecto abre la terminal, ejecuta npm install axios y ya está todo listo. Ahora para lograr la misma solicitud de fetch que realizamos antes, podemos invocar axios.get() en lugar de nuestro método fetch así:

const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)

¡Presto! Al utilizar axios eliminamos la necesidad de pasar los resultados de la petición HTTP al método .json(). Axios simplemente devuelve el objeto de datos que se espera directamente. Además, cualquier tipo de error con una petición HTTP ejecutará con éxito el bloque .catch() directamente. Aquí hay un breve resumen de todas sus características principales, incluyendo algunas que no cubrí directamente desde la página de GitHub:

• Hacer peticiones XMLHttp desde el navegador
• Hacer peticiones http desde node.js
• Soporta la API Promise
• Interceptar solicitud y respuesta
• Transformar datos de solicitud y respuesta
• Cancelar solicitudes
• Transformaciones automáticas para datos JSON
• Soporte del lado del cliente para proteger contra XSRF

En resumen, Axios es una mejora de calidad de vida más que otra cosa. Pero hacer muchos ajustes pequeños e incrementales de calidad de vida en el flujo de trabajo de uno puede mejorar drásticamente la calidad y la velocidad del desarrollo.