В чем разница между группами кодов ответа?

Разница между группами кодов ответа HTTP

HTTP статус коды разделены на 5 групп (классов) по первой цифре. Каждая группа указывает на категорию результата запроса.

1xx - Informational (Информационные)

Диапазон: 100-199 Значение: Запрос получен и обработка продолжается

100 Continue
  - Клиент может отправлять тело запроса
  - Используется с Expect: 100-continue

101 Switching Protocols
  - Сервер переходит на другой протокол (WebSocket)
  - Upgrade: websocket

102 Processing
  - Сервер еще обрабатывает запрос
  - Расширение WebDAV

Пример использования:

const response = await fetch('/api/upload', {
  method: 'POST',
  headers: {
    'Expect': '100-continue'
  },
  body: largeFile
});
// Сервер отправит 100 Continue перед отправкой данных

2xx - Success (Успешные)

Диапазон: 200-299 Значение: Запрос успешно обработан

200 OK
  - Стандартный успешный ответ
  - Используется для GET, POST, PUT с телом ответа

201 Created
  - Ресурс успешно создан
  - Используется при POST (создание ресурса)
  - Обычно возвращает Location header с URL нового ресурса

202 Accepted
  - Запрос принят, но еще обрабатывается
  - Используется для асинхронных операций

204 No Content
  - Запрос успешен, но нет контента в ответе
  - Используется для DELETE, некоторых PUT

206 Partial Content
  - Часть контента (для Range requests)
  - Используется для загрузки файлов по частям

Практические примеры:

// 200 OK
const user = await fetch('/api/users/1').then(r => r.json());
// { id: 1, name: 'John' }

// 201 Created
const newUser = await fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'Jane' })
}).then(r => r.json());
// { id: 2, name: 'Jane' }

// 204 No Content
const response = await fetch('/api/users/1', { method: 'DELETE' });
// Нет тела ответа, но статус успешный

// 206 Partial Content
const video = await fetch('/video.mp4', {
  headers: { 'Range': 'bytes=0-1023' }
});
// Загружает только первые 1024 байта

3xx - Redirection (Перенаправление)

Диапазон: 300-399 Значение: Требуется дополнительное действие для завершения запроса

300 Multiple Choices
  - Несколько вариантов ответа
  - Редко используется

301 Moved Permanently
  - Ресурс переместился навсегда
  - Браузер обновляет закладки
  - Кэшируется

302 Found
  - Ресурс временно в другом месте
  - Браузер автоматически перенаправляет
  - Не кэшируется

304 Not Modified
  - Клиентская копия актуальна
  - Нет тела ответа
  - Ускоряет загрузку

307 Temporary Redirect
  - Как 302, но клиент НЕ меняет метод запроса
  - POST остается POST

308 Permanent Redirect
  - Как 301, но клиент НЕ меняет метод запроса
  - POST остается POST

Разница между 301 и 307:

// Client: POST /login -> Server: 301 Moved Permanently
// Client автоматически делает: GET /new-login (МЕНЯЕТ метод)

// Client: POST /login -> Server: 307 Temporary Redirect
// Client автоматически делает: POST /new-login (СОХРАНЯЕТ метод)

Практические примеры:

// 301 Moved Permanently
// old-site.com -> new-site.com
// Браузер обновляет закладку

// 302 Found
await fetch('/api/users/1');
// Сервер отправит 302 и Location: /api/v2/users/1
// Браузер автоматически перенаправит

// 304 Not Modified
const response = await fetch('/image.jpg', {
  headers: { 'If-Modified-Since': 'Wed, 21 Oct 2025 07:28:00 GMT' }
});
if (response.status === 304) {
  console.log('Используй кэшированную копию');
}

4xx - Client Error (Ошибки клиента)

Диапазон: 400-499 Значение: Клиент отправил неправильный запрос

400 Bad Request
  - Синтаксически неправильный запрос
  - Невалидный JSON, неправильные параметры

401 Unauthorized
  - Нужна аутентификация
  - Отсутствует или неправильный токен

403 Forbidden
  - Клиент аутентифицирован, но нет прав доступа
  - Может видеть ресурс, но не может использовать

404 Not Found
  - Ресурс не существует
  - Самый частый код

405 Method Not Allowed
  - Метод HTTP не разрешен
  - GET /api/users/{id} существует, POST нет

409 Conflict
  - Конфликт с текущим состоянием
  - Версионирование, дублирование

410 Gone
  - Ресурс безвозвратно удален
  - Отличается от 404: это намеренное удаление

422 Unprocessable Entity
  - Валидация не прошла
  - Синтаксис правильный, но семантика неправильная

429 Too Many Requests
  - Слишком много запросов (rate limiting)
  - Нужно ждать

Практические примеры:

// 400 Bad Request
await fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify({ name: '' }) // Пустое имя
});
// { error: 'Name is required' }

// 401 Unauthorized
const response = await fetch('/api/protected');
if (response.status === 401) {
  // Перенаправить на логин
  window.location.href = '/login';
}

// 403 Forbidden
await fetch('/api/admin/settings');
// { error: 'Only admins can access' }

// 404 Not Found
await fetch('/api/users/99999');
// { error: 'User not found' }

// 422 Unprocessable Entity
await fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify({ email: 'invalid-email' })
});
// { error: 'Invalid email format' }

// 429 Too Many Requests
const response = await fetch('/api/search', {
  query: 'test' // 100 запросов в секунду
});
if (response.status === 429) {
  const retryAfter = response.headers.get('Retry-After');
  console.log(`Повтори через ${retryAfter} секунд`);
}

5xx - Server Error (Ошибки сервера)

Диапазон: 500-599 Значение: Сервер не смог обработать валидный запрос

500 Internal Server Error
  - Неожиданная ошибка на сервере
  - Что-то пошло не так, детали скрыты

501 Not Implemented
  - Функция не реализована
  - Метод HTTP не поддерживается

502 Bad Gateway
  - Gateway/proxy получил неправильный ответ
  - Проблема между proxy и backend

503 Service Unavailable
  - Сервис временно недоступен
  - Обслуживание, перегруженность

504 Gateway Timeout
  - Proxy не получил ответ вовремя
  - Backend слишком долго отвечает

Практические примеры:

// 500 Internal Server Error
await fetch('/api/process');
// { error: 'Something went wrong' }

// 503 Service Unavailable
const response = await fetch('/api/data');
if (response.status === 503) {
  console.log('Сервер на обслуживании');
  // Показать пользователю сообщение
}

// 504 Gateway Timeout
const response = await fetch('/api/heavy-operation', {
  signal: AbortSignal.timeout(30000) // 30 сек timeout
});
if (response.status === 504) {
  console.log('Операция заняла слишком долго');
}

Сводная таблица

Класс | Диапазон | Значение              | Пример
──────┼──────────┼───────────────────────┼────────────────────
1xx  | 100-199  | Информация            | 100 Continue
2xx  | 200-299  | Успех                 | 200 OK, 201 Created
3xx  | 300-399  | Перенаправление       | 301 Moved, 304 Not Modified
4xx  | 400-499  | Ошибка клиента        | 400 Bad Request, 404 Not Found
5xx  | 500-599  | Ошибка сервера        | 500 Internal Server Error

Обработка в приложении

async function handleResponse(response) {
  if (response.ok) {  // 2xx
    return await response.json();
  }
  
  // 3xx - браузер обрабатывает автоматически
  // 4xx - клиентская ошибка
  if (response.status >= 400 && response.status < 500) {
    switch (response.status) {
      case 400:
        console.error('Неправильный запрос');
        break;
      case 401:
        // Перенаправить на логин
        window.location.href = '/login';
        break;
      case 404:
        console.error('Ресурс не найден');
        break;
      default:
        console.error('Ошибка клиента:', response.status);
    }
  }
  
  // 5xx - серверная ошибка
  if (response.status >= 500) {
    console.error('Ошибка сервера:', response.status);
    // Показать пользователю уведомление
  }
}

Заключение

5 групп статус кодов:

• 1xx - информационные (редко используются на frontend)
• 2xx - успех (2xx-OK это не одна категория, каждый значит разное)
• 3xx - перенаправление (браузер обрабатывает часто автоматически)
• 4xx - ошибка клиента (неправильный запрос)
• 5xx - ошибка сервера (проблема на сервере)

Как frontend разработчик, ты часто работаешь с 2xx, 3xx (через headers), 4xx и 5xx кодами.