RU (Русский) Перевод

Здравствуйте, начинающие программисты! Сегодня мы отправимся в увлекательное путешествие в мир обработки ошибок в JavaScript. Не волнуйтесь, если вы новички в программировании - я проведу вас через каждый шаг с множеством примеров и объяснений. К концу этого урока вы будете ловить ошибки как профессионал!

Стatement try...catch в JavaScript

Представьте, что вы учитесь ездить на велосипеде. Вы можете упасть несколько раз, но это нормально - вы встаете иtry снова. В программировании мы используем statement try...catch, чтобы делать что-то похожее. Мы "пытаемся" запустить код, и если он "падает" (выбрасывает ошибку), мы "ловим" его и обрабатываем优雅чно.

Давайте рассмотрим простой пример:

try {
  // Код, который может вызвать ошибку
  console.log(nonExistentVariable);
} catch (error) {
  // Код для обработки ошибки
  console.log("Ой! Произошла ошибка:", error.message);
}

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

Statement try...catch...finally в JavaScript

Иногда мы хотим выполнить код независимо от того, произошла ли ошибка или нет. Тогда на помощь приходит блок finally. Это как сказать: "Независимо от того, что произойдет, убедитесь, что это сделать!"

try {
  console.log("Давайте试着 разделить на ноль!");
  let result = 10 / 0;
  console.log("Результат:", result);
} catch (error) {
  console.log("О, нет! Произошла ошибка:", error.message);
} finally {
  console.log("Этот код всегда будет выполнен, независимо от ошибки!");
}

В этом примере, despite the fact that деление на ноль вызывает ошибку, блок finally все равно выполняется.

Statement throw в JavaScript

Иногда мы хотим создать свои собственные ошибки. Мы можем сделать это с помощью statement throw. Это как быть судьей в игре и объявить фол, когда вы его видите.

function checkAge(age) {
  if (age < 0) {
    throw new Error("Возраст не может быть отрицательным!");
  }
  console.log("Возраст действителен:", age);
}

try {
  checkAge(-5);
} catch (error) {
  console.log("Ловим ошибку:", error.message);
}

Здесь мы выбрасываем свою собственную ошибку, когда кто-то пытается использовать отрицательный возраст.

Вложенные блоки try...catch

Как вложенные娃娃, мы можем вложить блоки try...catch друг в друга. Это полезно, когда мы хотим обрабатывать ошибки на разных уровнях нашего кода.

try {
  try {
    throw new Error("Ой!");
  } catch (innerError) {
    console.log("Внутренний блок `catch`:", innerError.message);
    throw innerError; // Повторный выброс ошибки
  }
} catch (outerError) {
  console.log("Внешний блок `catch`:", outerError.message);
}

В этом примере мы ловим ошибку во внутреннем блоке, логируем ее и затем повторно выбрасываем, чтобы она была caught во внешнем блоке.

Повторный выброс ошибки

Иногда мы хотим caught ошибку, сделать с ней что-то и затем передать ее для обработки elsewhere. Это называется повторным выбросом ошибки.

function doSomethingRisky() {
  throw new Error("Опасность, Вилли Робинсон!");
}

try {
  doSomethingRisky();
} catch (error) {
  console.log("Логирование ошибки:", error.message);
  throw error; // Повторный выброс ошибки
}

Здесь мы caught ошибку, логируем ее и затем повторно выбрасываем для обработки другой частью нашего кода.

Условные блоки catch

Иногда мы можем хотеть обрабатывать разные типы ошибок по-разному. Мы можем сделать это, проверив тип ошибки в блоке catch.

try {
  let randomNumber = Math.random();
  if (randomNumber < 0.5) {
    throw new TypeError("Тип ошибки!");
  } else {
    throw new RangeError("Ошибка диапазона!");
  }
} catch (error) {
  if (error instanceof TypeError) {
    console.log("Обработка TypeError:", error.message);
  } else if (error instanceof RangeError) {
    console.log("Обработка RangeError:", error.message);
  } else {
    console.log("Неизвестная ошибка:", error.message);
  }
}

Этот пример показывает, как мы можем обрабатывать разные типы ошибок по-разному.

Statement try...catch с методом setTimeout()

工作时使用异步代码时，错误处理可能会很复杂. Давайте посмотрим, как обрабатывать ошибки в функции setTimeout().

try {
  setTimeout(() => {
    throw new Error("Async error!");
  }, 1000);
} catch (error) {
  console.log("This won't catch the error!");
}

// Correct way:
setTimeout(() => {
  try {
    throw new Error("Async error!");
  } catch (error) {
    console.log("Caught async error:", error.message);
  }
}, 1000);

Первая попытка не сработает, потому что ошибка выбрасывается после того, как блок try...catch已完成 выполнение. Вторая попытка правильно caught ошибку.

Ошибки на основе Promise

工作时使用 Promises, мы используем .catch() для обработки ошибок. Это как блок catch, но для асинхронных операций.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error("Failed to fetch data"));
    }, 1000);
  });
}

fetchData()
  .then(data => console.log("Data:", data))
  .catch(error => console.log("Error:", error.message));

В этом примере мы симулируем失败的 запрос данных и caught resulting ошибку.

Типы ошибок в JavaScript

JavaScript имеет несколько встроенных типов ошибок. Вот таблица, резюмирующая их:

Тип ошибки	Описание
Error	Общий тип ошибки
SyntaxError	Происходит при синтаксической ошибке в коде
ReferenceError	Происходит при引用 несуществующей переменной
TypeError	Происходит, когда значение не того типа, который预期
RangeError	Происходит, когда значение не в expected диапазоне
URIError	Происходит при incorrect использовании глобальных функций обработки URI
EvalError	Происходит при incorrect использовании функции eval()

Понимание этих типов ошибок может помочь вам писать более точный код обработки ошибок.

И вот и все! Вы только что прошли crash course по обработке ошибок в JavaScript. Помните, ошибки не ваши враги - они ценный feedback, который помогает вам писать лучшее, более надежное код. Продолжайте практиковаться, stay curious, и счастливого кодирования!

Credits: Image by storyset