Как HTTP помогает общаться между сервером и клиентом на JavaScript?

Как HTTP помогает общаться между сервером и клиентом на JavaScript?

HTTP (HyperText Transfer Protocol) — это основной протокол коммуникации в вебе. Для JavaScript на клиенте (браузере) это единственный способ общаться с сервером и получать данные.

Основные концепции HTTP

HTTP — это запрос-ответ протокол:

• Клиент инициирует запрос (Request)
• Сервер отправляет ответ (Response)
• После ответа соединение закрывается (в HTTP/1.1) или переиспользуется

Основные компоненты запроса:

• HTTP метод (GET, POST, PUT, DELETE, PATCH)
• URL — адрес ресурса
• Headers — метаданные запроса
• Body — данные (для POST/PUT)

Компоненты ответа:

• Status Code (200, 404, 500)
• Headers — метаданные ответа
• Body — содержимое ответа

HTTP методы

// GET — получение данных (безопасный, идемпотентный)
fetch('/api/users')
  .then(res => res.json())
  .then(data => console.log(data));

// POST — создание нового ресурса
fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John', email: 'john@example.com' })
})
  .then(res => res.json());

// PUT — полное обновление ресурса
fetch('/api/users/123', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Jane', email: 'jane@example.com' })
});

// PATCH — частичное обновление ресурса
fetch('/api/users/123', {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Janet' })
});

// DELETE — удаление ресурса
fetch('/api/users/123', {
  method: 'DELETE'
});

Status Codes (коды ответов)

Разделены на категории:

2xx — Успех

• 200 OK — запрос выполнен успешно
• 201 Created — ресурс создан
• 204 No Content — успех, но нет содержимого в ответе

3xx — Редирект

• 301 Moved Permanently — ресурс перемещён
• 302 Found — временный редирект
• 304 Not Modified — кэш актуален, не передавай тело

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

• 400 Bad Request — неверные данные
• 401 Unauthorized — не авторизован
• 403 Forbidden — нет доступа
• 404 Not Found — ресурс не найден

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

• 500 Internal Server Error — ошибка на сервере
• 503 Service Unavailable — сервис недоступен

// Обработка status codes
fetch('/api/users')
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        // Редирект на логин
        window.location.href = '/login';
      } else if (response.status === 404) {
        throw new Error('Ресурс не найден');
      }
      throw new Error(`HTTP ${response.status}`);
    }
    return response.json();
  })
  .catch(error => console.error(error));

Headers (заголовки)

Важные request headers:

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',          // Тип данных
    'Authorization': 'Bearer token123',           // Авторизация
    'X-Requested-With': 'XMLHttpRequest',        // AJAX запрос
    'Accept': 'application/json',                // Ожидаемый формат
    'User-Agent': navigator.userAgent            // Браузер
  },
  body: JSON.stringify({ name: 'John' })
});

Важные response headers:

fetch('/api/users')
  .then(response => {
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Cache-Control'));
    console.log(response.headers.get('Set-Cookie')); // Cookies
    return response.json();
  });

Fetch API — современный способ

Базовая структура:

fetch(url, options)
  .then(response => response.json())       // Парсим JSON
  .catch(error => console.error(error));   // Обработка ошибок

С async/await (рекомендуется):

async function getUsers() {
  try {
    const response = await fetch('/api/users');
    if (!response.ok) throw new Error('Failed to fetch');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

const users = await getUsers();

Практический пример: API клиент

class APIClient {
  constructor(baseURL = '/api') {
    this.baseURL = baseURL;
  }

  async request(endpoint, options = {}) {
    const url = `${this.baseURL}${endpoint}`;
    const headers = {
      'Content-Type': 'application/json',
      ...options.headers
    };

    // Добавляем токен если есть
    const token = localStorage.getItem('auth_token');
    if (token) {
      headers['Authorization'] = `Bearer ${token}`;
    }

    try {
      const response = await fetch(url, {
        ...options,
        headers
      });

      // Обработка 401 — перенаправить на логин
      if (response.status === 401) {
        localStorage.removeItem('auth_token');
        window.location.href = '/login';
        return;
      }

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      // Если статус 204, нет содержимого
      if (response.status === 204) {
        return null;
      }

      return await response.json();
    } catch (error) {
      console.error('API Error:', error);
      throw error;
    }
  }

  get(endpoint) {
    return this.request(endpoint);
  }

  post(endpoint, data) {
    return this.request(endpoint, {
      method: 'POST',
      body: JSON.stringify(data)
    });
  }

  put(endpoint, data) {
    return this.request(endpoint, {
      method: 'PUT',
      body: JSON.stringify(data)
    });
  }

  delete(endpoint) {
    return this.request(endpoint, {
      method: 'DELETE'
    });
  }
}

// Использование
const api = new APIClient('/api/v1');

// Получение данных
const users = await api.get('/users');

// Создание
await api.post('/users', { name: 'John', email: 'john@example.com' });

// Обновление
await api.put('/users/123', { name: 'Jane' });

// Удаление
await api.delete('/users/123');

CORS (Cross-Origin Resource Sharing)

Когда JavaScript делает запрос на другой домен, браузер требует разрешение:

// Браузер блокирует этот запрос:
fetch('https://other-domain.com/api/data'); // CORS error!

// Решение: сервер должен отправить нужные headers
// Сервер (Python/FastAPI):
from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=['https://yourdomain.com'],
    allow_methods=['GET', 'POST'],
    allow_headers=['Content-Type', 'Authorization']
)

Кэширование HTTP

// Сервер может сказать клиенту:
Cache-Control: max-age=3600        // Кэшировать на 1 час
ETag: "33a64df"

// Клиент при следующем запросе:
If-None-Match: "33a64df"
// Сервер ответит 304 Not Modified, не отправляя тело

Заключение

HTTP в JavaScript:

1. Fetch API — современный стандарт для HTTP запросов
2. Методы: GET, POST, PUT, DELETE, PATCH для CRUD операций
3. Status codes — определяют результат запроса
4. Headers — передают метаданные и авторизацию
5. CORS — механизм безопасности для cross-origin запросов
6. Обработка ошибок — критична для надёжного приложения