Vue Academy · Lektion

HTTP-förfrågningar med Axios

Skicka GET- och POST-förfrågningar till API:er med Axios.

Lektion 1 av 313 steg

HTTP-förfrågningar med Axios är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 3 lektioner.

Kommunicera med API:er

De flesta riktiga appar hämtar data från en backend via HTTP. Webbläsaren har visserligen den inbyggda funktionen fetch, men många Vue-projekt använder Axios, en populär promise-baserad HTTP-klient med ett enklare API, automatisk JSON-tolkning och kraftfulla konfigurationsalternativ.

Installera Axios

Lägg till Axios i projektet med din pakethanterare och importera det sedan där du behöver det.

npm install axios

Importera Axios

Importera standardexporten för att börja göra anrop.

import axios from "axios"

Ett GET-anrop

Använd axios.get för att hämta data. Funktionen returnerar ett promise som löser sig till ett response-objekt. Själva innehållet finns i response.data och har redan tolkats från JSON.

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

Ett POST-anrop

Använd axios.post för att skicka data. Det andra argumentet är request-body:n, som Axios automatiskt serialiserar till JSON.

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

Använda async/await

Promises blir lättare att läsa med async/await. Markera funktionen som async och invänta anropet med await.

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

I en Vue-metod

Ett vanligt mönster är att anropa Axios från en komponentmetod och spara resultatet i reaktiv data.

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

Request-konfiguration: query-parametrar

Skicka med ett params-objekt för att lägga till parametrar i query string. Axios bygger URL:en åt dig.

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

Request-konfiguration: headers

Skicka anpassade headers, till exempel en auktoriseringstoken, via konfigurationsobjektet.

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

Konfigurera base URL

Det är lätt att göra fel om du upprepar hela URL:en överallt. Skapa en Axios-instans med en baseURL och gemensamma standardvärden, och använd sedan instansen i hela appen.

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

Andra HTTP-metoder

Axios har stöd för de vanligaste HTTP-metoderna: get, post, put, patch och delete. Använd den som motsvarar den åtgärd du vill utföra.

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

Snabbtest

Testa dina kunskaper om Axios-anrop.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Axios är en promise-baserad HTTP-klient. Använd get, post, put, patch och delete, skicka med params och headers via konfigurationsobjektet och föredra async/await för bättre läsbarhet. En gemensam instans som skapas med axios.create och har en baseURL håller anropen DRY. Nu ska du hämta data vid rätt tidpunkt i komponentens livscykel.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”HTTP-förfrågningar med Axios” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”HTTP-förfrågningar med Axios”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”HTTP-förfrågningar med Axios”?

Skicka GET- och POST-förfrågningar till API:er med Axios. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.

Hur lång tid tar lektionen ”HTTP-förfrågningar med Axios”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Vue Academy