Wyjątki JavaScript: kompletny przewodnik po metodach Try, Catch, Throw i Finally

Spis treści:

• Zrozumienie wyjątków i błędów w JavaScript
• Czym są błędy?
• Struktura obsługi błędów w JavaScript: Try-Catch
• Blok Finally w obsłudze wyjątków w JavaScript
• Właściwości obiektu Error w JavaScript
• Wyjątki w JavaScript: Korzystanie z instrukcji Throw
• Wydajne metody obsługi błędów asynchronicznych w JavaScript
• Projektowanie obsługi błędów w aplikacji JavaScript: Praktyczne Przewodnik
• Typowe błędne przekonania na temat obsługi wyjątków w JavaScript
• Określanie, kiedy używać wyjątków
• Sytuacje, w których wyjątki nie są wymagane
• Co jeszcze warto przeczytać

Podczas działania strony w czasie rzeczywistym mogą wystąpić różne błędy. Mogą one dotyczyć na przykład sprawdzania, czy użytkownik wypełnił wszystkie wymagane pola rejestracji lub interakcji usługi sieciowej z serwerem. Takie błędy w JavaScript nazywane są wyjątkami. Można je wyłapywać, co pomaga zapobiegać awariom programu.

Dzisiaj zapoznasz się z koncepcją wyjątków w JavaScript, przyjrzysz się różnym typom błędów i sytuacji wyjątkowych oraz nauczysz się, jak je obsługiwać za pomocą konstrukcji try…catch. Dodatkowo utworzysz swój pierwszy wyjątek w JavaScript.

Spis treści

• Wyjątki i błędy w JavaScript to problemy, które mogą wystąpić podczas wykonywania kodu. Wyjątki to szczególne sytuacje, które mogą być spowodowane różnymi czynnikami, takimi jak nieprawidłowe dane wejściowe, brak wymaganych zasobów lub błędy w logice programu. W przeciwieństwie do zwykłych błędów, które mogą prowadzić do natychmiastowego przerwania wykonywania programu, wyjątki pozwalają obsłużyć problem bez zatrzymywania aplikacji.

  Błędy JavaScript najczęściej wskazują na problemy składniowe, logiczne lub inne, które uniemożliwiają poprawne wykonanie kodu. Mogą one objawiać się w postaci komunikatów o błędach, które pomagają programistom zrozumieć, co dokładnie poszło nie tak.

  JavaScript udostępnia mechanizmy obsługi wyjątków za pomocą konstrukcji try-catch, która umożliwia przechwytywanie i reagowanie na występujące wyjątki. Pozwala to programistom tworzyć aplikacje bardziej odporne na błędy, które mogą działać nawet w nieoczekiwanych sytuacjach.

• Jakie są rodzaje błędów?
• JavaScript używa konstrukcji try-catch do obsługi wyjątków. Ten mechanizm pozwala programistom bezpiecznie wykonywać kod, który potencjalnie może spowodować błąd.

  Podczas korzystania z konstrukcji try blok kodu jest umieszczany w sekcji try, co pozwala programowi kontynuować działanie nawet w przypadku wystąpienia błędu podczas wykonywania. W przypadku wystąpienia wyjątku, sterowanie jest przekazywane do bloku catch, w którym można obsłużyć wyjątek, na przykład wyświetlając komunikat o błędzie lub wykonując alternatywne działania.

  Struktura wygląda następująco:

  «`javascript
  try {
  // Kod, który może spowodować błąd
  } catch (error) {
  // Obsługa błędu
  }
  «`

  Jeśli kod w bloku try zostanie wykonany pomyślnie, blok catch zostanie zignorowany. Jeśli jednak wystąpi błąd, wykonanie zostanie przekazane do bloku catch, w którym zmienna błędu będzie zawierać informacje o wystąpieniu problemu.

  Dlatego konstrukcja try-catch jest potężnym narzędziem do zarządzania błędami w JavaScript, pozwalającym na poprawę stabilności i przewidywalności aplikacji.

• W JavaScript blok Finally jest ważnym elementem obsługi wyjątków. Jest używany w połączeniu z konstrukcjami try i catch i umożliwia wykonanie określonego kodu niezależnie od tego, czy wystąpił wyjątek.

  Bloki działają następująco: najpierw wykonywany jest kod wewnątrz bloku try, który może generować błędy. Jeśli wystąpią błędy, sterowanie jest przekazywane do bloku catch, gdzie problem może zostać obsłużony. Jednak po zakończeniu tych bloków, niezależnie od wyniku, wykonywany jest kod z bloku Finally.

  Ten blok jest często używany do wykonywania operacji końcowych, takich jak zwalnianie zasobów, zamykanie plików lub połączeń. Na przykład, nawet jeśli podczas wykonywania wystąpi błąd, blok Finally zapewnia wykonanie niezbędnych działań. Dzięki temu jest szczególnie przydatny do zapewnienia niezawodności programu i zapobiegania wyciekom pamięci lub innych zasobów.

  Zatem blok Finally jest niezawodnym sposobem na zakończenie logiki programu, zapewniając ukończenie krytycznych operacji niezależnie od tego, czy wystąpiły wyjątki.

• JavaScript ma obiekt Error, który jest przeznaczony do obsługi błędów. Ten obiekt dostarcza informacji o wystąpieniu błędu i zawiera kilka kluczowych właściwości.

  Po pierwsze, właściwość name pozwala poznać typ błędu, który może wahać się od standardowych, takich jak SyntaxError lub ReferenceError, po niestandardowe, tworzone przez programistów.

  Po drugie, właściwość message zawiera wiadomość tekstową wyjaśniającą przyczynę błędu. Ta wiadomość może być bardzo przydatna do diagnozowania problemów w kodzie.

  Ponadto istnieje właściwość stack, która dostarcza stos wywołań w momencie wystąpienia błędu. Ta właściwość może pomóc programistom dokładnie określić, gdzie w kodzie wystąpił błąd, śledząc sekwencję wywołań funkcji.

  Oprócz standardowych właściwości, możesz tworzyć i rozszerzać własne klasy błędów, co pozwala na opracowywanie bardziej szczegółowych i informatywnych mechanizmów obsługi wyjątków.

• W JavaScript obsługa błędów jest implementowana poprzez zgłaszanie wyjątków za pomocą instrukcji throw. Ta instrukcja służy do tworzenia niestandardowych wyjątków, które mogą być zgłaszane w przypadku wystąpienia nieoczekiwanych sytuacji w kodzie. Po uruchomieniu instrukcji throw wykonywanie bieżącej funkcji zostaje przerwane, a sterowanie zostaje przekazane do najbliższego bloku catch (jeśli istnieje) lub do globalnego programu obsługi błędów.

  Głównym celem instrukcji throw jest jawne wskazanie, że coś poszło nie tak i przekazanie informacji o błędzie. Można rzucać nie tylko wbudowane obiekty błędów, takie jak Error, TypeError czy ReferenceError, ale także tworzyć własne klasy błędów dziedziczące po standardowym obiekcie Error. Pozwala to na większą kontrolę nad obsługą błędów i dostarczanie bardziej szczegółowych komunikatów o tym, co dokładnie się stało.

  Przykład użycia instrukcji throw może wyglądać następująco:

  «`javascript
  function checkAge(age) {
  if (age < 18) { throw new Error("Wiek musi mieć co najmniej 18 lat."); } return "Dostęp udzielony.";}try { console.log(checkAge(16));} catch (error) { console.error(error.message);}```W tym przykładzie, jeśli wiek jest niższy niż 18 lat, zostanie zgłoszony wyjątek z komunikatem o błędzie, który zostanie następnie przechwycony w bloku catch, gdzie odpowiedni komunikat zostanie wyświetlony na konsoli. W ten sposób throw pozwala na efektywne zarządzanie błędami i poprawę jakości kodu, a także uczynienie go bardziej zrozumiałym i łatwiejszym w utrzymaniu.

• Efektywne zarządzanie błędami asynchronicznymi w JavaScript jest ważnym aspektem programowania, ponieważ pozwala uniknąć nieoczekiwanych awarii i poprawić komfort użytkowania. Istnieje kilka podejść do tego zagadnienia, a ich prawidłowe zastosowanie pomoże zapewnić odporność aplikacji.

  Jedną z najczęstszych metod jest użycie konstrukcji try…catch` w połączeniu z funkcjami asynchronicznymi. Po umieszczeniu kodu w bloku try, wszelkie błędy występujące w operacjach asynchronicznych mogą zostać przechwycone w bloku catch. Pozwala to zarządzać błędami i wykonywać odpowiednie działania, takie jak logowanie lub powiadamianie użytkownika.

  Warto również wspomnieć o metodzie `Promise.catch()`. Jeśli pracujesz z obietnicami, możesz dodać procedurę obsługi błędów bezpośrednio do łańcucha obietnic. Odbywa się to poprzez wywołanie metody `catch`, która zostanie wywołana w przypadku odrzucenia obietnicy. Takie podejście pomaga uniknąć konieczności stosowania dodatkowych bloków `try…catch` i sprawia, że ​​kod jest bardziej przejrzysty.

  Co więcej, obsługa błędów może zostać ulepszona dzięki `async/await`. Korzystając z tej konstrukcji, możesz obsługiwać operacje asynchroniczne w taki sam sposób, jak operacje synchroniczne. W takim przypadku błędy mogą być wychwytywane za pomocą `try…catch`, co czyni kod bardziej czytelnym i zrozumiałym.

  Ważne jest również, aby pamiętać o globalnej obsłudze błędów. W środowisku przeglądarki można użyć zdarzenia unhandledrejection do wychwytywania nieobsłużonych odrzuconych obietnic. Pozwala to reagować na błędy, które nie są wychwytywane w innych częściach kodu.

  Na koniec warto rozważyć utworzenie niestandardowych procedur obsługi błędów, aby zapewnić użytkownikom jasne i zrozumiałe komunikaty o występujących problemach. To nie tylko poprawia komfort użytkowania, ale także pomaga programistom szybciej znajdować i naprawiać błędy.

  Dlatego prawidłowa asynchroniczna obsługa błędów w JavaScript obejmuje użycie różnych metod, takich jak try…catch`, Promise.catch()`, async/await` oraz globalnych procedur obsługi. Zastosowanie tych podejść do kodu pomoże Ci tworzyć bardziej niezawodne i niezawodne aplikacje.

• Studium przypadku: Projektowanie systemu obsługi błędów dla aplikacji JavaScript
• Błędy, które często występują podczas obsługi wyjątków w JavaScript
• Wyjątki powinny być używane, gdy zachodzi konieczność obsługi błędów lub szczególnych sytuacji, które mogą wystąpić podczas wykonywania programu. Pomaga to uniknąć awarii i zapewnia poprawne wykonanie kodu nawet w przypadku nieoczekiwanych okoliczności. Wyjątki są przydatne w sterowaniu przepływem, pozwalając programiście wyraźnie oddzielić normalne operacje od obsługi błędów. Na przykład, jeśli program próbuje otworzyć nieistniejący plik, zamiast zakończyć się niepowodzeniem, może zostać zgłoszony wyjątek, który następnie może zostać wyłapany i odpowiednio obsłużony. W ten sposób wyjątki pomagają tworzyć bardziej niezawodne i niezawodne aplikacje, które mogą obsługiwać różne sytuacje bez zakłócania ogólnego przepływu.
• Istnieją sytuacje, w których wyjątków można uniknąć. Należą do nich przypadki, w których błędy można przewidzieć i obsłużyć za pomocą standardowych warunków kontroli. Na przykład, jeśli program oczekuje określonych danych wejściowych od użytkownika, można z wyprzedzeniem sprawdzić, czy spełniają one wymagane kryteria, a jeśli nie, zapewnić alternatywy lub powiadomienia.

  Co więcej, w sytuacjach, gdy błędy nie są krytyczne, można użyć prostych mechanizmów sterowania przepływem, takich jak instrukcje warunkowe lub pętle, aby obsłużyć oczekiwane sytuacje. Pozwala to uniknąć złożoności kodu, zwykle związanej z obsługą wyjątków, czyniąc go bardziej czytelnym i zrozumiałym.

  W ten sposób, dzięki odpowiedniej organizacji kodu i przemyślanemu podejściu do jego pisania, wiele zadań można rozwiązać bez potrzeby obsługi wyjątków, co pomaga poprawić stabilność i zmniejszyć obciążenie systemu.

• Co jeszcze warto przeczytać

Zrozumienie wyjątków i błędów w JavaScript

Wyjątki w JavaScript to błędy występujące podczas kompilacji lub wykonywania kodu programu. Na przykład, jeśli użytkownik nie wypełni wymaganego pola „Nazwa” na stronie internetowej i spróbuje kliknąć przycisk „Zarejestruj”, zostanie zgłoszony wyjątek.

Twórcy JavaScriptu uwzględnili obsługę błędów w swoim kodzie. Aby zapobiec awariom programu z powodu błędów, stosowane są specjalne konstrukcje językowe – try, catch i end. Ten proces nazywa się obsługą wyjątków. Jeśli wyjątek nie zostanie obsłużony, wykonywanie skryptu może zostać przerwane, co doprowadzi do nieprzewidywalnych konsekwencji w działaniu usługi.

Przeczytaj również:

Kod JavaScript można uruchomić na kilka sposobów, w zależności od preferencji i narzędzi. Przyjrzyjmy się trzem głównym metodom: użyciu przeglądarki, konsoli i edytora kodu.

Pierwsza metoda polega na wykonaniu kodu w przeglądarce. Aby to zrobić, można otworzyć narzędzia programistyczne, dostępne w większości nowoczesnych przeglądarek. Zazwyczaj można uzyskać do nich dostęp, naciskając klawisz F12 lub wybierając z menu kontekstowego „Wyświetl kod źródłowy” lub „Narzędzia programistyczne”. W otwartym oknie należy przejść do zakładki „Konsola”, gdzie można wprowadzać i testować kod JavaScript bezpośrednio w przeglądarce, co pozwala na szybkie sprawdzenie jego funkcjonalności.

Drugą opcją jest uruchomienie kodu w konsoli. Może to być wbudowana konsola przeglądarki, oddzielne terminale lub wiersze poleceń obsługujące wykonywanie JavaScript. Można na przykład użyć Node.js, który umożliwia uruchamianie JavaScript poza przeglądarką. Instalując Node.js, można uruchamiać skrypty w wierszu poleceń, co zapewnia dodatkowe opcje programowania i testowania.

Trzecia metoda polega na użyciu edytora kodu. Wiele edytorów tekstu i zintegrowanych środowisk programistycznych (IDE), takich jak Visual Studio Code, Atom i Sublime Text, obsługuje JavaScript. Umożliwiają one pisanie, zapisywanie i uruchamianie skryptów. Zazwyczaj te edytory oferują wbudowane narzędzia do uruchamiania kodu, a także możliwość pracy z terminalem, co czyni proces programowania wygodniejszym i wydajniejszym.

Każda z tych metod ma swoje zalety i może być używana w zależności od zadań i preferencji.

Jakie są błędy?

W JavaScript występuje wiele typów błędów, a każdy z nich obsługuje własną klasę:

• Błąd składni, znany jako SyntaxError, występuje, gdy w kodzie występują błędy, takie jak brakujący nawias.

• ReferenceError to błąd, który występuje, gdy próbujesz uzyskać dostęp do zmiennej, która nie została zadeklarowana lub nie istnieje w bieżącym kontekście.

• TypeError to błąd występujący z powodu nieprawidłowego użycia danych Typy.

• RangeError to błąd występujący podczas próby dostępu do indeksu tablicy, który nie istnieje.

• URIError występuje, gdy funkcja encodeURI lub decodeURI otrzyma nieprawidłowy argument.

• EvalError występuje, gdy funkcja eval() nie działa poprawnie. Ta funkcja została zaprojektowana do wykonania wiersza kodu, ale jeśli napotka błędy, pojawia się ten błąd.

• AggregateError występuje, gdy jednocześnie występuje wiele błędów.

Struktura obsługi błędów JavaScript: try-catch

Blok try zawiera kod, w którym potencjalnie może wystąpić błąd, natomiast blok catch zawiera instrukcje, które zostaną wykonane w przypadku wystąpienia wyjątku. Te dwa komponenty są ujęte w nawiasy klamrowe i są od siebie zależne, nie mogą istnieć oddzielnie.

Uruchomienie tego kodu bez konstrukcji try…catch spowoduje zgłoszenie wyjątku.

Kod JavaScript składa się wyłącznie z tych dwóch wierszy. Nie ma metody start(), więc po wykonaniu tego wiersza w konsoli pojawi się błąd: Uncaught ReferenceError: start is not defined. W rezultacie wiersz z powitaniem „Witaj” i reszta kodu nie zostaną wykonane.

Zaktualizujmy nasz kod, implementując konstrukcje try i catch. W bloku try umieszczamy fragment kodu, który potencjalnie może spowodować błąd, a w bloku catch określamy tekst, który zostanie wyświetlony w przypadku wystąpienia tego błędu.

Wyjątek został obsłużony. Teraz wykonywanie kodu będzie kontynuowane, ale wiersze znajdujące się w bloku try nie zostaną wykonane, w tym console.log(«Hello»). Następnie zostanie wykonany blok catch, po czym program będzie kontynuował działanie.

Wynik, który pojawi się w konsoli, będzie wyglądał następująco:

JavaScript dopuszcza tylko jeden blok catch, co odróżnia go od języków takich jak Java, C++ czy Python. Wynika to ze specyfiki języka, który został stworzony z uproszczoną strukturą i skoncentrowany na tworzeniu aplikacji internetowych.

Kiedy zachodzi potrzeba jednoczesnej obsługi kilku różnych wyjątków, można użyć konstrukcji switch lub apply if ... else, aby określić typ wyjątku wewnątrz bloku catch.

Przeczytaj także:

Funkcje w JavaScript: Jak tworzyć, wywoływać i używać bezbłędnie

Blok Finally w obsłudze wyjątków JavaScript

Blok Finally to dodatkowy element w strukturze try…catch. Jest wykonywany niezależnie od tego, czy wystąpił wyjątek i jest umieszczany po bloku catch. Ten blok odgrywa ważną rolę w kończeniu krytycznych procesów, zwłaszcza w sytuacjach, gdy wystąpił błąd, program przestał działać, ale konieczne jest zapisanie informacji lub przywrócenie poprzedniego stanu.

W przedstawionym kodzie JavaScript wszystko działa poprawnie, bez żadnych błędów: blok catch nie jest aktywowany, ale kod wewnątrz klauzuli Finally jest nadal wykonywany.

Konsola JavaScript:

Jest jeszcze jeden interesujący szczegół: można obejść się bez bloku catch, używając tylko konstrukcji try i Finally.

W tej sytuacji sprawdzanie błędów nie zostanie przeprowadzone, a blok Finally zostanie z pewnością wykonany, co doprowadzi do zakończenia programu, choć niepoprawnie.

Konsola JavaScript:

Właściwości obiektu Error w JavaScript

Funkcja console.error(«string», error) służy do wyświetlania sformatowanych komunikatów o błędach w konsoli. Przyjmuje dwa argumenty, z których jeden jest błędem reprezentowanym jako obiekt klasy Error.

Wszystkie klasy w systemie pochodzą z głównej klasy Object, która stanowi bazę dla klasy Error. Ta ostatnia z kolei dzieli się na podklasy, z których każda odpowiada za pewne typy błędów, jak opisano wcześniej.

Klasa Error ma szereg kluczowych cech:

• name to nazwa kategorii błędu;
• error to powiadomienie o błędzie;
• stack to wyświetlanie stosu wywołań funkcji.

• cause to wskazanie innego błędu (innego Error), który jest źródłem innego problemu.

Wyjątki w JavaScript: użycie operatora throw

Wyjątki obsługiwane w funkcji programowania w następujący sposób:

• Po stronie użytkownika występuje pewien rodzaj błędu.
• Gdy w bloku try w JavaScript wystąpi wyjątek, wykonywanie bieżącego kodu zostaje zatrzymane.
• System wyszukuje określoną klasę błędów, oznaczoną jako Error.
• Błąd jest przekazywany do bloku catch.
• Blok Finally, jeśli istnieje, jest wykonywany.
• Po wykonaniu bloku try…catch program kontynuuje działanie.

Gdy napotkamy błąd, w określonym miejscu w JavaScript wykonywane jest następujące polecenie:

JavaScript pozwala na zgłaszanie własnych wyjątków. W tym celu należy użyć słowa kluczowego throw.

Wszystko, co omówiliśmy do tej pory, dotyczy kodu synchronicznego, który jest wykonywany sekwencyjnie, wiersz po wierszu. Przejdźmy teraz do niuansów obsługi wyjątków w kontekście kodu asynchronicznego.

Wydajne techniki obsługi błędów asynchronicznych w JavaScript

Kod asynchroniczny w JavaScript to kod, który nie jest wykonywany natychmiast, ale później, po zakończeniu innych operacji. Mimo że JavaScript działa w jednym wątku i przetwarza polecenia sekwencyjnie, jest w stanie odroczyć wykonywanie zadań bez przerywania procesu głównego. Osiąga się to dzięki systemowi kolejkowania zadań i mechanizmowi pętli zdarzeń.

Na przykład metoda setTimeout() inicjuje wykonywanie innej funkcji po upływie określonego czasu. Jeśli jednak w tej odroczonej funkcji wystąpi błąd, standardowy blok try…catch nie będzie w stanie go obsłużyć. Rozważmy to na przykładzie:

W tym fragmencie kodu konstrukcja try…catch nie będzie w stanie przechwycić błędu, ponieważ wystąpi on później, poza zakresem bieżącego bloku. Komunikat „Wkrótce się kończy…” zostanie wyświetlony natychmiast, natomiast błąd pojawi się dopiero po trzech sekundach i w rezultacie pozostanie nieobsłużony.

Aby poprawnie obsługiwać takie błędy, należy użyć alternatywnych metod. Jedną z takich metod jest Promise. Ten obiekt służy do opisu wyniku operacji asynchronicznej: w przypadku pomyślnego zakończenia wywoływana jest metoda resolve, a w przypadku błędu – metoda reject. Do obsługi błędów obietnice udostępniają metodę catch().

Oto jeden ze sposobów przepisania przykładu z wykorzystaniem obietnic:

Teraz błąd zostanie wychwycony i wyświetlony w konsoli. Ta metoda ma zastosowanie zarówno do żądań sieciowych, jak i innych zadań, których wykonanie zajmuje czas.

Aby ułatwić pracę z kodem asynchronicznym, można użyć składni async/await, która czyni go bardziej zrozumiałym i podobnym do kodu synchronicznego. Jednak nawet podczas korzystania z tej konstrukcji ważne jest, aby obsługiwać ewentualne błędy za pomocą bloku try...catch w samej funkcji asynchronicznej.

Uaktualnijmy nasz poprzedni przykład i załóżmy, że wysyłamy żądanie do serwera w celu pobrania listy produktów. Ważne jest, aby uwzględnić możliwość wystąpienia błędu po stronie serwera, dlatego od razu uwzględnimy ten scenariusz w naszym podejściu:

• getProducts() to funkcja asynchroniczna, ale użycie słowa kluczowego async nadaje jej pozory synchronicznego wykonywania.
• await — wskazuje na konieczność oczekiwania na odpowiedź serwera.
• reject(new Error()) — zgłasza wyjątek w przypadku, gdy „serwer nie odpowiada”.
• W tym przykładzie konstrukcja try…catch obsłuży wyjątek, ponieważ używamy słów kluczowych async i wait. Opakowanie wait w try…catch jest poprawną praktyką, ponieważ pozwala na przechwytywanie występujących błędów.

Projektowanie obsługi błędów w aplikacji JavaScript: praktyczny przewodnik

Błędy są nieuniknioną częścią rozwoju większości aplikacji. Opracowanie systemu obsługi błędów pozwala zidentyfikować przyczyny awarii i przyczynia się do szybszego rozwiązywania problemów. W tym samouczku stworzymy niestandardowy system obsługi błędów w JavaScript.

Utwórz dokument o nazwie index.html, który będzie zawierał podstawową strukturę HTML.

W projektach praktycznych kod JavaScript jest zazwyczaj umieszczany w osobnym pliku z rozszerzeniem .js. Jednak w celach edukacyjnych kod umieścimy bezpośrednio w znaczniku