Håndtering af fejl og statuskoder
Kontrollér response.ok, og håndtér fejl.
Håndtering af fejl og statuskoder er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.
fetch afviser ikke ved HTTP-fejl
En overraskende faldgrube: fetch afviser kun ved netværksfejl. Et svar med status 404 eller 500 bliver stadig fuldført uden fejl. Du skal selv kontrollere status.
Kontrollere response.ok
response.ok er kun true for statuskoder i intervallet 200-299. Brug den til at registrere HTTP-fejl.
const response = await fetch(url);
if (!response.ok) {
console.log("HTTP error:", response.status);
}Læse statuskoden
response.status giver den numeriske kode, og response.statusText giver en kort besked. Brug disse værdier til at håndtere bestemte tilfælde.
if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");Kaste ved dårlig status
Et enkelt mønster er at kaste en Error, når svaret ikke er ok, så én enkelt catch håndterer både netværksfejl og HTTP-fejl.
if (!response.ok) {
throw new Error("Request failed: " + response.status);
}Indpakning i try/catch
Med async/await skal du indpakke hele forløbet i try/catch. Netværksfejl afviser Promise og havner i catch; det gør din kastede HTTP-fejl også.
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);
}Skelne mellem fejltyper
Et afvist fetch-kald betyder normalt, at serveren ikke kunne nås, at DNS mislykkedes, eller at CORS blokerede kaldet. Et ikke-ok-svar betyder, at serveren svarede, men med en fejl. Håndter dem forskelligt, når det er relevant.
Læse fejlindhold
API'er returnerer ofte JSON, der beskriver fejlen. Læs det, før du kaster fejlen, så du kan vise en nyttig besked.
if (!res.ok) {
const errBody = await res.json().catch(() => ({}));
throw new Error(errBody.message || ("Status " + res.status));
}Almindelige statuskoder
Kend grupperne: 2xx betyder succes, 3xx omdirigering, 4xx klientfejl (du har sendt noget forkert), og 5xx serverfejl (det er deres fejl). Fetch følger automatisk de fleste omdirigeringer.
En genanvendelig hjælpefunktion
Saml kontrollen i én hjælpefunktion, så alle kaldesteder får ensartet fejlhåndtering.
async function getJSON(url) {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
return res.json();
}Forsøge igen ved midlertidige fejl
Ved ustabile netværk kan du forsøge igen ved 5xx-fejl eller netværksfejl. Begræns antallet af forsøg, og tilføj en forsinkelse, så du ikke overbelaster serveren.
for (let i = 0; i < 3; i++) {
try { return await getJSON(url); }
catch (e) { if (i === 2) throw e; }
}Vise fejlen for brugeren
Fang fejl i brugergrænselaget, så du kan vise en venlig besked i stedet for en tom skærm. Lad aldrig en uhåndteret afvisning skjule et mislykket anmodning uden forklaring.
getJSON(url)
.then(render)
.catch(() => showToast("Could not load data"));Hurtigt tjek
Fejlhåndtering med fetch.
Opsummering
Fetch afviser kun ved netværksfejl, så kontrollér altid response.ok/response.status, og kast ved dårlige statuskoder. Indpak kald i try/catch, læs fejlindhold for at få beskeder, saml kontrollen i en hjælpefunktion, og vis venlige fejl i brugergrænsefladen.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “Håndtering af fejl og statuskoder” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Håndtering af fejl og statuskoder”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Håndtering af fejl og statuskoder”?
Kontrollér response.ok, og håndtér fejl. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Håndtering af fejl og statuskoder”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Oprettelse af GET-forespørgsler
- POST og afsendelse af data
- Håndtering af fejl og statuskoder
- Annullering af forespørgsler med AbortController