Fejlhåndtering i JavaScript

Denne artikel forklarer fejlhåndtering i JavaScript.

YouTube Video

Fejlhåndtering i JavaScript

Fejlhåndtering i JavaScript er en vigtig funktion til at opfange og håndtere fejl korrekt, når et program støder på uventede problemer. Primært er det almindeligt at bruge try...catch syntaksen til at opfange og håndtere fejl. Derudover, når man arbejder med Promises eller asynkrone operationer, kan fejlhåndtering også udføres ved hjælp af async/await eller Promise.prototype.catch.

try...catch syntaks

try...catch bruges til at opfange og håndtere fejl, når de opstår i en kodeblok.

 1try {
 2    // Code that may throw an error
 3    let result = riskyFunction();
 4    console.log(result);
 5} catch (error) {
 6    // Catch and handle the error
 7    console.error("An error occurred:", error.message);
 8} finally {
 9    // Code that will always execute
10    console.log("Error handling has completed.");
11}

• Hvis en fejl opstår inden for en try blok, afbrydes udførelsen af programmet, og catch blokken udføres.
• finally blokken udføres altid, uanset om der er en fejl eller ej. Den er nyttig til at frigive ressourcer og udføre den endelige behandling, blandt andet.

Udsmidning af fejl (throw)

I JavaScript kan du udløse en fejl eksplicit ved hjælp af nøgleordet throw. Det bruges til at udløse tilpassede fejlmeddelelser eller tilpassede fejl.

 1function checkAge(age) {
 2    if (age < 18) {
 3        throw new Error("You are under 18 years old.");
 4    }
 5    return "Age verification completed.";
 6}
 7
 8try {
 9    let result = checkAge(15);
10    console.log(result);
11} catch (error) {
12    console.error(error.message);  // Displays "You are under 18 years old."
13}

Fejlhåndtering i asynkrone operationer (Promise og async/await)

Når du udfører asynkrone operationer, er fejlhåndtering lidt anderledes. Når du bruger Promises, opfanges fejl med metoden catch.

1let promise = new Promise((resolve, reject) => {
2    // Asynchronous operation
3    setTimeout(() => reject(new Error("An issue has occurred!")), 1000);
4});
5
6promise
7    .then(result => console.log(result))
8    .catch(error => console.error(error.message));  // Displays "An issue has occurred!"

Når du udfører asynkrone operationer med async/await, kan du håndtere fejl med try...catch.

 1async function fetchData() {
 2    try {
 3        let response = await fetch('https://api.example.com/data');
 4        let data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("An error occurred while fetching data:", error.message);
 8    }
 9}
10
11fetchData();

Sammendrag

• Du kan opfange synkrone fejl ved hjælp af try...catch syntaksen.
• Du kan udløse dine egne fejl ved hjælp af throw.
• Fejl i asynkrone operationer kan håndteres ved hjælp af catch metoden fra Promise eller med async/await og try...catch.

Ved at bruge disse metoder kan du sikre, at dit program fungerer korrekt, selv når der opstår fejl.

Error

Error klassen bruges til fejlhåndtering. Den giver mulighed for at oprette fejl og levere fejlmeddelelser samt stack traces.

1try {
2    throw new Error("Something went wrong");
3} catch (e) {
4    console.log(e.message); // Something went wrong
5}

Grundlæggende Brug

Et Error objekt kan oprettes eksplicit, når der opstår en fejl. Du opretter en instans med new Error() og sender en fejlmeddelelse.

1const error = new Error("Something went wrong");
2console.log(error.message);  // "Something went wrong"
3console.log(error.name);     // "Error"
4console.log(error.stack);    // Stack trace (information about where the error occurred)

At kaste fejl med throw

I JavaScript kan du kaste en fejl ved hjælp af throw nøgleordet. Dette bruges til at afbryde behandlingen i specifikke situationer og overføre kontrol til en fejlhandler.

1function doSomething() {
2    throw new Error("This function is not yet implemented");
3}
4
5try {
6    doSomething();
7} catch (e) {
8    console.error(e.message);  // "This function is not yet implemented"
9}

Fejl kastet med throw kan opfanges ved hjælp af try...catch syntaksen.

Opretter brugerdefinerede fejl

I JavaScript kan du oprette dine egne brugerdefinerede fejl ved at udvide Error klassen. Dette gør det muligt at oprette fejl, der er skræddersyet til specifikke situationer.

 1class CustomError extends Error {
 2    constructor(message) {
 3        super(message);  // Call the parent class constructor
 4        this.name = "CustomError";  // Set the error name
 5    }
 6}
 7
 8try {
 9    throw new CustomError("A custom error has occurred");
10} catch (e) {
11    console.error(e.name);    // "CustomError"
12    console.error(e.message); // "A custom error has occurred"
13}

Indbyggede fejlkategorier

JavaScript har flere indbyggede fejlkategorier, der udvider Error klassen. Disse bruges til at repræsentere specifikke fejl.

• ReferenceError: Opstår, når du refererer til en variabel, der ikke eksisterer.
• TypeError: Opstår, når en værdi har en anden type end forventet.
• RangeError: Opstår, når et tal er uden for det tilladte interval.
• SyntaxError: Opstår, når kode, der ikke er syntaktisk korrekt, udføres.
• EvalError: Fejl relateret til brugen af eval() funktionen. Det bruges sjældent i dag.
• URIError: Opstår, når en ugyldig URI (kodnings- eller dekodingsfejl) bruges.

Eksempel: ReferenceError

Her er et eksempel på en ReferenceError.

1try {
2    console.log(undefinedVariable);  // Undefined variable
3} catch (e) {
4    console.error(e.name);    // "ReferenceError"
5    console.error(e.message); // "undefinedVariable is not defined"
6}

Eksempel: TypeError

Her er et eksempel på en TypeError.

1try {
2    null.f();  // Attempting to call a function on null
3} catch (e) {
4    console.error(e.name);    // "TypeError"
5    console.error(e.message); // "Cannot read properties of null (reading 'f')"
6}

finally Blok

I try...catch syntaksen skal du bruge finally blokken til operationer, du vil udføre, uanset om der opstår en fejl.

1try {
2    throw new Error("An issue has occurred");
3} catch (e) {
4    console.error(e.message);  // "An issue has occurred"
5} finally {
6    console.log("Performing cleanup");
7}

I dette eksempel udføres operationerne i finally-blokken, selv hvis der opstår en fejl.

Egenskaber ved Error-objektet

Error-objektet har følgende egenskaber.

• message: Dette er fejlmeddelelsen.
• name: Fejlens navn, som standard er "Error".
• stack: En staksporing, der viser, hvor fejlen opstod, nyttig til fejlfinding.

Fordele ved undtagelseshåndtering

Ved at implementere korrekt fejlbehandling kan du forhindre, at applikationen går ned ved uforventet adfærd. Ved korrekt brug af try...catch-syntaks og fejlobjekter kan du skrive mere robust kode.

 1function divide(a, b) {
 2    if (b === 0) {
 3        throw new Error("Cannot divide by zero");
 4    }
 5    return a / b;
 6}
 7
 8try {
 9    console.log(divide(4, 0));  // An error will occur
10} catch (e) {
11    console.error(e.message);   // "Cannot divide by zero"
12}

Sammendrag

• Error-klassen bruges til at repræsentere en fejlårsag og til at udføre fejlbehandling.
• Brug syntaksen try...catch...finally til at håndtere fejl og forhindre uventet lukning af applikationen.
• Det er også muligt at udvide Error-klassen for at oprette brugerdefinerede fejl.
• Du kan håndtere forskellige typer fejl ved at bruge indbyggede fejklasser som TypeError og ReferenceError.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video