Hantera fel och statuskoder
Kontrollera response.ok och hantera misslyckanden.
Hantera fel och statuskoder är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. 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 JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Fetch avvisar inte vid HTTP-fel
En överraskande fallgrop: fetch avvisas bara vid nätverksfel. Ett svar med status 404 eller 500 slutförs fortfarande utan fel. Statusen måste kontrolleras manuellt.
Kontrollera response.ok
response.ok är true endast för statuskoder i intervallet 200–299. Använd det för att upptäcka HTTP-fel.
const response = await fetch(url);
if (!response.ok) {
console.log("HTTP error:", response.status);
}Läs statuskoden
response.status ger den numeriska koden och response.statusText ett kort meddelande. Använd dessa för att hantera specifika fall.
if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");Kasta fel vid felaktig status
Ett tydligt mönster är att kasta ett Error när svaret inte är ok, så att en enda catch kan hantera både nätverksfel och HTTP-fel.
if (!response.ok) {
throw new Error("Request failed: " + response.status);
}Omslut med try/catch
Med async/await omsluter du hela flödet med try/catch. Nätverksfel avvisar Promisen och hamnar i catch; det gör även ditt kastade HTTP-fel.
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);
}Skilj mellan feltyper
En avvisad fetch-begäran innebär vanligtvis att servern inte kunde nås, DNS-uppslagningen misslyckades eller att CORS blockerade den. Ett svar som inte är ok innebär att servern svarade, men med ett fel. Hantera dem olika när det är viktigt.
Läs felinnehåll
API:er returnerar ofta JSON som beskriver felet. Läs det innan felet kastas, så att ett användbart meddelande kan visas.
if (!res.ok) {
const errBody = await res.json().catch(() => ({}));
throw new Error(errBody.message || ("Status " + res.status));
}Vanliga statuskoder
Lär dig statuskodsfamiljerna: 2xx lyckat, 3xx omdirigering, 4xx klientfel (klienten skickade något fel), 5xx serverfel (serverns fel). Fetch följer automatiskt de flesta omdirigeringar.
En återanvändbar hjälpfunktion
Samla kontrollen i en hjälpfunktion, så att alla anropsställen får enhetlig felhantering.
async function getJSON(url) {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
return res.json();
}Försök igen vid tillfälliga fel
Vid instabila nätverk kan du försöka igen vid 5xx-fel eller nätverksfel. Håll antalet försök lågt och lägg till en fördröjning för att undvika att överbelasta servern.
for (let i = 0; i < 3; i++) {
try { return await getJSON(url); }
catch (e) { if (i === 2) throw e; }
}Visa felet för användaren
Fånga fel på UI-nivå för att visa ett vänligt meddelande i stället för en tom skärm. Låt aldrig en ohanterad avvisning göra att en misslyckad begäran försvinner i tysthet.
getJSON(url)
.then(render)
.catch(() => showToast("Could not load data"));Snabbkontroll
Felhantering med Fetch.
Sammanfattning
Fetch avvisas bara vid nätverksfel, så kontrollera alltid response.ok/response.status och kasta fel vid felaktiga statusar. Omslut anrop med try/catch, läs felinnehåll för att få meddelanden, samla kontrollen i en hjälpfunktion och visa vänliga fel i gränssnittet.
Lär dig JavaScript 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
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Hantera fel och statuskoder” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Hantera fel och statuskoder”, 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 JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Hantera fel och statuskoder”?
Kontrollera response.ok och hantera misslyckanden. Ni övar på JavaScript 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 JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript 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 3 av 4.
Hur lång tid tar lektionen ”Hantera fel och statuskoder”?
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 JavaScript Academy-lektionen?
Ja. Varje JavaScript 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
- Skapa GET-begäranden
- POST och att skicka data
- Hantera fel och statuskoder
- Avbryta begäranden med AbortController