Felfångst i JavaScript

Den här artikeln förklarar felfångst i JavaScript.

YouTube Video

Felfångst i JavaScript

Felfångst i JavaScript är en viktig funktion för att fånga och hantera fel på ett korrekt sätt när ett program stöter på oväntade problem. Det är främst vanligt att använda try...catch-syntax för att fånga och hantera fel. Dessutom kan felhantering vid arbete med Promises eller asynkrona operationer göras med async/await eller Promise.prototype.catch.

try...catch-syntax

try...catch används för att fånga och hantera fel när de uppstår inom ett kodblock.

 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}

• Om ett fel uppstår i en try-block avbryts programmets körning och catch-blocket körs.
• finally-blocket körs alltid, oavsett om ett fel uppstår eller inte. Det är användbart för resurshantering och slutlig bearbetning, bland annat.

Kasta fel (throw)

I JavaScript kan du uttryckligen utlösa ett fel med throw-nyckelordet. Det används för att kasta anpassade felmeddelanden eller anpassade fel.

 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}

Felhantering i asynkrona operationer (Promise och async/await)

Vid utförande av asynkrona operationer är felhanteringen något annorlunda. Vid användning av Promises fångas fel med catch-metoden.

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!"

Vid asynkrona operationer med async/await kan du hantera fel 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();

Sammanfattning

• Du kan fånga synkrona fel med try...catch-syntaxen.
• Du kan kasta egna fel med throw.
• Fel i asynkrona operationer kan hanteras med Promise-metodens catch eller med async/await och try...catch.

Genom att använda dessa metoder kan du säkerställa att ditt program fungerar korrekt även när fel uppstår.

Error

Error-klassen används för felhantering. Den ger möjligheten att skapa fel och tillhandahålla felmeddelanden samt stack-spårningar.

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

Grundläggande användning

Ett Error-objekt kan skapas uttryckligen när ett fel uppstår. Du skapar en instans med new Error() och skickar ett felmeddelande.

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

Egenskaper hos Error-objektet

Error-objektet har följande egenskaper.

• message: Detta är felmeddelandet.
• name: Namnet på felet, som standard är "Error".
• stack: En stackspårning som visar var felet inträffade, användbar vid felsökning.

Skapa fel med throw

I JavaScript kan du skapa ett fel med hjälp av nyckelordet throw. Detta används för att avbryta bearbetning i specifika situationer och lämna över kontrollen till en felhanterare.

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}

Fel som skapas med throw kan fångas med try...catch-syntaxen.

Skapa anpassade fel

I JavaScript kan du skapa egna anpassade fel genom att utöka Error-klassen. Detta gör att du kan skapa fel som är anpassade för specifika 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}

Inbyggda felklasser

JavaScript har flera inbyggda felklasser som utökar Error-klassen. Dessa används för att representera specifika fel.

• ReferenceError: Uppstår när du refererar till en variabel som inte existerar.
• TypeError: Uppstår när en värdes typ skiljer sig från den förväntade typen.
• RangeError: Uppstår när ett tal är utanför det tillåtna intervallet.
• SyntaxError: Uppstår när kod som inte är syntaktiskt korrekt exekveras.
• EvalError: Fel relaterade till användningen av funktionen eval(). Den används sällan nuförtiden.
• URIError: Uppstår när en ogiltig URI (kodnings- eller avkodningsfel) används.

Exempel: ReferenceError

Här är ett exempel 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}

Exempel: TypeError

Här är ett exempel 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-block

I try...catch-syntaxen används finally-blocket för operationer som du vill utföra oavsett om ett fel inträffar eller inte.

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 det här exemplet utförs operationerna i finally-blocket även om ett fel uppstår.

Fördelar med undantagshantering

Genom att korrekt implementera felhantering kan du förhindra att applikationen kraschar vid oväntat beteende. Genom att korrekt använda try...catch-syntaxen och felobjekt kan du skriva mer robust kod.

 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}

Sammanfattning

• Error-klassen används för att representera en felorsak och utföra felhantering.
• Använd try...catch...finally-syntaxen för att hantera fel och förhindra oväntad applikationsavslutning.
• Det är också möjligt att utöka Error-klassen för att skapa egna fel.
• Du kan hantera olika typer av fel genom att använda inbyggda felfklasser som TypeError och ReferenceError.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video