Cómo instalar y usar Axios en JavaScript

Construir una aplicación del mundo real a menudo requiere interacción con API para enviar y buscar datos; Hay múltiples formas de interactuar con API. Uno de los paquetes que permiten que JavaScript y los proyectos de NodeJS interactúen con API con una sintaxis de código muy simple y directa es Axios.

Axios es un cliente HTTP, que se utiliza para hacer xmlhttprequest desde el navegador, así como las solicitudes HTTP para proyectos creados con NodeJS. A menudo se conoce como el cliente HTTP isomórfico, donde los medios isomórficos para NodeJ y los navegadores (Vanilla JavaScript).

Axios proporciona métodos como conseguir, correo, y borrar y transforma automáticamente los datos de JSON, que es algo que lo distingue de los métodos triviales de JavaScript como el buscar() Método de la API de Fetch.

Instalación de Axios en JavaScript

Como ya se mencionó anteriormente, Axios está presente para el navegador, así como para el entorno del nodo, lo que significa que se puede instalar con NPM y en JavaScript de vainilla utilizando el script axios alojado en CDN. Hay múltiples formas de instalar Axios JavaScript en su proyecto, como:

Uso del Node Package Manager (NPM)

Axios está disponible para la biblioteca NPM y se puede instalar fácilmente en el proyecto ejecutando el siguiente comando en el terminal de su editor de código:

$ npm de instalación axios

Uso de Bower para instalar Axios

Bower se está volviendo cada vez más famosa entre las masas. Bower ayuda a instalar paquetes web al igual que NPM. Si está trabajando con Bower, puede instalar Axios utilizando las siguientes líneas de código:

$ Bower Install Axios

Usando un Axios alojado CDN

CDN significa redes de entrega de contenido, estas redes le permiten usar bibliotecas JavaScript alojadas en sus servidores. Axios se puede instalar en su proyecto utilizando uno de los dos proveedores de Axios de CDN, el primero es "Jsdelivr CDN" y el otro es el "Impkg" CDN.

Para Jsdelivr cdn Use el comando en su archivo HTML:

Para el impkg cdn Use el archivo HTML de comando:

Con estos comandos mencionados anteriormente, debe poder instalar y usar Axios en sus proyectos.

Uso de Axios en JavaScript

Para demostrar el uso de Axios que acabamos de instalar utilizando uno de los métodos mencionados anteriormente en un programa JavaScript, vamos a necesitar una página web HTML. Para esta publicación, vamos a escribir las siguientes líneas dentro del archivo HTML:

Usuarios

Como puede notar en el código, hemos hecho una lista desordenada que usaremos para mostrar la lista de usuarios que obtenemos de la API.

Esto debería darnos la siguiente página web en nuestro navegador:

Para demostrar la obtención de datos utilizando los axios, vamos a usar el REQ | Resonancia API y la URL para la API es "https: // reqres.IN/API/Usuarios ". El siguiente paso es escribir tres funciones diferentes en nuestro archivo JavaScript:

• fetch_users (): Esto utilizará AXIOS para obtener datos de la API y enviar los datos a la función AppendTodom ()
• appendTodom (): Esto agregará el nombre del usuario al
  etiqueta después de crear un nuevo elemento de lista con la ayuda de la create_li función
  • create_li (): Esto tomará los datos de cada usuario y creará un nuevo elemento de lista con solo el nombre del usuario colocado dentro de él:

  La función fetch_user () se ve así:

  const fetch_users = () =>
  axios.Get ("https: // reqres.IN/API/Usuarios ").entonces ((respuesta) =>
  Const Users = Respuesta.datos.datos;
  appendTodom (usuarios);
  )
  .Catch ((Error) => Consola.error (error));
  ;

  La función appendTodom () se puede crear con las siguientes líneas:

  const appendTodom = (users) =>
  const ul = documento.QuerySelector ("UL");
  usuarios.map ((usuario) =>
  ul.appendChild (create_li (usuario));
  );
  ;

  Y, por último, la función create_li () se puede crear utilizando las siguientes líneas de código:

  constcreate_li = (user) =>
  const li = documento.createElement ("li");
  li.textContent = '$ usuario.id: $ usuario.First_Name $ usuario.apellido';
  regresar li;
  ;

  Ahora que hemos codificado todas nuestras funciones, solo tenemos que invocar la función Fetch_users, pero para eso vamos a agregar un botón en nuestro archivo HTML con las siguientes líneas de código:

  Haz clic en mí para obtener datos

  Ahora que tenemos nuestro botón, podemos ejecutar la función fetch_users () en el botón Presione usando el siguiente código en nuestro archivo de script:

  $ ("#botón").hacer clic (function ()
  fetch_users ();
  );

  El Código HTML completo es como:

  
  
  

  Usuarios

  
  
  
  Haz clic en mí para obtener datos
  
  

  El El código completo de JavaScript es como:

  $ ("#botón").hacer clic (function ()
  fetch_users ();
  );
  constcreate_li = (user) =>
  const li = documento.createElement ("li");
  li.textContent = '$ usuario.id: $ usuario.First_Name $ usuario.apellido';
  regresar li;
  ;
  constappendTodom = (users) =>
  const ul = documento.QuerySelector ("UL");
  usuarios.map ((usuario) =>
  ul.appendChild (create_li (usuario));
  );
  ;
  constfetch_users = () =>
  axios
  .Get ("https: // reqres.IN/API/Usuarios ")
  .entonces ((respuesta) =>
  Const Users = Respuesta.datos.datos;
  appendTodom (usuarios);
  )
  .Catch ((Error) => Consola.error (error));
  ;

  Al ejecutar este código, obtendrá el siguiente resultado en su navegador:

  Como puede ver, podemos obtener datos del API sobre el botón presione usando Axios En nuestro código JavaScript.

  Conclusión

  Axios es un cliente HTTP isomórfico que está disponible tanto para el entorno de desarrollo de nodos como para el JavaScript de vainilla. Axios es una biblioteca estrictamente basada en la promesa, y convierte automáticamente los datos que obtiene de la API del formato JSON. Para usar Axios en su proyecto, debe instalarlo desde la biblioteca NPM o agregarlo en su archivo HTML utilizando un CDN alojado por Axios. En esta publicación, aprendimos a instalar y ejecutar Axios en nuestro proyecto JavaScript.