JavaScript Academy · Урок

Обработка ошибок и кодов состояния

Проверяйте response.ok и обрабатывайте сбои.

«Обработка ошибок и кодов состояния» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

fetch не отклоняет промисы при HTTP-ошибках

Есть важный нюанс: fetch отклоняет промис только при сбоях сети. Ответ с кодом 404 или 500 всё равно считается успешно полученным. Вы должны самостоятельно проверить статус.

Проверка response.ok

response.ok имеет значение true только для кодов статуса в диапазоне от 200 до 299. Используйте его для обнаружения HTTP-ошибок.

const response = await fetch(url);
if (!response.ok) {
  console.log("HTTP error:", response.status);
}

Чтение кода статуса

response.status содержит числовой код, а response.statusText — краткое сообщение. Используйте их значения, чтобы обрабатывать конкретные случаи.

if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");

Выброс ошибки при плохом статусе

Удобный шаблон — выбрасывать Error, если ответ не является успешным, чтобы один блок catch обрабатывал и сетевые сбои, и ошибки HTTP.

if (!response.ok) {
  throw new Error("Request failed: " + response.status);
}

Обёртывание в try/catch

При использовании async/await оберните весь процесс в try/catch. Сетевые ошибки отклоняют Promise и попадают в catch; выброшенная вами ошибка HTTP поступает туда же.

try {
  const res = await fetch(url);
  if (!res.ok) throw new Error("Status " + res.status);
  const data = await res.json();
} catch (err) {
  console.log("Failed:", err.message);
}

Различие между типами ошибок

Отклонённый fetch обычно означает, что сервер недоступен, произошёл сбой DNS или CORS заблокировал запрос. Ответ с неуспешным статусом означает, что сервер ответил, но сообщил об ошибке. Если это важно, обрабатывайте эти случаи по-разному.

Чтение тел ошибок

API часто возвращают JSON с описанием ошибки. Прочитайте его до выбрасывания ошибки, чтобы показать полезное сообщение.

if (!res.ok) {
  const errBody = await res.json().catch(() => ({}));
  throw new Error(errBody.message || ("Status " + res.status));
}

Распространённые коды статуса

Запомните группы кодов: 2xx — успех, 3xx — перенаправление, 4xx — ошибка клиента (вы отправили что-то неправильно), 5xx — ошибка сервера (виноват сервер). Fetch автоматически следует большинству перенаправлений.

Повторно используемый вспомогательный код

Вынесите проверку в одну вспомогательную функцию, чтобы каждый вызов обрабатывал ошибки одинаково.

async function getJSON(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return res.json();
}

Повторная попытка после временных сбоев

При нестабильной сети можно повторить запрос после ошибки 5xx или сетевой ошибки. Ограничьте число повторов и добавьте задержку, чтобы не перегружать сервер.

for (let i = 0; i < 3; i++) {
  try { return await getJSON(url); }
  catch (e) { if (i === 2) throw e; }
}

Показ ошибки пользователю

Перехватывайте ошибки на уровне пользовательского интерфейса, чтобы показывать понятное сообщение вместо пустого экрана. Никогда не позволяйте необработанному отклонению промиса молча скрывать неудачный запрос.

getJSON(url)
  .then(render)
  .catch(() => showToast("Could not load data"));

Быстрая проверка

Обработка ошибок fetch.

Повторение

Fetch отклоняет промис только при сбоях сети, поэтому всегда проверяйте response.ok/response.status и выбрасывайте ошибку при плохих статусах. Оборачивайте вызовы в try/catch, читайте тела ошибок для получения сообщений, выносите проверку во вспомогательную функцию и показывайте понятные ошибки в пользовательском интерфейсе.

Часто задаваемые вопросы

Урок «Обработка ошибок и кодов состояния» бесплатный?

Да — полный текст урока «Обработка ошибок и кодов состояния» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Обработка ошибок и кодов состояния»?

Проверяйте response.ok и обрабатывайте сбои. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Обработка ошибок и кодов состояния»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy