Comparte en Facebook Twitter Google+

Solicitudes HTTP con Axios

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:

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:

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:

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:

Los parámetros GET también pueden ser pasados directamente desde la URL:

O puedes asignar un objeto con los parámetros:

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:

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.

Aprende más sobre Vue.js con nuestro libro La Elegancia de Vue 2 disponible en Leanpub

Leer más

Material relacionado

No olvides seguirnos en Twitter y suscribirte a nuestro boletín:

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Aprende desarrollo web con Laravel, Vue.js y mucho más a partir de 9 USD al mes: ver planes.