Gestire errori e codici di stato
Controlli response.ok e gestisca gli errori.
Gestire errori e codici di stato è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
fetch non rifiuta le risposte con errori HTTP
Un dettaglio insidioso: fetch rifiuta la Promise solo in caso di errori di rete. Una risposta 404 o 500 viene comunque considerata una risoluzione corretta. Deve verificare personalmente lo stato.
Verifica di response.ok
response.ok è true solo per i codici di stato nell'intervallo 200-299. Lo utilizzi per rilevare gli errori HTTP.
const response = await fetch(url);
if (!response.ok) {
console.log("HTTP error:", response.status);
}Lettura del codice di stato
response.status restituisce il codice numerico, mentre response.statusText restituisce un breve messaggio. Utilizzi questi valori per gestire casi specifici.
if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");Generazione di un errore per gli stati non validi
Un approccio ordinato consiste nel generare un Error quando la risposta non è valida, così un unico catch può gestire sia gli errori di rete sia quelli HTTP.
if (!response.ok) {
throw new Error("Request failed: " + response.status);
}Racchiudere il codice in try/catch
Con async/await, racchiuda l'intero flusso in try/catch. Gli errori di rete rifiutano la Promise e finiscono in catch; lo stesso accade per l'errore HTTP generato da Lei.
try {
const res = await fetch(url);
if (!res.ok) throw new Error("Status " + res.status);
const data = await res.json();
} catch (err) {
console.log("Failed:", err.message);
}Distinzione tra tipi di errore
Un fetch rifiutato di solito indica che il server non era raggiungibile, che la risoluzione DNS non è riuscita oppure che CORS lo ha bloccato. Una risposta non valida indica invece che il server ha risposto, ma con un errore. Quando necessario, li gestisca in modo diverso.
Lettura dei corpi delle risposte di errore
Spesso le API restituiscono JSON con i dettagli dell'errore. Lo legga prima di generare l'errore, così potrà mostrare un messaggio utile.
if (!res.ok) {
const errBody = await res.json().catch(() => ({}));
throw new Error(errBody.message || ("Status " + res.status));
}Codici di stato comuni
Conosca le varie famiglie: 2xx indica successo, 3xx reindirizzamento, 4xx errore del client (ha inviato qualcosa di errato), 5xx errore del server (la responsabilità è del server). Fetch segue automaticamente la maggior parte dei reindirizzamenti.
Un helper riutilizzabile
Centralizzi il controllo in un unico helper, così ogni punto da cui effettua una chiamata utilizzerà una gestione coerente degli errori.
async function getJSON(url) {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
return res.json();
}Nuovi tentativi per errori temporanei
In caso di reti instabili, può riprovare per gli errori 5xx o di rete. Mantenga limitato il numero di tentativi e aggiunga un intervallo di attesa per evitare di sovraccaricare il server.
for (let i = 0; i < 3; i++) {
try { return await getJSON(url); }
catch (e) { if (i === 2) throw e; }
}Mostrare gli errori all'utente
Gestisca gli errori a livello dell'interfaccia per mostrare un messaggio chiaro invece di una schermata vuota. Non lasci mai che un rifiuto non gestito nasconda silenziosamente una richiesta non riuscita.
getJSON(url)
.then(render)
.catch(() => showToast("Could not load data"));Verifica rapida
Gestione degli errori di fetch.
Riepilogo
Fetch rifiuta la Promise solo in caso di errori di rete, quindi verifichi sempre response.ok/response.status e generi un errore per gli stati non validi. Racchiuda le chiamate in try/catch, legga i corpi delle risposte di errore per ottenere i messaggi, centralizzi il controllo in un helper e mostri errori chiari nell'interfaccia.
Domande Frequenti
La lezione «Gestire errori e codici di stato» è gratuita?
Sì — il testo completo di «Gestire errori e codici di stato» è 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Gestire errori e codici di stato»?
Controlli response.ok e gestisca gli errori. Eserciti JavaScript 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 JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript 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 3 di 4.
Quanto tempo richiede la lezione «Gestire errori e codici di stato»?
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 JavaScript Academy?
Sì. Ogni lezione JavaScript 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
- Effettuare richieste GET
- POST e invio dei dati
- Gestire errori e codici di stato
- Interrompere le richieste con AbortController