Axios

Axios es un cliente HTTP basado en promesas para node.js que puede ejecutarse en el navegador y que nos permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de procesar.

Instalación y uso de Axios

Para utilizar Axios en un proyecto hay varias formas de instalarlo, pero la forma más común y que más vamos a utilizar es usando npm:

npm install axios

Después de instalar la dependencia simplemente se importará en donde sea necesario su uso:

import axios from "axios";

Y por último se utilizará este para realizar solicitudes Http. Hay que tener en cuenta que Axios trabaja con promesas, siendo que la forma más óptima de utilizarlo es haciendo llamadas asíncronas para obtener y manejar los datos, así como manejar los errores y los distintos casos de uso.

Principales diferencias entre Axios y Fetch

• Librería vs nativo: Obviamente Axios, al ser una librería, requiere de su instalación para ser usada, mientras que Fetch es parte de JavaScript nativo. Pero Axios proporciona ciertas ventajas que pueden hacerlo más útil a la hora de usarlo en vez de Fetch. Como por ejemplo:

• Manejo de errores: Axios proporciona un manejo de errores propio, ya que este tiene un mecanismo de manejo de errores incorporado que facilita su captura y manejo, mientras que Fetch requiere que se capturen y manejen manualmente. Ejemplo:

axios.get("/ejemplo", {
  validateStatus: function (status) {
    // Devuelve un error cada vez que el código HTTP es mayor o igual a 500
    return status >= 500;
  },
});

• Resultado de la Respuesta: Axios analiza automáticamente la respuesta a JSON, lo que facilita el trabajo con los datos devueltos, mientras que Fetch devuelve la respuesta en bruto, teniendo que transformar manualmente los datos a JSON.

• Métodos HTTP: Axios soporta todos los métodos HTTP, incluyendo GET, POST, PUT, DELETE, etc., mientras que Fetch solo soporta los métodos GET y POST de forma nativa, aunque se puede usar el método Fetch usando POST configurando el cuerpo de la solicitud para realizar otras operaciones.

Ejemplos de uso de Axios

import axios from "axios";

const endpoint = "https://pokeapi.co/api/v2/pokemon/ditto";

const retrieveData = async () => {
  try {
    const response = await axios.get(endpoint);

    // En este punto, response ya tiene los datos de la Api, y no hay que transformar la respuesta a JSON, ya que se hace automáticamente

    return response.name;
  } catch (error) {
    return error;
  }
};

const data = await retrieveData();

console.log(data);

// data.name equivale a "ditto" o al error, dependiendo de si la llamada se ha realizado correctamente o no

En este ejemplo, se usa Axios junto a la PokéApi para realizar una llamada asíncrona en la cual obtener los datos del Pokémon “Ditto”. Como se puede ver, Axios es bastante sencillo y eficaz a la hora de realizar las peticiones.

Conclusión

Axios se ha establecido como una herramienta poderosa y versátil para realizar solicitudes HTTP en aplicaciones web, ofreciendo una serie de características que lo hacen atractivo para muchos desarrolladores. Su naturaleza basada en promesas, la capacidad de manejar errores de manera intuitiva, y la transformación automática de datos JSON son solo algunas de las ventajas que Axios aporta sobre la API Fetch nativa de JavaScript.

Además, la flexibilidad de Axios para trabajar tanto en el navegador como en Node.js, junto con su amplia compatibilidad con navegadores, lo hace una opción atractiva para proyectos que requieren una solución robusta y confiable para las solicitudes HTTP. La capacidad de Axios para manejar solicitudes asíncronas de manera eficiente y su soporte para métodos HTTP adicionales como PUT y DELETE, lo hacen especialmente útil para aplicaciones que necesitan realizar operaciones más complejas en el servidor.

Sin embargo, es importante recordar que la elección entre Axios y Fetch debe basarse en las necesidades específicas de tu proyecto. Mientras que Axios ofrece una gama más amplia de características y una sintaxis más amigable, Fetch es una opción nativa que no requiere instalación adicional y puede ser suficiente para aplicaciones más simples o cuando se prefiere trabajar con APIs de bajo nivel.

Enlace a la página Oficial de Axios

https://axios-http.com/docs/intro