59. Async Error Handling

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

Что такое Async Error Handling?

Async Error Handling – это набор техник и практик, которые позволяют нам предвидеть и обрабатывать ошибки, которые могут возникнуть в асинхронном коде. Асинхронный код, как правило, включает в себя работу с Promises, async/await, setTimeout, setInterval и другими функциями, которые не блокируют основной поток выполнения. Обработка ошибок в таком коде требует особого подхода, поскольку обычные блоки try...catch не всегда работают, как ожидается.

Promises и Error Handling

Promises предоставляют два основных способа обработки ошибок: .catch() и второй аргумент в .then().

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5; // Имитируем успешное или неудачное выполнение
      if (success) {
        resolve("Данные успешно получены!");
      } else {
        reject("Ошибка при получении данных!");
      }
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("Произошла ошибка:", error);
  });

В этом примере .catch() перехватывает любую ошибку, возникшую в цепочке Promise.

Также можно использовать второй аргумент .then():

fetchData()
  .then(
    data => { console.log(data); },
    error => { console.error("Произошла ошибка:", error); }
  );

Однако, .catch() предпочтительнее, так как он позволяет перехватывать ошибки, возникающие внутри обработчика .then().

Async/Await и Error Handling

async/await делает асинхронный код более читаемым и похожим на синхронный. Для обработки ошибок в async/await мы используем try...catch.

async function getData() {
  try {
    const data = await fetchData();
    console.log("Данные получены:", data);
  } catch (error) {
    console.error("Произошла ошибка:", error);
  }
}

getData();

В этом примере, если fetchData() отклонит Promise (вызовет reject), catch блок перехватит ошибку.

Жизненный пример

Представьте, что вы работаете над веб-приложением, которое отображает данные о погоде, полученные с внешнего API.

async function displayWeather(city) {
  try {
    const response = await fetch(`https://api.example.com/weather?city=${city}`); // Замените на реальный API
    if (!response.ok) {
      throw new Error(`Ошибка HTTP: ${response.status}`);
    }
    const data = await response.json();
    document.getElementById("weather-info").textContent = `Температура в ${city}: ${data.temperature}°C`;
  } catch (error) {
    console.error("Ошибка при получении данных о погоде:", error);
    document.getElementById("weather-info").textContent = "Не удалось получить данные о погоде.";
  }
}

// Вызов функции
displayWeather("London");

В этом примере мы используем try...catch для обработки ошибок, которые могут возникнуть при запросе к API (например, сетевая ошибка, неверный URL или ошибка сервера). Если происходит ошибка, мы выводим сообщение об ошибке в консоль и отображаем информативное сообщение пользователю на странице. Многие современные JavaScript фреймворки, такие как React, Vue и Angular, активно используют async/await и try/catch для обработки ошибок при работе с API.

Ключевые моменты

• Используйте .catch() для обработки ошибок в цепочках Promise.
• Используйте try...catch для обработки ошибок в функциях async/await.
• Всегда обрабатывайте ошибки в асинхронном коде, чтобы предотвратить неожиданное поведение приложения.
• Предоставляйте информативные сообщения об ошибках пользователю.
• Не забывайте логировать ошибки для облегчения отладки.

Интерактивный пример