0Pricing
Frontend Academy · Lezione

Fetch API: GET, POST, PUT e DELETE

Effettuare richieste GET con fetch, inviare corpi JSON nelle richieste POST e PUT e chiamare gli endpoint DELETE per rimuovere le risorse.

Fetch API: GET, POST, PUT e DELETE è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

L'API Fetch

fetch() è l'API moderna del browser per le richieste HTTP. Restituisce una Promise che si risolve in un oggetto Response. È inclusa in tutti i browser moderni e in Node.js 18+.

Richiesta GET di base

La richiesta fetch più semplice: passi un URL, attenda la risposta e analizzi il JSON.

async function fetchUsers() {
  const res = await fetch('https://api.example.com/users');
  if (!res.ok) throw new Error('HTTP ' + res.status);
  const users = await res.json();
  return users;
}

POST con corpo JSON

Utilizzi method, headers e body. Il corpo deve essere una stringa: chiami JSON.stringify() sull'oggetto.

async function createUser(user) {
  const res = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user)
  });
  if (!res.ok) throw new Error('Failed: ' + res.status);
  return res.json();
}

createUser({ name: 'Alice', email: 'alice@example.com' });

PUT per un aggiornamento completo

PUT sostituisce la risorsa. Invii l'intero oggetto: i campi omessi vengono solitamente cancellati dal server.

await fetch(`/api/users/${id}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    id, name: 'Alice', email: 'alice@example.com', role: 'admin'
  })
});

PATCH per un aggiornamento parziale

PATCH aggiorna solo i campi inviati. Lo utilizzi per gli aggiornamenti parziali invece di PUT.

await fetch(`/api/users/${id}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'new@example.com' })
});

Richiesta DELETE

DELETE in genere non ha un corpo. Spesso la risposta restituisce 204 No Content senza corpo.

async function deleteUser(id) {
  const res = await fetch(`/api/users/${id}`, { method: 'DELETE' });
  if (!res.ok) throw new Error('Delete failed');
  // 204 No Content — no JSON to parse
}

Header di autenticazione

Aggiunga un header Authorization agli endpoint protetti.

const res = await fetch('/api/me', {
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
});

Parametri di query nell'URL

Costruisca le stringhe di query con URLSearchParams per una codifica sicura.

const params = new URLSearchParams({
  q: 'react hooks',
  page: '2',
  pageSize: '20'
});

const res = await fetch(`/api/search?${params}`);
// /api/search?q=react+hooks&page=2&pageSize=20

Perché fetch non genera errori per gli errori HTTP

fetch rifiuta la Promise solo in caso di errore di rete: una risposta 404 o 500 viene comunque considerata completata con successo. Controlli sempre res.ok (true per i codici 2xx) o res.status e generi manualmente l'errore.

const res = await fetch('/api/users/999');
if (!res.ok) {
  // res.ok is false for 4xx and 5xx
  throw new Error(`Server error ${res.status}: ${await res.text()}`);
}

AbortController per l'annullamento

Annulli una richiesta in corso per evitare risultati obsoleti: è essenziale per la ricerca typeahead e per la pulizia degli effetti in React.

const controller = new AbortController();

fetch('/api/search?q=hooks', { signal: controller.signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name !== 'AbortError') throw err;
  });

// Cancel:
controller.abort();

Invio di FormData

Per il caricamento di file o i moduli multipart, passi un oggetto FormData come corpo. Non imposti Content-Type: il browser lo aggiunge con il boundary corretto.

const form = new FormData();
form.append('avatar', fileInput.files[0]);
form.append('name', 'Alice');

await fetch('/api/upload', { method: 'POST', body: form });
// no Content-Type header — browser sets multipart/form-data

Controllo rapido

Perché fetch() non genera un errore quando il server restituisce 404 o 500?

Riepilogo: Fetch API

fetch() restituisce una Promise contenente Response. Metodi: GET (predefinito), POST, PUT, PATCH, DELETE. I corpi JSON richiedono JSON.stringify() e l'header Content-Type. fetch rifiuta la Promise solo in caso di errore di rete: controlli manualmente res.ok. Utilizzi URLSearchParams per le stringhe di query, AbortController per l'annullamento e FormData per il caricamento di file (non imposti Content-Type: se ne occupa il browser).

Domande Frequenti

La lezione «Fetch API: GET, POST, PUT e DELETE» è gratuita?

Sì — il testo completo di «Fetch API: GET, POST, PUT e DELETE» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Fetch API: GET, POST, PUT e DELETE»?

Effettuare richieste GET con fetch, inviare corpi JSON nelle richieste POST e PUT e chiamare gli endpoint DELETE per rimuovere le risorse. Eserciti Frontend 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 Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend 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 4.

Quanto tempo richiede la lezione «Fetch API: GET, POST, PUT e DELETE»?

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 Frontend Academy?

Sì. Ogni lezione Frontend 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

  1. Fetch API: GET, POST, PUT e DELETE
  2. Axios: interceptor e URL di base
  3. Gestione degli errori: codici di stato HTTP
  4. SWR e React Query per la memorizzazione nella cache dei dati
← Torna a Frontend Academy