Axios es una biblioteca de código abierto para realizar solicitudes HTTP asíncronas a puntos finales REST en el navegador y Node.js. Es un cliente HTTP basado en promesas que se puede usar en JavaScript simple, así como en marcos de JavaScript modernos como React, Angular y Vue.js, etc.
En este tutorial, utilizaremos Axios en un proyecto de JavaScript y HTML5. Vamos a crear un nuevo proyecto HTML5:
# create and switch to new directory
$ mkdir axios-js && cd axios-js
# create files
$ touch index.html script.js
# open the project in VS Code
$ code .
Instalación
Agregar Axios al proyecto HTML5 es fácil. Puede usar el administrador de paquetes npm o la red de entrega de contenido (CDN). Si prefiere usar el administrador de paquetes npm, ejecute el siguiente comando en su terminal:
$ npm install axios --save
Descargará la biblioteca en el node_modules carpeta desde donde puedes agregarlo a tu proyecto:
<script src="./node_modules/axios/dist/axios.min.js"></script>
La forma más sencilla de incluir Axios es mediante el uso de CDN externo:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Interfaz de usuario
Actualicemos nuestro index.html archivo para mostrar una lista de usuarios:
índice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios in JavaScript</title>
</head>
<body>
<div>
<h1>Users</h1>
<ul></ul>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Para ejecutar el proyecto, utilizaremos el servidor http, un servidor HTTP de línea de comandos simple y sin configuración:
$ http-server -p 3000
Ahora puede visitar http://localhost:3000 para ver su proyecto.
Solicitud OBTENER
Vamos a crear una nueva función en el script.js para obtener una lista de usuarios que utilizan la solicitud GET. Usaremos la API REST de Reqres para todos nuestros ejemplos.
secuencia de comandos.js
const fetchUsers = () => {
axios.get('https://reqres.in/api/users')
.then(response => {
const users = response.data.data;
console.log(`GET list users`, users);
})
.catch(error => console.error(error));
};
fetchUsers();
Si ha usado jQuery antes, comprenda el axios.get() La función es fácil. Simplemente pasamos la URL del punto final como parámetro a este método. El método devuelve una promesa, lo que nos permite usar then() y catch() métodos para manejar el resultado.
Cuando la promesa se resuelva con éxito, obtendrá un response objeto de vuelta. Este objeto tiene información sobre la respuesta, como headers , data , config , status e incluso completar request objeto.
Ahora extendamos nuestro script.js y agregue una nueva función que analice el users objeto y agréguelo a DOM:
secuencia de comandos.js
const createLi = (user) => {
const li = document.createElement('li');
// add user details to `li`
li.textContent = `${user.id}: ${user.first_name} ${user.last_name}`;
return li;
};
const appendToDOM = (users) => {
const ul = document.querySelector('ul');
//iterate over all users
users.map(user => {
ul.appendChild(createLi(user));
});
};
const fetchUsers = () => {
axios.get('https://reqres.in/api/users')
.then(response => {
const users = response.data.data;
console.log(`GET list users`, users);
// append to DOM
appendToDOM(users);
})
.catch(error => console.error(error));
};
fetchUsers();
Solicitud POST
Podemos agregar un nuevo usuario a nuestra API REST con axios.post() método. Simplemente agregue una nueva función createUsers() dentro de script.js :
const createUser = (user) => {
axios.post('https://reqres.in/api/users', user)
.then(response => {
const addedUser = response.data;
console.log(`POST: user is added`, addedUser);
// append to DOM
appendToDOM([addedUser]);
})
.catch(error => console.error(error));
};
Para crear un nuevo usuario, debe agregar un <form> dentro de index.html archivo para capturar la información del usuario:
<div id="create-user">
<h1>Create User</h1>
<form>
<input type="text" id="first_name" placeholder="Enter First Name">
<input type="text" id="last_name" placeholder="Enter Last Name">
<button type="submit">Add User</button>
</form>
</div>
Ahora agregue un detector de eventos para el envío de formularios para crear un nuevo usuario:
const form = document.querySelector('form');
const formEvent = form.addEventListener('submit', event => {
event.preventDefault();
const first_name = document.querySelector('#first_name').value;
const last_name = document.querySelector('#last_name').value;
const user = { first_name, last_name };
createUser(user);
});
Solicitud de ELIMINACIÓN
Axios proporciona axios.delete() método para hacer una solicitud DELETE. Agreguemos la función de eliminación a nuestra lista de usuarios. En primer lugar, cree una nueva función deleteUser() dentro de script.js :
const deleteUser = (elem, id) => {
axios.delete(`https://reqres.in/api/users/${id}`)
.then(response => {
console.log(`DELETE: user is removed`, id);
// remove elem from DOM
elem.remove();
})
.catch(error => console.error(error));
};
Ahora actualice el createLi() método para adjuntar un onclick evento que maneja la eliminación del usuario cuando se hace clic:
const createLi = (user) => {
const li = document.createElement('li');
// add user details to `li`
li.textContent = `${user.id}: ${user.first_name} ${user.last_name}`;
// attach onclick event
li.onclick = e => deleteUser(li, user.id);
return li;
};
Resumen
Axios es una biblioteca de cliente HTTP fácil de usar que nos permite enviar fácilmente solicitudes HTTP asíncronas a puntos finales REST y realizar operaciones CRUD. Si desea obtener más información sobre Axios, consulte las guías sobre Axios en Node.js y las bibliotecas de cliente HTTP de Node.js.
Si tiene alguna pregunta o comentario, no dude en enviarme un tweet en cualquier momento.
Codificación feliz 😍