Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Usar Axios en Vue JS 3

Como Usar Axios en Vue JS 3

Como Usar Axios en Vue JS 3

Hace más de un año hasta la fecha de este artículo, el equipo de Vue anuncio que el 7 de febrero de 2022, Vue 3 pasaría a ser la versión predeterminada. Luego de ello muchos desarrolladores han tenido dudas y es normal, yo también las he tenido, y nos hemos preguntado acerca de como funciona Vue 3, que métodos de la versión 2 ya no funcionarán en la 3, que nuevos métodos trae, cual será la nueva sintaxis y forma de trabajar en un archivo de Vue, etc. Otra de las dudas también ha sido, como se usa Axios en Vue 3. Para ayudar a despejar esta última duda he decidido enseñarte en este tutorial a Como Usar Axios en Vue JS 3, vamos con ello.

Axios permite consumir los datos de manera más óptima en Vue JS

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”“Aplicación Móvil Nativa vs Hibrida ¿Cual es Mejor?” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Usar Axios en Vue JS 3.

Como Usar Axios en Vue JS 3.

Para comenzar desde 0 y aprender bien a hacerlo, vamos a empezar creando un nuevo proyecto y luego seguimos los pasos correspondientes.

Crear Nuevo Proyecto en Vue 3

Voy a usar Vite JS para crear el proyecto, entonces ejecuto el siguiente comando para crearlo y en el proceso le pongo el nombre axios-vuejs3 al proyecto (tu le puedes poner el nombre que desees), asimismo eligo el framework Vue y la variante JavaScript:

Instalación de Axios en Vue 3

Debemos ingresar al directorio del proyecto creado, en mi caso ingreso al directorio axios-vuejs3 y dentro de el vamos a instalar Axios ejecutando el siguiente comando:

Usando Axios en Vue 3

Cuando creamos nuestro proyecto con Vue 3, este nos creo un archivo llamado App.vue que se encuentra en axios-vuejs3 > src > App.vue:


Abro el archivo App.vue y dentro de las etiquetas <script></script> importamos Axios y hacemos uso de él, para llamar a los datos de la API v1 de Nube Colectiva:


Todo el código del archivo App.vue se vería así:


No haremos uso de la vista HTML, sino usaremos la consola del navegador, por ejemplo si abrimos la consola en el navegador Google Chrome, podemos ver que los datos se están llamando correctamente con Axios en Vue 3:

Mediante Axios se puede solicitar y enviar datos en Vue 3

Con ello entonces hemos configurado y usado Axios en Vue JS 3 sin problemas. Una vez que obtienes los datos, puedes decidir hacer algo con ellos, por ejemplo mostrarlos en la vista HTML, para que los usuarios los vean.

Conclusión

En este tutorial has aprendido a Como Usar Axios en Vue JS 3, saber hacer esto te servirá para poder consumir datos de cualquier API REST que sea compatible. Para dominar esta herramienta es importante que práctiques mucho, como se dice la práctica hace al maestro.

Nota(s)

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil