Axios js es una librería de JavaScript construida con el objetivo de gestionar la programación asíncrona con promesas. Mucha gente me preguntará ¿Por qué usar Axios y no usar jQuery que tiene una librería de promesas madura? . La pregunta más bien es ¿Por qué usar jQuery?. jQuery es la librería de Javascript de referencia a nivel de manipulación del arbol DOM . Pero su nivel de abstracción es básico, simplifica el manejo de DOM y gestiona las peticiones Ajax.
Hoy por hoy las opciones basadas en componentes como React.js están avanzando en JavaScript a gran velocidad. React no usa jQuery para gestionar la capa de presentación. Así pues nos encontramos con soluciones que no se apoyan en jQuery para gestionar la capa de presentación y el árbol DOM. Es necesario tener a nuestra disposición alguna librería de JavaScript que maneje las peticiones Ajax y promesas de forma independiente, Axios js es una de las opciones.
Un ejemplo con Axios js
Vamos a construir un ejemplo sencillo con Axiosjs . Supongamos que tenemos una aplicación de Node.js que se encarga de listar varios tipos de teléfonos:
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(express.static('.'));
app.use(bodyParser.json());
var telefonos = [{
nombre: "iphone",
precio: "700"
}, {
nombre: "android",
precio: "500"
}];
app.get('/telefonos', function(req, res) {
res.send(telefonos);
});
app.put('/telefonos/:nombre', function(req, res) {
var indice = telefonos.findIndex(function(elemento) {
return elemento.nombre == req.params.nombre;
});
telefonos[indice]=req.body;
res.sendStatus(200);
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!');
});
En este caso tenemos una url /telefonos que nos devuelve una lista de teléfonos cuando la solicitamos vía GET. En cambio se realizamos una operación de PUT actualizaremos un teléfono. Vamos a usar Axiosjs para generar un par de botones en una página HTML que se encargue de listar y actualizar los datos por consola.
<html>
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js">ç
</script>
<script type="text/javascript">
function peticionGet() {
axios.get('/telefonos')
.then(function(response) {
console.log(response.data);
})
.catch(function(error) {
console.log(error);
});
}
function peticionPut() {
axios.put('/telefonos/iphone', {
nombre: "iphone",
precio: "900"
})
.then(function(response) {
console.log(response.data);
})
.catch(function(error) {
console.log(error);
});
}
</script>
</head>
<body>
<input type="button" value="lista" onclick="peticionGet()" />
<input type="button" value="actualizar" onclick="peticionPut()" />
</body>
</html>
En este caso hemos creado dos botones sencillos que se apoyan en axiosjs para realizar las peticiones Ajax con un API de promesas más sencilla que la de jQuery y sobre todo más independiente.
Cada día es mas habitual en el mundo de librerías de componentes de JavaScript apoyarse en otras librerías muy especializadas Axios es una muy interesante.
PD Muchas gracias al lector que me la recomendó echar un veo 🙂
Otros artículos relacionados: JavaScript Streams vs Promises , JavaScript Promise y la programación asíncrona , RxJS y la programación reactiva.
yo teste la carga de un componente en los 3 spa y el rendimiento es una basura, a no ser q empiecen a pensar en algo van a terminar todos como angular.js ojo no el 2 que es el nuevo, el render de el lado server es mas rápido que el del cliente, creo que les falta muchísimo para mejorar, por lo menos hasta que le peguen a tecnologías funcionales y no de prueba como lo son lenguajes del lado del servidor y websockets
para gustos colores esta claro 🙂
Saludos
Interesante.
Me parecería aún mejor si pudieras poner un comparativo para ver ventajas y desventajas a la hora de tirar tecla.
Gracias.
Una de sus ventajas fundamentales es que es independiente , por ejemplo cuando eliges jquery tienes que asumir que tienes todos los temas de DOM y selectores . Si usas por ejemplo tecnologías como React , JQuery sobra y solo necesitas una librería de promesas es ahí donde Axios suma