Feilhåndtering i JavaScript

Denne artikkelen forklarer feilhåndtering i JavaScript.

YouTube Video

Feilhåndtering i JavaScript

Feilhåndtering i JavaScript er en viktig funksjon for å fange opp og håndtere feil når et program møter uventede problemer. Det er vanlig å bruke syntaksen try...catch for å fange opp og håndtere feil. I tillegg, når man arbeider med Promises eller asynkrone operasjoner, kan feilhåndtering gjøres ved hjelp av async/await eller Promise.prototype.catch.

try...catch-syntaks

try...catch brukes til å fange opp og håndtere feil når de oppstår i en kodeblokk.

 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 det oppstår en feil inne i en try-blokk, blir programutførelsen avbrutt, og catch-blokken blir kjørt.
• finally-blokken kjøres alltid, uavhengig av om det er en feil eller ikke. Den er nyttig for blant annet å frigjøre ressurser og utføre endelig behandling.

Kaste feil (throw)

I JavaScript kan du eksplisitt utløse en feil ved å bruke nøkkelordet throw. Det brukes når du kaster tilpassede feilmeldinger eller tilpassede feil.

 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}

Feilhåndtering i asynkrone operasjoner (Promise og async/await)

Når du utfører asynkrone operasjoner, er feilhåndteringen litt annerledes. Når du bruker Promises, fanges feil opp 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!"

Når du utfører asynkrone operasjoner med async/await, kan du håndtere feil 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 fange opp synkrone feil ved hjelp av try...catch-syntaksen.
• Du kan kaste dine egne feil ved hjelp av throw.
• Feil i asynkrone operasjoner kan håndteres ved hjelp av catch-metoden til Promise, eller med async/await og try...catch.

Ved å bruke disse metodene kan du sikre at programmet ditt fungerer riktig selv når feil oppstår.

Error

Error-klassen brukes til feilhåndtering. Den gir mulighet til å opprette feil og gi feilmeldinger og stack-spor.

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

Grunnleggende bruk

Et Error-objekt kan opprettes eksplisitt når en feil oppstår. Du oppretter en instans med new Error() og sender en feilmelding.

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)

Kaste feil med throw

I JavaScript kan du kaste en feil ved å bruke nøkkelordet throw. Dette brukes til å avbryte behandlingen i bestemte situasjoner og overføre kontrollen til en feilbehandler.

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}

Feil kastet med throw kan fanges opp ved bruk av syntaksen try...catch.

Opprette egendefinerte feil

I JavaScript kan du opprette dine egne egendefinerte feil ved å utvide Error-klassen. Dette gjør at du kan opprette feil skreddersydd for bestemte situasjoner.

 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}

Innebygde feilklasser

JavaScript har flere innebygde feilklasser som utvider Error-klassen. Disse brukes til å representere spesifikke feil.

• ReferenceError: Oppstår når du refererer til en variabel som ikke eksisterer.
• TypeError: Oppstår når en verditype er forskjellig fra den forventede typen.
• RangeError: Oppstår når et tall er utenfor det tillatte området.
• SyntaxError: Oppstår når kode som ikke er syntaktisk korrekt utføres.
• EvalError: Feil relatert til bruk av eval()-funksjonen. Det brukes sjelden i dag.
• URIError: Oppstår når en ugyldig URI (koding eller dekodingsfeil) brukes.

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-blokk

I try...catch-syntaksen bruker du finally-blokken for operasjoner du vil utføre uavhengig av om det oppstår en feil.

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 eksempelet blir operasjonene i finally-blokken utført selv om det oppstår en feil.

Egenskaper for Error-objektet

Error-objektet har følgende egenskaper.

• message: Dette er feilmeldingen.
• name: Navnet på feilen, som standard er "Error".
• stack: En stakksporing som viser hvor feilen oppstod, nyttig for feilsøking.

Fordeler med unntakshåndtering

Ved å implementere riktig feilbehandling kan du forhindre at applikasjonen krasjer når uventet oppførsel oppstår. Ved å bruke try...catch-syntaksen og feilobjekter riktig, kan du skrive mer 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 brukes til å representere en feilårsak og til å utføre feilbehandling.
• Bruk try...catch...finally-syntaksen for å håndtere feil og forhindre uventet avslutning av applikasjonen.
• Det er også mulig å utvide Error-klassen for å lage egendefinerte feil.
• Du kan håndtere ulike typer feil ved å bruke innebygde feilklasser som TypeError og ReferenceError.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video