Axios es un cliente HTTP basado en promesas que funciona tanto en el cliente (navegador) como en el servidor (por ejemplo, Node.js). Muchos frameworks tienen sus propias APIs HTTP integradas, sin embargo, muchas veces usar dichas APIs no es lo más ideal ya que esta función puede ser cubierta de forma más eficiente por librerías de terceros, como Axios. Es muy simple utilizar Axios ya sea sólo o con algún framework y en este tutorial aprenderemos a hacerlo.
Instalación
Lo primero que tenemos que hacer es instalar Axios en nuestro proyecto. Desde la terminal ejecutamos:
npm install axios --save
Para efectos de este tutorial estaremos usando Axios junto con Vue.js, sin embargo, la sintaxis y métodos de Axios son los mismos para integrarse en prácticamente cualquier proyecto. Es por ello que aunque no estés utilizando Vue.js los ejemplos te servirán para obtener una idea del funcionamiento de esta librería.
Si no estás utilizando npm puedes incluirlo directamente desde el CDN agregando la siguiente etiqueta a tu HTML:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Primeros pasos
Luego de instalar Axios en nuestro proyecto debemos importarlo:
import axios from 'axios';
export default {
// ...
}
Si estás incluyendo Axios desde el CDN, ya sea que estés utilizando Vue.js o no, no necesitas utilizar el import.
Hecho esto, podemos utilizar Axios en nuestro proyecto. Vamos a comenzar realizando una sencilla solicitud GET:
axios.get(url)
.then(response => {
// Obtenemos los datos
})
.catch(e => {
// Capturamos los errores
})
Para realizar una solicitud GET llamamos al método get de Axios, pasando como parámetro la URL que deseamos solicitar. Luego de esto llamamos a los métodos then y catch, que se encargan de capturar la respuesta del servidor así como los errores, en caso de que llegue a ocurrir alguno.
Supongamos que en la URL users tenemos un listado de usuarios que queremos obtener y almacenar dentro de un arreglo que previamente declaramos en data:
axios.get('/users')
.then(response => {
this.users = response.data;
})
.catch(e => {
// Podemos mostrar los errores en la consola
console.log(e);
})
Observa cómo obtenemos los datos de la respuesta con response.data. También podemos pasar parámetros a la solicitud. Supongamos que queremos obtener un usuario con un nombre en especifico:
axios.get('/users', {
params: {
name: 'Sherlock'
}
})
}).then(response => {
this.user = response.data;
}).catch(e => {
console.log(e);
})
Los parámetros GET también pueden ser pasados directamente desde la URL:
axios.get('/users?name=Sherlock', {
// ...
});
O puedes asignar un objeto con los parámetros:
// Objeto con los datos
userInfo = {
name: 'Sherlock',
enemy: 'Moriarty'
}
// Solicitud GET
axios.get('/users', {
// Asignamos el valor de userInfo a params
params: userInfo
})
}).then(response => {
this.user = response.data;
}).catch(e => {
console.log(e);
})
Con Axios también podemos realizar solicitudes de tipo POST. Para ello, debemos usar el método post, pasando la URL y los datos que deseamos enviar al servidor. Supongamos que tenemos un método llamado sendUserData desde donde enviamos los datos de los usuarios:
methods: {
sendUserData: function () {
axios.post('/users', {
name: 'Moriarty',
enemy: 'Sherlock'
}).then(response => {
// Respuesta del servidor
}).catch(e => {
console.log(e);
});
}
}
Observa cómo de segundo parámetro en el método post pasamos un objeto con los datos que deseamos enviar al servidor.
Axios soporta múltiples métodos para realizar diferentes solicitudes:
axios.request()axios.get()axios.delete()axios.post()axios.put()
En este tutorial básico de Axios aprendimos a realizar solicitudes HTTP de tipo GET y POST desde una aplicación en Vue.js. En futuros tutoriales aprenderemos a realizar solicitudes más complejas así como también nos adentraremos en la configuración avanzada de la librería.
Material relacionado
- Curso de Vue 2
- Curso de Testing con Vue.js 2
- Creación de un feature con Laravel y Vue.js
- Documentación de Axios (en inglés)
No olvides seguirnos en Twitter y suscribirte a nuestro boletín:
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
