Obsługa błędów w JavaScript

Ten artykuł wyjaśnia obsługę błędów w JavaScript.

YouTube Video

Obsługa błędów w JavaScript

Obsługa błędów w JavaScript to ważna funkcja służąca do przechwytywania i odpowiedniego obsługiwania błędów, gdy program napotyka nieoczekiwane problemy. Głównie używa się składni try...catch do przechwytywania i obsługi błędów. Dodatkowo, podczas pracy z obiektami Promise lub operacjami asynchronicznymi, obsługa błędów może być również realizowana za pomocą async/await lub Promise.prototype.catch.

Składnia try...catch

try...catch służy do przechwytywania i obsługi błędów, gdy występują w bloku kodu.

 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}

• Jeśli błąd wystąpi wewnątrz bloku try, wykonanie programu zostaje przerwane, a blok catch zostaje wykonany.
• Blok finally jest zawsze wykonywany, niezależnie od tego, czy wystąpi błąd, czy nie. Przydaje się do zwalniania zasobów i końcowego przetwarzania, między innymi.

Rzucanie błędów (throw)

W JavaScript można jawnie wywołać błąd za pomocą słowa kluczowego throw. Służy do rzucania niestandardowych komunikatów błędów lub niestandardowych błędów.

 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}

Obsługa błędów w operacjach asynchronicznych (Promise i async/await)

Podczas wykonywania operacji asynchronicznych obsługa błędów wygląda nieco inaczej. Podczas korzystania z obiektów Promise błędy są przechwytywane za pomocą metody 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!"

Podczas wykonywania operacji asynchronicznych za pomocą async/await, błędy można obsługiwać za pomocą 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();

Podsumowanie

• Możesz przechwytywać błędy synchroniczne za pomocą składni try...catch.
• Możesz rzucać własne błędy za pomocą throw.
• Błędy w operacjach asynchronicznych mogą być obsługiwane za pomocą metody catch obiektu Promise, lub przy użyciu async/await i try...catch.

Korzystając z tych metod, możesz zapewnić poprawne działanie programu, nawet gdy występują błędy.

Error

Klasa Error jest używana do obsługi błędów. Umożliwia tworzenie błędów oraz dostarczanie komunikatów błędów i stosów wywołań.

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

Podstawowe użycie

Obiekt Error można jawnie utworzyć, gdy wystąpi błąd. Tworzysz instancję za pomocą new Error() i przekazujesz komunikat błędu.

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)

Rzucanie błędów za pomocą throw

W JavaScript można rzucić błąd za pomocą słowa kluczowego throw. Służy to przerwaniu przetwarzania w określonych sytuacjach i przekazaniu kontroli obsłudze błędów.

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}

Błędy wyrzucone za pomocą throw można przechwycić za pomocą składni try...catch.

Tworzenie niestandardowych błędów

W JavaScript możesz tworzyć własne niestandardowe błędy poprzez rozszerzenie klasy Error. Pozwala to na tworzenie błędów dostosowanych do konkretnych sytuacji.

 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}

Wbudowane klasy błędów

JavaScript posiada kilka wbudowanych klas błędów, które rozszerzają klasę Error. Służą one do reprezentowania określonych błędów.

• ReferenceError: Występuje, gdy odwołujesz się do zmiennej, która nie istnieje.
• TypeError: Występuje, gdy typ wartości różni się od oczekiwanego typu.
• RangeError: Występuje, gdy liczba znajduje się poza dozwolonym zakresem.
• SyntaxError: Występuje, gdy zostanie wykonany kod, który nie jest poprawny składniowo.
• EvalError: Błędy związane z użyciem funkcji eval(). Obecnie jest rzadko używany.
• URIError: Występuje, gdy zostanie użyty nieprawidłowy URI (błędy kodowania lub dekodowania).

Przykład: ReferenceError

Oto przykład 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}

Przykład: TypeError

Oto przykład 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}

Blok finally

W składni try...catch użyj bloku finally dla operacji, które mają zostać wykonane niezależnie od tego, czy wystąpi błąd.

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}

W tym przykładzie operacje w bloku finally są wykonywane nawet, jeśli zostanie zgłoszony błąd.

Właściwości obiektu Error

Obiekt Error posiada następujące właściwości.

• message: To jest komunikat o błędzie.
• name: Nazwa błędu, która domyślnie wynosi "Error".
• stack: Ślad stosu zawierający informacje o miejscu wystąpienia błędu, przydatny przy debugowaniu.

Korzyści z obsługi wyjątków

Poprawna implementacja obsługi błędów pozwala zapobiec awarii aplikacji w przypadku nieoczekiwanego zachowania. Odpowiednie wykorzystanie składni try...catch oraz obiektów błędów pozwala pisać bardziej niezawodny 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}

Podsumowanie

• Klasa Error służy do reprezentowania przyczyny błędu oraz do obsługi błędów.
• Używaj składni try...catch...finally, aby obsługiwać błędy i zapobiegać nieoczekiwanemu zakończeniu działania aplikacji.
• Można również rozszerzyć klasę Error, aby tworzyć własne niestandardowe błędy.
• Możesz obsługiwać różne typy błędów, korzystając z wbudowanych klas błędów, takich jak TypeError i ReferenceError.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video