Vue Academy · Lezione

Richieste HTTP con Axios

Esegua richieste GET e POST alle API con Axios.

Richieste HTTP con Axios è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Comunicazione con le API

La maggior parte delle app reali carica i dati da un backend tramite HTTP. Sebbene il browser disponga di un fetch integrato, molti progetti Vue usano Axios, un client HTTP basato sulle promise e molto diffuso, con un'API più intuitiva, il parsing automatico del JSON e potenti opzioni di configurazione.

Installazione di Axios

Aggiunga Axios al progetto con il gestore dei pacchetti, quindi lo importi dove serve.

npm install axios

Importazione di Axios

Importi l'export predefinito per iniziare a effettuare richieste.

import axios from "axios"

Una richiesta GET

Usi axios.get per recuperare i dati. Restituisce una promise che si risolve in un oggetto response; il corpo si trova in response.data, già convertito da JSON.

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

Una richiesta POST

Usi axios.post per inviare dati. Il secondo argomento è il corpo della richiesta, che Axios serializza automaticamente in JSON.

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

Uso di async/await

Le promise risultano più leggibili con async/await. Contrassegni la funzione come async e attenda la richiesta con await.

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

All'interno di un metodo Vue

Un approccio comune consiste nel chiamare Axios dal metodo di un componente e memorizzare il risultato nei dati reattivi.

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

Configurazione della richiesta: parametri di query

Passi un oggetto params per aggiungere i parametri della query string. Axios costruisce l'URL per Lei.

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

Configurazione della richiesta: intestazioni

Invii intestazioni personalizzate, ad esempio un token di autorizzazione, tramite l'oggetto di configurazione.

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

Configurazione dell'URL di base

Ripetere l'URL completo in ogni punto espone a errori. Crei un'istanza Axios con un baseURL e impostazioni predefinite condivise, quindi la utilizzi in tutta l'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")

Altri metodi HTTP

Axios riproduce i verbi HTTP più comuni: get, post, put, patch e delete. Usi quello che corrisponde all'operazione da eseguire.

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

Verifica rapida

Verifichi la Sua conoscenza delle richieste Axios.

Riepilogo

Axios è un client HTTP basato sulle promise. Usi get, post, put, patch e delete, passi params e headers tramite l'oggetto di configurazione e preferisca async/await per una maggiore leggibilità. Un'istanza condivisa creata con axios.create e dotata di baseURL evita ripetizioni nelle richieste. Ora recupererà i dati nel momento appropriato del ciclo di vita di un componente.

Domande Frequenti

La lezione «Richieste HTTP con Axios» è gratuita?

Sì — il testo completo di «Richieste HTTP con Axios» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Richieste HTTP con Axios»?

Esegua richieste GET e POST alle API con Axios. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.

Quanto tempo richiede la lezione «Richieste HTTP con Axios»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Richieste HTTP con Axios
Hook del ciclo di vita e recupero dei dati
Gestione degli errori e interceptor globali

← Torna a Vue Academy