Как проверять статус ответа при работе с fetch?

Как работает fetch и почему статус нужно проверять вручную

Метод fetch возвращает Promise, который разрешается объектом Response, как только сервер ответит. Однако Promise не отклоняется при HTTP-ошибках (например, 404, 500). Это означает, что код в блоке catch не выполнится, если сервер вернул ошибку, но соединение прошло успешно. Поэтому разработчик обязан самостоятельно проверять статус ответа.

Основные способы проверки

Самый простой способ — использовать свойство response.ok, которое возвращает true для статусов 200–299. Если нужно больше контроля, можно обратиться к response.status (число) или response.statusText (текст).

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

В этом примере, если сервер вернёт 404, мы выбросим исключение, которое попадёт в catch. Без такой проверки код продолжил бы выполнение и попытался бы распарсить тело ошибки как JSON, что часто приводит к непредсказуемому поведению.

Практические рекомендации

• Всегда проверяйте response.ok или response.status перед обработкой данных.
• Для разных статусов можно выполнять разные действия: например, при 401 перенаправлять на логин, при 500 показывать сообщение об ошибке.
• Используйте async/await для более читаемого кода:

async function loadData() {
  const response = await fetch('/api/data');
  if (!response.ok) {
    throw new Error('Ошибка загрузки: ' + response.status);
  }
  return response.json();
}

Вывод

Проверка статуса ответа — обязательный шаг при работе с fetch. Она позволяет корректно обрабатывать ошибки сервера и избегать ложных успешных результатов. Применяйте этот подход во всех проектах, где используется fetch, чтобы сделать код надёжным и предсказуемым.