Перейти к содержимому

JavaScript: Обработка ошибок с помощью try...catch

Освоение обработки ошибок в JavaScript с помощью try...catch

Эффективная обработка ошибок имеет решающее значение для создания надежных приложений на JavaScript. В этой статье мы подробно рассмотрим использование конструкции try...catch, приводя практические примеры и рекомендации для улучшения ваших стратегий обработки ошибок.

Понимание конструкции try...catch в JavaScript

Конструкция try...catch в JavaScript — это мощный инструмент для управления исключениями — ошибками, возникающими во время выполнения программы. Она позволяет обрабатывать эти исключения корректно, не прерывая работу всего скрипта.

Базовый синтаксис try...catch

Вот простой пример, демонстрирующий базовую структуру try...catch:


Output appears here after Run.

В этом примере любая ошибка, возникающая внутри блока try, перехватывается блоком catch, где она может быть обработана без падения скрипта.

Обработка конкретных ошибок

Вы также можете обрабатывать определенные типы ошибок, анализируя объект ошибки:


Output appears here after Run.

В этом примере специально обрабатывается SyntaxError, который может возникнуть при парсинге JSON. Если перехваченная ошибка является экземпляром SyntaxError, она обрабатывается путем вывода конкретного сообщения. Если это не так, ошибка выбрасывается повторно, чтобы ее мог перехватить обработчик ошибок более высокого уровня или чтобы программа завершилась с ошибкой, указывая на необработанную ситуацию.

Использование finally

Блок finally выполняется после блоков try и catch, независимо от того, было ли выброшено или перехвачено исключение. Он полезен для освобождения ресурсов или выполнения задач очистки, независимо от результата try...catch:


Output appears here after Run.

Это гарантирует, что сообщение "Finally block executed" будет записано в консоль независимо от того, произошла ошибка или нет, демонстрируя, как finally можно использовать для выполнения необходимых действий по очистке.

Примеры реальных запросов к API

Использование API JSONPlaceholder — отличный способ потренироваться с обработкой реальных данных в JavaScript, особенно при работе с асинхронными запросами и обработке потенциальных ошибок, которые могут возникнуть во время этих операций. Ниже приведено несколько примеров из реальной практики с использованием API JSONPlaceholder, который предоставляет тестовые REST-данные для экспериментов, тестирования и прототипирования.

Пример 1: Получение постов и обработка ошибок

В этом примере мы получаем посты из API JSONPlaceholder с помощью fetch и обрабатываем потенциальные сетевые ошибки или проблемы с ответом API:


Output appears here after Run.

Этот скрипт выполняет HTTP-запрос для получения одного элемента списка задач. Он проверяет, успешен ли ответ (т.е. HTTP-статус 200-299). Если нет, выбрасывается ошибка со статусом ответа. Любые ошибки, будь то сетевые проблемы или результат оператора throw, перехватываются в блоке catch и логируются. Блок finally выполняется независимо от результата, гарантируя выполнение всех необходимых действий по очистке или завершению.

Пример 2: Отправка данных и обработка исключений

Здесь мы демонстрируем, как отправить данные на сервер с помощью метода POST и корректно обработать исключения:


Output appears here after Run.

В этом скрипте мы отправляем новый пост на сервер. Функция fetch используется с методом POST, включая заголовки и тело в формате JSON. Если ответ сервера указывает на ошибку (HTTP-статус не из диапазона 2xx), выбрасывается ошибка, которая затем перехватывается и обрабатывается в блоке catch. Независимо от успеха или неудачи, блок finally гарантирует, что операция помечается как завершенная.

Пример 3: Намеренное возникновение и обработка ошибки

В этом примере намеренно запрашивается ID пользователя, которого не существует в API JSONPlaceholder, что вызывает ошибку 404 Not Found, которую мы перехватим и обработаем.


Output appears here after Run.

Как работает этот пример

  1. Неверный конечный пункт API: Функция fetch вызывается с URL, содержащим некорректный ID пользователя (99999). Поскольку в JSONPlaceholder обычно нет пользователя с таким индексом, API вернет ошибку 404.
  2. Проверка корректности ответа: Код проверяет, находится ли статус ответа в диапазоне успешных (200-299). Поскольку ID пользователя недействителен, ответ API, скорее всего, будет 404, что активирует нашу обработку ошибок в проверке if (!response.ok).
  3. Выброс ошибки: Поскольку ответ не является успешным, выбрасывается ошибка с сообщением, включающим HTTP-статус, который в данном случае укажет на ошибку 404 Not Found.
  4. Блок catch: Блок catch перехватывает выброшенную ошибку и выводит конкретное сообщение с помощью console.log. Это дает четкую обратную связь о том, что пошло не так.
  5. Блок finally: Этот блок используется для очистки или финальных операций, указывая на завершение попытки независимо от результата.

Заключение

Эффективная обработка ошибок в JavaScript — ключ к созданию высококачественных и устойчивых приложений. Использование try...catch позволяет разработчикам корректно обрабатывать ошибки и сохранять контроль над потоком выполнения приложения, даже при возникновении непредвиденных проблем. Внедряя эти практики в свой JavaScript-код, вы делаете приложения более надежными и удобными для пользователей, улучшая общий пользовательский опыт и стабильность системы.

Примечание: try...catch перехватывает только синхронные ошибки или ошибки из ожидаемых промисов (awaited promises). Он не перехватывает ошибки из промисов, которые не были ожидаемыми (unawaited).

Практика

Какова цель конструкции try/catch в JavaScript?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.