Como Hacer Un Get con Axios en Vue 3

Nube Colectiva

hace 9 meses

En esta página:

Demo Github

Hacer una solicitud GET usando la herramienta Axios con el framework Vue 3 es muy sencillo.

Solo necesitas seguir los pasos adecuados para lograr hacerlo y no tener contratiempos.

En este tutorial aprenderás a Como Hacer Un Get con Axios en Vue 3, vamos con ello.

Axios es una potente Promise de JavaScript que permite hacer solicitudes HTTP al servidor

Vamos hacer uso de la Dog API, la cual te brinda imágenes aleatorias de perros, tu puedes usar la API que desees.

Mediante el siguiente código puedes hacer una petición GET con Axios en Vue 3 (He colocado comentarios para explicar que hace cada línea o bloque de código):


<template>  

  <!-- Contenedor para la imagen -->
  <img v-bind:src="img" class="img-fluid">

</template>

<script setup>
  
  // Importamos axios 
  import axios from 'axios';

  // Importamos 'ref' de Vue 3
  import {ref} from "vue"
  
  // Hacemos la variable 'img' reactiva 
  const img = ref(null)
  
  // Hacemos una petición a la Dog API 
  axios.get('https://dog.ceo/api/breeds/image/random')
    .then(function (response) {

      // Mostramos los datos obtenidos en la consola 
      console.log(response);

      // Accedemos a una imagen aleatoria de un perro 
      img.value = response.data.message;
      
      // Mostramos la imagen aleatoria obtenida de un perro en la consola 
      console.log(img);
  
    })
    .catch(function (error) {
  
      // Si hubo algun error mostramos algo 
      console.log(error);
  
    })
    .finally(function () {
  
      // Se ejecuto sin problemas 
      
    });
 
</script>

<style>
  /* */
</style>

</template>

// Importamos axios

import axios from 'axios';

// Importamos 'ref' de Vue 3

import {ref} from "vue"

// Hacemos la variable 'img' reactiva

const img = ref(null)

// Hacemos una petición a la Dog API

axios.get('https://dog.ceo/api/breeds/image/random')

.then(function (response) {

// Mostramos los datos obtenidos en la consola

console.log(response);

// Accedemos a una imagen aleatoria de un perro

img.value = response.data.message;

// Mostramos la imagen aleatoria obtenida de un perro en la consola

console.log(img);

})

.catch(function (error) {

// Si hubo algun error mostramos algo

console.log(error);

})

.finally(function () {

// Se ejecuto sin problemas

});

</script>

<style>

/* */

</style>

Si vamos al navegador podemos ver que obtenemos una imagen aleatorio de la Dog API:

Hay algunas APIs que te solicitan pasar una API KEY para poder acceder a sus datos

Así de fácil puedes hacer un Get con Axios en Vue 3.

Al inicio de este tutorial he colocado una Demo para que veas el proyecto en acción y también un enlace a un repositorio de GitHub con el código del proyecto.

Conoce el Esquema de Respuesta de Una Solicitud de Axios.

Conclusión

En este tutorial has aprendido a Como Hacer Un Get con Axios en Vue 3.

En el futuro aparecerán nuevas versiones de Axios y Vue, esperemos que la forma de hacer un GET se mantenga.

Practica mucho, solo así seras mejor programador.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

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