0Pricing
Vue Academy · Lektion

HTTP-Anfragen mit Axios

Senden Sie mit Axios GET- und POST-Anfragen an APIs

HTTP-Anfragen mit Axios ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Mit APIs kommunizieren

Die meisten realen Apps laden Daten über HTTP von einem Backend. Der Browser verfügt zwar über das integrierte fetch, viele Vue-Projekte verwenden jedoch Axios, einen beliebten HTTP-Client auf Promise-Basis mit einer benutzerfreundlicheren API, automatischer JSON-Analyse und leistungsfähigen Konfigurationsoptionen.

Axios installieren

Fügen Sie Axios mit Ihrem Paketmanager zu Ihrem Projekt hinzu und importieren Sie es anschließend dort, wo Sie es benötigen.

npm install axios

Axios importieren

Importieren Sie den Default-Export, um Anfragen zu stellen.

import axios from "axios"

Eine GET-Anfrage

Verwenden Sie axios.get, um Daten abzurufen. Die Funktion gibt ein Promise zurück, das zu einem Response-Objekt aufgelöst wird. Der Body befindet sich in response.data und wurde bereits aus JSON geparst.

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

Eine POST-Anfrage

Verwenden Sie axios.post, um Daten zu senden. Das zweite Argument ist der Request-Body, den Axios automatisch in JSON serialisiert.

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

async/await verwenden

Mit async/await lassen sich Promises übersichtlicher lesen. Kennzeichnen Sie die Funktion als async und warten Sie die Anfrage mit await ab.

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

In einer Vue-Methode

Ein häufig verwendetes Muster besteht darin, Axios aus einer Komponenten-Methode aufzurufen und das Ergebnis in reaktiven Daten zu speichern.

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

Anfragekonfiguration: Query-Parameter

Übergeben Sie ein params-Objekt, um Query-Parameter hinzuzufügen. Axios erstellt die URL für Sie.

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

Anfragekonfiguration: Header

Senden Sie benutzerdefinierte Header, etwa ein Autorisierungstoken, über das Konfigurationsobjekt.

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

Konfiguration der Basis-URL

Die vollständige URL überall zu wiederholen, ist fehleranfällig. Erstellen Sie eine Axios-Instanz mit einer baseURL und gemeinsamen Standardwerten und verwenden Sie sie anschließend in Ihrer gesamten App.

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")

Weitere HTTP-Methoden

Axios bildet die gängigen HTTP-Methoden ab: get, post, put, patch und delete. Verwenden Sie die Methode, die zu der gewünschten Aktion passt.

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

Kurzer Test

Testen Sie Ihr Wissen über Axios-Anfragen.

Zusammenfassung

Axios ist ein HTTP-Client auf Promise-Basis. Verwenden Sie get, post, put, patch und delete, übergeben Sie params und headers über das Konfigurationsobjekt und bevorzugen Sie für bessere Lesbarkeit async/await. Eine gemeinsame Instanz über axios.create mit einer baseURL hält Anfragen nach dem DRY-Prinzip. Als Nächstes rufen Sie Daten zum richtigen Zeitpunkt im Lebenszyklus einer Komponente ab.

Häufig gestellte Fragen

Ist die Lektion „HTTP-Anfragen mit Axios“ kostenlos?

Ja — der vollständige Text von „HTTP-Anfragen mit Axios“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „HTTP-Anfragen mit Axios“?

Senden Sie mit Axios GET- und POST-Anfragen an APIs Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.

Wie lange dauert die Lektion „HTTP-Anfragen mit Axios“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. HTTP-Anfragen mit Axios
  2. Lifecycle-Hooks und Datenabruf
  3. Fehlerbehandlung und globale Interceptors
← Zurück zu Vue Academy