Conectar Vue a una API real con Axios

Introducción

Tu frontend puede ser la interfaz más bonita del mundo, pero sin datos es solo un cascarón vacío. Conectarte a una API es el paso que convierte tu app de una demo estática en una herramienta dinámica y útil.

Para esta tarea, Axios es el estándar. Es un cliente HTTP basado en promesas, fácil de usar y con una sintaxis limpia. Hoy te guío paso a paso para que tu app deje de mostrar datos de prueba y empiece a consumir información real.

Configuración inicial: instalación e importación

npm install axios

Ahora puedes importarlo en cualquier componente donde necesites hacer una petición.

Peticiones GET: traer los datos a la mesa

La petición más común es GET, que sirve para obtener datos de un servidor. El lugar ideal para hacerla es el hook onMounted, porque garantiza que el componente está listo para mostrar los datos.

<template>
  <div v-if="isLoading">Cargando publicaciones...</div>
  <div v-if="error">Error: {{ error }}</div>

  <ul v-else-if="posts.length">
    <li v-for="post in posts" :key="post.id">
      <h3 class="font-bold">{{ post.title }}</h3>
      <p>{{ post.body }}</p>
    </li>
  </ul>
  <div v-else>No hay publicaciones.</div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';

const posts = ref([]);
const isLoading = ref(true);
const error = ref(null);

onMounted(async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    posts.value = response.data;
  } catch (err) {
    error.value = err.message;
  } finally {
    isLoading.value = false;
  }
});
</script>

Explicación del código:

Usamos async/await para manejar la petición de forma limpia.
Con estado reactivo (ref) controlamos lo que muestra la interfaz:
- isLoading: muestra un mensaje de «Cargando...» mientras la petición está en curso.
- error: muestra un mensaje de error si la petición falla.
- posts: guarda los datos y los pinta en la interfaz.
El bloque try...catch...finally asegura que el estado de carga siempre se actualice.

Peticiones POST, PUT y DELETE: interactuar con la API

Axios simplifica todas las peticiones HTTP. Algunos ejemplos:

axios.post('/api/posts', newPostData): crea un recurso nuevo.
axios.put('/api/posts/1', updatedPostData): actualiza un recurso existente.
axios.delete('/api/posts/1'): borra un recurso.

const createPost = async (newPost) => {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
    console.log('Publicación creada:', response.data);
  } catch (error) {
    console.error('Error al crear la publicación:', error);
  }
};

Conclusión

Conectar tu frontend a una API es la base de cualquier aplicación moderna. Con Axios, el proceso es tan sencillo que puedes centrarte en lo que de verdad importa: construir la mejor interfaz para tus usuarios. Deja atrás el «lorem ipsum» y empieza a trabajar con datos reales.