JS об'єкт try...catch

Загальний опис

try...catch — це конструкція в JavaScript, яка дозволяє обробляти помилки, що виникають під час виконання коду в блоці try. Якщо у блоці try виникає помилка, виконання припиняється, і управління передається в блок catch, де можна обробити цю помилку. Це дозволяє уникнути аварійного завершення програми.

Основи використання:

У блоці try розміщується код, який може викликати помилки. Якщо в коді виникає помилка, її можна перехопити в блоці catch, де ми отримуємо деталі помилки через параметр (найчастіше це error або e).

try {
  let result = someFunction();
} catch (error) {
  console.error("Помилка:", error.message);
}

У цьому прикладі, якщо someFunction() викликає помилку, її буде оброблено в блоці catch.

Важливі моменти:

Ловлення помилок: Використовуйте конструкцію для безпечного виконання коду, який може викликати помилки, наприклад, робота з API або обчисленням чисел.
Обробка помилок: У блоці catch можна виконати додаткові дії, такі як виведення повідомлення про помилку, спроба перезапуску процесу або запис помилки в лог.
Робота з асинхронним кодом: У асинхронних функціях можна поєднувати try...catch з async...await для ефективної обробки помилок.

async function fetchData(url) {
  try {
    let response = await fetch(url);
    if (!response.ok) throw new Error("Помилка з'єднання");
    let data = await response.json();
    return data;
  } catch (error) {
    console.error("Помилка при завантаженні даних:", error.message);
  }
}

Тут помилки, що виникають під час запиту або обробки відповіді, будуть перехоплені і оброблені в блоці catch.

Порада:	Ніколи не ігноруйте помилки, якщо вони виникають, а особливо в асинхронних функціях. Помилки можуть мати серйозні наслідки, тому їх потрібно обробляти або хоча б логувати для подальшого аналізу.
Порада:	Інколи має сенс використовувати `finally` разом з `try...catch`. Блок `finally` виконується завжди, незалежно від того, чи сталася помилка. Це корисно, коли потрібно очистити ресурси, наприклад, закрити відкриті файли або з'єднання.
Порада:	Задавайте більш детальні повідомлення про помилки в блоках `catch`. Використовуйте властивість `error.stack`, щоб відстежити стек викликів, який дасть більше контексту і допоможе швидше знайти місце виникнення проблеми.

Синтаксис

try {
  // код, який може викликати помилку
} catch (error) {
  // код обробки помилки
}

Переглядачі

Переглядач
	1	1	1	4	12

Переглядач
	4.4	18	4	1

Переглядач
	0.10.0	1.0

Приклади

У цьому прикладі користувач має ввести своє ім'я та вік у форму. Якщо він не заповнив будь-яке з полів або ввів некоректні дані (наприклад, літери замість чисел), конструкція try...catch перехопить помилку і виведе повідомлення з описом помилки. Це дозволяє безпечно обробляти невірні ввідні дані без зупинки виконання програми.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/QwLpedV">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі використано асинхронний запит для отримання даних з API. Якщо відповідь не є успішною або виникає помилка на етапі завантаження, її перехоплює блок catch, і користувач отримує відповідне повідомлення.

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) throw new Error("Користувач не знайдений");
    const userData = await response.json();
    console.log(userData);
  } catch (error) {
    console.error("Помилка при отриманні даних користувача:", error.message);
  }
}

fetchUserData(123);

У цьому прикладі цикл намагається викликати метод toString() на кожному елементі масиву. Якщо елемент не є об'єктом або рядком, викликається помилка, яка обробляється в блоці catch, забезпечуючи стабільну роботу циклу навіть за наявності некоректних даних.

const items = [1, 2, 3, null, 4, 5];

for (let i = 0; i < items.length; i++) {
  try {
    console.log("Обробка елемента:", items[i].toString());
  } catch (error) {
    console.error(`Помилка при обробці елемента на індексі ${i}:`, error.message);
  }
}

JS довідник

Events

JavaScript

Statements

Наповнення JS розділу