HTTP-коды состояния

Каждый раз, когда браузер загружает страницу, отправляет форму или JavaScript делает вызов fetch(), сервер отвечает трёхзначным HTTP-кодом состояния. Этот код сообщает клиенту, был ли запрос успешным, был ли он перенаправлен, завершился ли ошибкой по вине клиента или по вине сервера. Браузер использует его автоматически — следует перенаправлениям, показывает собственную страницу ошибки для некоторых кодов и повторно использует кэшированное содержимое для других, — но как разработчик вы также читаете эти коды напрямую: форма отправляется, и вы ветвитесь на основе ответа, или fetch() разрешается и вы проверяете response.ok (что просто означает «статус в диапазоне 200–299»).

Здесь вы найдёте список кодов состояния ответа протокола передачи гипертекста (HTTP). Эти коды отвечают на запрос клиента к серверу — независимо от того, использует ли запрос GET, POST или другой HTTP-метод — и они сгруппированы по 5 классам в зависимости от первой цифры. Знание этих кодов помогает отлаживать неработающие ссылки, неправильные URL, неудавшиеся отправки форм и неожиданные ответы API. Рассмотрим каждый класс:

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

Когда вы отправляете форму или вызываете API с помощью fetch(), запрос выполняется успешно (промис разрешается) даже когда сервер возвращает ошибку 4xx или 5xx — ответ 404 или 500 по-прежнему является допустимым HTTP-ответом, а не сетевой ошибкой. Поэтому вы должны самостоятельно проверять статус. Удобным сокращением является response.ok, который равен true только для диапазона 200–299; для всего остального вы ветвитесь на основе response.status, чтобы реагировать соответствующим образом:

const form = document.querySelector("#signup");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const response = await fetch("/api/signup", {
    method: "POST",
    body: new FormData(form),
  });

  if (response.ok) {
    // 200–299: success
    window.location.href = "/welcome";
  } else if (response.status === 401) {
    showMessage("Please log in first.");
  } else if (response.status === 422) {
    // Validation errors returned as JSON
    const data = await response.json();
    showMessage(data.error);
  } else if (response.status === 429) {
    // Rate limited — respect the Retry-After header
    const wait = response.headers.get("Retry-After");
    showMessage(`Too many attempts. Try again in ${wait}s.`);
  } else if (response.status >= 500) {
    showMessage("Server error — please try again later.");
  } else {
    showMessage(`Unexpected error (${response.status}).`);
  }
});

Обратите внимание, что fetch() отклоняется только при реальных сетевых проблемах (нет соединения, блокировка CORS, ошибка DNS), поэтому оборачивание вызова в try…catch обрабатывает их, тогда как if/else выше обрабатывает сам HTTP-статус.

1xx: Информационные

2xx: Успешные

3xx: Перенаправления

Коды, не перечисленные здесь (например, 305 и 306), являются устаревшими, редкими или специфичными для расширений.

4xx: Ошибки клиента

Коды, не перечисленные здесь (например, 419, 420 и некоторые в диапазоне 423–431), являются редкими, специфичными для фреймворков или нестандартными. Некоторые — например, 421 (Misdirected Request, используется в HTTP/2) и 451 выше — стандартизированы, но редко встречаются в повседневной работе.

5xx: Ошибки сервера

Связанные главы

Статус, возвращаемый сервером, часто зависит от самого запроса. Для более глубокого изучения см.:

• HTTP-методы — GET, POST и другие, которые определяют поведение некоторых перенаправлений (302 против 307).
• HTML-формы — как отправка форм инициирует запросы, которые могут возвращать коды 303, 422 или 429.
• HTML URL (Uniform Resource Locators) — адреса, на которые указывают перенаправления 3xx и ответы 404.

Практика