Vuejs: Interacción HTTP con APIs de backend

En Vue 3.5, la interacción HTTP con APIs de backend es fundamental para desarrollar aplicaciones web dinámicas y eficientes. En este módulo, aprenderás a utilizar las capacidades de Vue 3.5 para realizar peticiones HTTP y manejar respuestas de APIs de backend.

Instalación de Axios

Para interactuar con APIs de backend, utilizaremos Axios, una biblioteca popular para realizar peticiones HTTP. Primero, instala Axios en tu proyecto Vue 3.5:

npm install axios

Configuración inicial de Axios

Después de instalar Axios, es importante configurarlo correctamente. Puedes hacerlo en un archivo de configuración, por ejemplo, src/axios.js:

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.ejemplo.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default instance;

Realizar una petición GET

Para realizar una petición GET, puedes utilizar el método get de Axios dentro de un componente Vue. Aquí tienes un ejemplo sencillo:

<template>
  <div>
    <h1>Datos del usuario</h1>
    <p v-if="error">{{ error }}</p>
    <p v-else>{{ userData }}</p>
  </div>
</template>

<script>
import axios from '../axios';

export default {
  data() {
    return {
      userData: null,
      error: null
    };
  },
  async created() {
    try {
      const response = await axios.get('/usuario/1');
      this.userData = response.data;
    } catch (error) {
      this.error = 'Error al obtener los datos del usuario';
    }
  }
};
</script>

Enviar datos con una petición POST

Para enviar datos a una API de backend, utiliza el método post de Axios. Aquí tienes un ejemplo de cómo enviar datos de un formulario:

<template>
  <div>
    <h1>Enviar datos del usuario</h1>
    <form @submit.prevent="submitForm">
      <input v-model="user.name" placeholder="Nombre" />
      <input v-model="user.email" placeholder="Email" />
      <button type="submit">Enviar</button>
    </form>
    <p v-if="error">{{ error }}</p>
    <p v-else>{{ successMessage }}</p>
  </div>
</template>

<script>
import axios from '../axios';

export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      },
      successMessage: null,
      error: null
    };
  },
  methods: {
    async submitForm() {
      try {
        const response = await axios.post('/usuario', this.user);
        this.successMessage = 'Datos enviados correctamente';
      } catch (error) {
        this.error = 'Error al enviar los datos';
      }
    }
  }
};
</script>

Manejo de errores

El manejo de errores es crucial cuando se interactúa con APIs de backend. Axios proporciona varios métodos para capturar y manejar errores. Aquí tienes un ejemplo:

<template>
  <div>
    <h1>Datos del usuario con manejo de errores</h1>
    <p v-if="error">{{ error }}</p>
    <p v-else>{{ userData }}</p>
  </div>
</template>

<script>
import axios from '../axios';

export default {
  data() {
    return {
      userData: null,
      error: null
    };
  },
  async created() {
    try {
      const response = await axios.get('/usuario/1');
      this.userData = response.data;
    } catch (error) {
      if (error.response) {
        // El servidor respondió con un código de estado fuera del rango 2xx
        this.error = `Error del servidor: ${error.response.status}`;
      } else if (error.request) {
        // La petición fue hecha pero no se recibió respuesta
        this.error = 'No se recibió respuesta del servidor';
      } else {
        // Algo pasó al configurar la petición
        this.error = 'Error al configurar la petición';
      }
    }
  }
};
</script>

Con estas técnicas, puedes manejar la interacción HTTP con APIs de backend de manera efectiva en tus aplicaciones Vue 3.5.