0Pricing
Vue Academy · Lección

Peticiones HTTP con Axios

Realice peticiones GET y POST a API con Axios

Peticiones HTTP con Axios es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

Comunicarse con las API

La mayoría de las aplicaciones reales cargan datos desde un backend mediante HTTP. Aunque el navegador incluye fetch, muchos proyectos de Vue utilizan Axios, un cliente HTTP basado en promesas muy popular, con una API más sencilla, análisis automático de JSON y potentes opciones de configuración.

Instalar Axios

Añada Axios al proyecto con su gestor de paquetes y, después, impórtelo donde lo necesite.

npm install axios

Importar Axios

Importe la exportación predeterminada para empezar a realizar solicitudes.

import axios from "axios"

Una solicitud GET

Utilice axios.get para obtener datos. Devuelve una promesa que se resuelve en un objeto de respuesta; el cuerpo se encuentra en response.data y ya se ha analizado desde JSON.

axios.get("https://api.example.com/users")
  .then(response => {
    console.log(response.data)
  })

Una solicitud POST

Utilice axios.post para enviar datos. El segundo argumento es el cuerpo de la solicitud, que Axios serializa automáticamente como JSON.

axios.post("https://api.example.com/users", {
  name: "Grace",
  email: "grace@example.com"
})

Usar async/await

Las promesas se leen con mayor claridad mediante async/await. Marque la función como asíncrona y espere la solicitud.

async function loadUsers() {
  const response = await axios.get("/api/users")
  return response.data
}

Dentro de un método de Vue

Un patrón habitual consiste en llamar a Axios desde el método de un componente y almacenar el resultado en datos reactivos.

export default {
  data() {
    return { users: [] }
  },
  methods: {
    async fetchUsers() {
      const res = await axios.get("/api/users")
      this.users = res.data
    }
  }
}

Configuración de la solicitud: parámetros de consulta

Pase un objeto params para añadir parámetros de consulta. Axios construye la URL por usted.

axios.get("/api/users", {
  params: { page: 2, limit: 10 }
})
// requests /api/users?page=2&limit=10

Configuración de la solicitud: encabezados

Envíe encabezados personalizados, como un token de autorización, mediante el objeto de configuración.

axios.get("/api/profile", {
  headers: {
    Authorization: "Bearer " + token
  }
})

Configurar la URL base

Repetir la URL completa en todas partes puede provocar errores. Cree una instancia de Axios con una baseURL y valores predeterminados compartidos, y úsela en toda la aplicación.

import axios from "axios"

export const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
  headers: { "Content-Type": "application/json" }
})

// elsewhere: api.get("/users")

Otros métodos HTTP

Axios refleja los verbos HTTP habituales: get, post, put, patch y delete. Utilice el que corresponda a la acción que desea realizar.

api.put("/users/1", { name: "Updated" })
api.patch("/users/1", { name: "Patched" })
api.delete("/users/1")

Comprobación rápida

Compruebe sus conocimientos sobre las solicitudes de Axios.

Repaso

Axios es un cliente HTTP basado en promesas. Utilice get, post, put, patch y delete, pase params y headers mediante el objeto de configuración y prefiera async/await para mejorar la legibilidad. Una instancia compartida creada mediante axios.create con una baseURL evita repetir código en las solicitudes. A continuación, obtendrá datos en el momento adecuado del ciclo de vida de un componente.

Preguntas frecuentes

¿La lección «Peticiones HTTP con Axios» es gratis?

Sí — el texto completo de «Peticiones HTTP con Axios» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Peticiones HTTP con Axios»?

Realice peticiones GET y POST a API con Axios Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.

¿Cuánto tiempo toma la lección «Peticiones HTTP con Axios»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Peticiones HTTP con Axios
  2. Hooks de ciclo de vida y obtención de datos
  3. Gestión de errores e interceptores globales
← Volver a Vue Academy