Cómo hacer solicitudes HTTP en JavaScript usando Axios | Explicado con ejemplos

Axios es estrictamente una biblioteca JavaScript basada en la promesa que se puede incluir en su proyecto utilizando el uso del Administrador de paquetes de nodo (NPM) o Axios alojados en CDN. Se utiliza para hacer XMLHTTPRequest desde el navegador, así como las solicitudes HTTP para proyectos creados con NodeJS. Dado que puede funcionar con los proyectos de nodo y para los navegadores, a menudo se conoce como un módulo isomórfico.

Es un cliente HTTP, lo que significa que podemos usar su CONSEGUIR, CORREO, y BORRAR Métodos para interactuar con API

Configuración de Axios en su proyecto

Si está trabajando con el paquete de nodo Administrar, puede descargar Axios escribiendo el siguiente comando en el terminal de su editor de código:

$ npm de instalación axios

Si está trabajando con Vanilla JavaScript, puede incluir los AXIOS alojados CDN en su archivo HTML utilizando la siguiente línea:

También para probar axios, utilizaremos la API simulada proporcionada por REQ | Resonancia. Y la URL de la API es "https: // reqres.IN/API/Usuarios ".

Dado que es un tutorial para mostrarle cómo trabajar con Axios para hacer solicitudes HTTP, por lo tanto, no manipularemos con elementos HTML. Solo tenemos las siguientes líneas en la página web HTML:

Solicitudes de Axios HTTP

Obtenga solicitud con Axios

Para hacer CONSEGUIR Solicitudes a la API usando API Usamos la siguiente sintaxis:

axios.Obtener (URL).entonces (respuesta => ).capt (error => ());

Usemos esta sintaxis para hacer una solicitud GET para REQ | RES API del usuario:

axios.Get ("https: // reqres.IN/API/Usuarios ").entonces ((respuesta) =>
Const Users = Respuesta.datos.datos;
consola.registrar ('obtener usuarios', usuarios);
).Catch ((Error) => Consola.error (error));

Pero queremos envolver este método GET en una función, así que use las siguientes líneas de código:

const getUsers = () =>
axios
.Get ("https: // reqres.IN/API/Usuarios ")
.entonces ((respuesta) =>
Const Users = Respuesta.datos.datos;
consola.registrar ('obtener usuarios', usuarios);
)
.Catch ((Error) => Consola.error (error));
;

Ahora, todo lo que tenemos que hacer es llamar a la función getuesrs () Con la siguiente línea de código:

getUsers ();

Al ejecutar el archivo HTML, verá los siguientes resultados:

Si ampliamos esta entrada, podremos ver la respuesta de la API mucho más claramente:

Hicimos un éxito CONSEGUIR Solicitar el uso de Axios e imprimir la respuesta a la consola.

Solicitud de publicación con Axios

Para hacer una solicitud de publicación con Axios, debe usar la siguiente sintaxis:

axios.Post (URL).entonces ((respuesta) => ).capturar ((error));

Para hacer una solicitud de publicación al REQ | RES API, Utilizamos las siguientes líneas de código que crearán un nuevo usuario:

const createUser = (user) =>
axios
.post ("https: // reqres.IN/API/Usuarios ", usuario)
.entonces ((respuesta) =>
const adicional = respuesta.datos;
consola.log ('Publicar: Se agrega el usuario', adicional);
)
.Catch ((Error) => Consola.error (error));
;

Para invocar esto Solicitud postal, Necesitamos llamar a esta función crear usuario(), Pero antes de hacerlo, necesitamos verificar la API sobre qué tipo de JSON acepta para una nueva creación de usuarios. Entonces, en el sitio web REQ | Req podemos ver el siguiente formato JSON para la solicitud de publicación:

Toma un "nombre" par de valores clave y un par de valores clave de "trabajo". Llamemos al crear usuario() función con JSON apropiado dentro de él:

crear usuario(
Nombre: "John Doe",
Trabajo: "Auditor",
);

Ejecute el archivo y verá el siguiente resultado en la consola de su navegador:

Eso es todo, pudimos enviar un CORREO Solicitud a una API usando Axios.

Eliminar la solicitud con Axios

Para hacer solicitudes de eliminación con Axios a la API, debe usar la siguiente sintaxis

axios.Eliminar (URL).entonces ((respuesta) => ).capt ((error) => ());

Para hacer una solicitud Eliminar a la API REQ | RES, use las siguientes líneas de código:

consteleteUser = (id) =>
axios
.eliminar ('https: // reqres.in/api/users/$ id ')
.entonces ((respuesta) =>
consola.log ('Eliminar: se elimina el usuario', id);
)
.Catch ((Error) => Consola.error (error));
;

Todo lo que tenemos que hacer es invocar la función DeleteUser usando la siguiente línea:

eliminuser (2);

Ejecute el archivo y observe el resultado en la consola del navegador:

Ahí tienes, hemos hecho con éxito una solicitud de eliminación a una API usando Axios.

Conclusión

Axios es un cliente HTTP que se puede incluir en los proyectos de su nodo utilizando el administrador de paquetes de nodo o en su proyecto JavaScript de vainilla utilizando los Axios alojados en CDN. Axios se usa para hacer xmlhttprequests a una API, y es estrictamente una biblioteca basada en la promesa. En esta publicación, aprendimos a interactuar con una API externa que usa axios y hacer diferentes CONSEGUIR, CORREO y BORRAR Solicitudes al API.