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

HTTP методы — основные различия

HTTP методы (глаголы) определяют действие, которое клиент хочет выполнить с ресурсом на сервере. Каждый метод имеет своё предназначение и семантику.

Основные HTTP методы

GET — получить данные

// Безопасный, идемпотентный метод
// Не модифицирует данные на сервере
// Параметры в URL query string

// Fetch API
fetch("/api/users/123")
  .then(r => r.json())
  .then(data => console.log(data));

// Axios
axios.get("/api/users/123", {
  params: { filter: "active", page: 1 }
})
.then(res => console.log(res.data));

// Результат
// GET /api/users/123?filter=active&page=1

POST — создать ресурс

// Небезопасный, неидемпотентный
// Каждый запрос создаёт НОВЫЙ ресурс
// Данные в теле запроса

// Fetch API
fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    name: "John",
    email: "john@example.com"
  })
})
.then(r => r.json())
.then(data => console.log(data)); // { id: 1, name: "John" }

// Axios
axios.post("/api/users", {
  name: "John",
  email: "john@example.com"
})
.then(res => console.log(res.data));

// ⚠️ Если отправить POST запрос дважды — создадутся 2 пользователя
// Это называется "неидемпотентный"

PUT — заменить весь ресурс

// Безопасный, идемпотентный
// Заменяет ВЕСЬ ресурс полностью
// Обычно требует указать все поля

// Fetch API
fetch("/api/users/123", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    name: "Jane",
    email: "jane@example.com",
    age: 30,
    phone: "+123456789"
  })
})
.then(r => r.json())
.then(data => console.log(data));

// Axios
axios.put("/api/users/123", {
  name: "Jane",
  email: "jane@example.com",
  age: 30,
  phone: "+123456789"
})
.then(res => console.log(res.data));

// ✅ Идемпотентный: отправить PUT дважды = один результат
// Второй PUT снова заменит на те же данные

PATCH — обновить часть ресурса

// Небезопасный, может быть неидемпотентный
// Обновляет ТОЛЬКО указанные поля
// Остальные поля остаются неизменными

// Fetch API
fetch("/api/users/123", {
  method: "PATCH",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    name: "Jane" // Только изменяем имя
    // Остальное (email, age, phone) не трогаем
  })
})
.then(r => r.json())
.then(data => console.log(data));

// Axios
axios.patch("/api/users/123", {
  name: "Jane"
})
.then(res => console.log(res.data));

// Результат
// { id: 123, name: "Jane", email: "john@example.com", age: 30 }
// Только name изменился

DELETE — удалить ресурс

// Небезопасный, идемпотентный
// Удаляет ресурс
// Повторный вызов = то же самое (ресурс уже удалён)

// Fetch API
fetch("/api/users/123", {
  method: "DELETE"
})
.then(r => r.json())
.then(data => console.log(data)); // { success: true }

// Axios
axios.delete("/api/users/123")
.then(res => console.log(res.data));

// ✅ Идемпотентный: удалить дважды = удален один раз
// Второе удаление вернёт ошибку 404 (Not Found)

Сравнение PUT vs PATCH

// Исходные данные пользователя
// { id: 1, name: "John", email: "john@example.com", age: 30 }

// PUT — заменить полностью
PUT /api/users/1
{ name: "Jane", email: "jane@example.com" }
// Результат: { id: 1, name: "Jane", email: "jane@example.com" }
// age удалился! (потому что не указали в PUT)

// PATCH — обновить часть
PATCH /api/users/1
{ name: "Jane" }
// Результат: { id: 1, name: "Jane", email: "john@example.com", age: 30 }
// age остался! (потому что не указали — не трогаем)

HEAD — получить заголовки

// Как GET, но без тела ответа
// Используется для проверки наличия ресурса, размера файла и т.п.

// Fetch API
fetch("/api/users/123", { method: "HEAD" })
.then(r => {
  console.log(r.headers.get("Content-Length")); // Размер
  console.log(r.headers.get("Last-Modified")); // Дата изменения
});

// Полезно для больших файлов
// Вместо загрузки файла сначала проверяем его размер

OPTIONS — узнать допустимые методы

// Используется для CORS запросов
// Браузер отправляет OPTIONS перед POST/PUT/DELETE запросами

// Fetch API (браузер отправляет OPTIONS автоматически при CORS)
fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "John" })
});

// Браузер сначала отправляет:
// OPTIONS /api/users
// Access-Control-Request-Method: POST
// Access-Control-Request-Headers: content-type

// Сервер отвечает:
// Access-Control-Allow-Methods: GET, POST, PUT, DELETE
// Access-Control-Allow-Headers: content-type

Идемпотентность и безопасность

// Идемпотентный = результат одинаковый, независимо от количества вызовов
// Безопасный = не модифицирует данные на сервере

// ✅ GET — безопасный и идемпотентный
// Можно повторять сколько угодно

// ✅ PUT — идемпотентный, но не безопасный
// Можно повторять, но модифицирует данные

// ✅ DELETE — идемпотентный, но не безопасный
// Второе удаление может вернуть 404, но состояние то же

// ❌ POST — не безопасный и не идемпотентный
// Каждый вызов создаёт новый ресурс

// ❌ PATCH — не всегда идемпотентный
// Зависит от реализации сервера

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

// CRUD операции с ресурсом "posts"

// Create
POST /api/posts
{ title: "My Post", content: "..." }
// Ответ: { id: 1, title: "My Post", content: "..." }

// Read
GET /api/posts/1
// Ответ: { id: 1, title: "My Post", content: "..." }

// Update (весь ресурс)
PUT /api/posts/1
{ title: "Updated Post", content: "New content" }

// Update (часть ресурса)
PATCH /api/posts/1
{ title: "Updated Post" }

// Delete
DELETE /api/posts/1
// Ответ: { success: true }

// List all
GET /api/posts
// Ответ: [ { id: 1, ... }, { id: 2, ... } ]