Axios es una librería JavaScript 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. Aunque podría resultarnos muy útil en infinidad de situaciones, deberíamos antes analizarla las casuísticas con cuidado para determinar si es la mejor solución. En este artículo, analizamos las principales características de Axios y qué debemos tener en cuenta antes de empezar a trabajar con esta librería.
Si utilizamos framework JavaScript (por ejemplo, Angular) seguramente dispongamos de un cliente HTTP que haga tareas de request contra un servidor y recibir el response de una manera ordenada. En caso contrario, hacer esto con Ajax puede complicarnos más la tarea; con jQuery obtendremos una librería bastante pesada y Fetch no se puede utilizar en todos los navegadores, por lo que necesitaremos instalar algunos polyfill.
Así que Axios es una alternativa que nos brinda multitud de ventajas:
- La API es unificada para las solicitudes Ajax.
- Está optimizado para facilitar el consumo de servicios web, API REST y que devuelvan datos JSON.
- De fácil utilización y como complemento perfecto para las páginas convencionales.
- Pesa poco, apenas 13KB minimizado. Menos aún si se envía comprimido al servidor.
- Compatibilidad con todos los navegadores en sus versiones actuales.
Uso de Axios
Para trabajar Axios utilizaremos el API de las denominadas promesas, las herramientas de los lenguajes de programación que sirven para tramitar fases venideras en el flujo de ejecución de un programa. Es decir, cuando recibamos respuesta del servidor, se llamará a un callback configurada en then y en el momento que arroje un error, se correrá la misma función, pero definida por catch.
Instalación de Axios
Comenzamos el uso de la librería disponiendo de ella mediante su CDN.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
También podemos instalarla a través de npm y a continuación ponerla en nuestro sitio con nuestro sistema preferido de builds.
npm install axios
Ya instalada, tenemos un objeto llamado axios y con el que podemos realizar las operaciones HTTP habituales, GET, POST…
Algunos ejemplos de trabajo con Axios
Mostraremos algunos ejemplos que están pensados para el navegador como:
- Cuando llegue una solicitud mostrar un mensaje de Obteniendo datos…
- En el momento que tengamos respuesta, mostrar lo obtenido.
- Al finalizar la solicitud y con la respuesta obtenida, eliminar el mensaje de Obteniendo datos …
Utilizaremos las mismas etiquetas HTML para los tres ejemplos.
<button id="carga_ajax">Carga contenido</button> <button id="json_get">Request JSON GET</button> <button id="json_post">Request JSON POST</button> <div id="mensaje"></div> <div id="loading"> Obteniendo datos...</div>
El mensaje de “obteniendo datos…” lo ocultaremos de inicio con esta CSS:
<style>
#loading {
display: none;
}
</style>
Ejemplo de recuperación de un texto plano en Ajax
En el siguiente ejemplo realizaremos una solicitud al servidor para recoger el contenido de un archivo en formato texto.
var loading = document.getElementById('loading');
var mensaje = document.getElementById('mensaje');
var boton = document.getElementById('carga_ajax');
boton.addEventListener('click', function() {
loading.style.display = 'block';
axios.get('texto.txt', {
responseType: 'text'
})
.then(function(res) {
if(res.status==200) {
mensaje.innerHTML = res.data;
}
console.log(res);
})
.catch(function(err) {
mensaje.innerText = 'Conexión errónea ' + err;
})
.then(function() {
loading.style.display = 'none';
});
});
Destacamos la llamada al método axios.get() en la que le pasamos el recurso al que queremos acceder y a la que le sigue un objeto de configuración (parámetros, tiempo de respuesta antes del timeout, credenciales de acceso, etc.), aunque en el ejemplo solo le hemos puesto que la respuesta que esperamos es de tipo texto.
El método axios.get() devuelve una promesa y encontramos cómo se comportará en caso de error y en caso válido con las siguientes funciones then.
Acceso a un recurso de un API REST
En el siguiente ejemplo vamos a realizar una solicitud a un servicio web que nos devuelva datos en JSON.
var boton = document.getElementById('json_get');
boton.addEventListener('click', function() {
loading.style.display = 'block';
axios.get('https://jsonplaceholder.typicode.com/todos/1', {
responseType: 'json'
})
.then(function(res) {
if(res.status==200) {
console.log(res.data);
mensaje.innerHTML = res.data.title;
}
console.log(res);
})
.catch(function(err) {
console.log(err);
})
.then(function() {
loading.style.display = 'none';
});
});
En este ejemplo informamos a Axios que la respuesta esperada es JSON (responseType: ‘json’).
Ejemplo de envío de datos por POST
Por último, vamos a insertar una información a través del envío de un API REST. Usaremos el método axios.post(), al que incluimos con la URL del recurso y los datos a enviar.
Si se inserta el dato nos devolverá un status 201 (que indica que solicitud ha tenido éxito) y mostraremos en pantalla un mensaje con el ID del recurso, provocado por el servidor del API REST y arrojado como cuerpo de response.
var boton = document.getElementById('json_post');
boton.addEventListener('click', function() {
loading.style.display = 'block';
axios.post('https://jsonplaceholder.typicode.com/posts', {
data: {
userId: 1,
title: 'Post nuevo',
body: 'Ejemplo de librería Axios.'
}
})
.then(function(res) {
if(res.status==201) {
mensaje.innerHTML = 'El Post ha sido guardado bajo el id: ' + res.data.id;
}
})
.catch(function(err) {
console.log(err);
})
.then(function() {
loading.style.display = 'none';
});
});
Es similar al resto, aunque cabe destacar que la ventaja de Axios frente a la API de Fetch es que el post que se realiza con el objeto JavaScript es plano y no hace falta trabajar con el API de FormData para realizar la solicitud post.
Código completo de ejemplos con Axios
Este sería el código completo con los ejemplos que hemos realizado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#loading {
display: none;
}
</style>
<script src="/blognode_modules/axios/dist/axios.min.js"></script>
</head>
<body>
<button id="carga_ajax">Carga contenido</button>
<button id="json_get">Request JSON GET</button>
<button id="json_post">Request JSON POST</button>
<div id="mensaje"></div>
<div id="loading"> obteniendo datos…</div>
<script>
var loading = document.getElementById('loading');
var mensaje = document.getElementById('mensaje');
var boton = document.getElementById('carga_ajax');
boton.addEventListener('click', function() {
loading.style.display = 'block';
axios.get('texto.txt', {
responseType: 'text'
})
.then(function(res) {
if(res.status==200) {
mensaje.innerHTML = res.data;
}
console.log(res);
})
.catch(function(err) {
mensaje.innerText = 'Error de conexión ' + err;
})
.then(function() {
loading.style.display = 'none';
});
});
var boton = document.getElementById('json_get');
boton.addEventListener('click', function() {
loading.style.display = 'block';
axios.get('https://jsonplaceholder.typicode.com/todos/1', {
responseType: 'json'
})
.then(function(res) {
if(res.status==200) {
console.log(res.data);
mensaje.innerHTML = res.data.title;
}
console.log(res);
})
.catch(function(err) {
console.log(err);
})
.then(function() {
loading.style.display = 'none';
});
});
var boton = document.getElementById('json_post');
boton.addEventListener('click', function() {
loading.style.display = 'block';
axios.post('https://jsonplaceholder.typicode.com/posts', {
data: {
userId: 1,
title: 'Post nuevo',
body: ' Ejemplo de librería Axios.'
}
})
.then(function(res) {
if(res.status==201) {
mensaje.innerHTML = ' El Post ha sido guardado bajo el id: ' + res.data.id;
}
})
.catch(function(err) {
console.log(err);
})
.then(function() {
loading.style.display = 'none';
});
});
</script>
</body>
</html>
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
