0Pricing
Frontend Academy · Урок

Fetch API: GET, POST, PUT и DELETE

Выполняйте GET-запросы с помощью fetch, отправляйте тела JSON в запросах POST и PUT и вызывайте конечные точки DELETE для удаления ресурсов.

«Fetch API: GET, POST, PUT и DELETE» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

API fetch

fetch() — современный браузерный API для HTTP-запросов. Он возвращает Promise, который разрешается объектом ответа. Этот API поддерживается всеми современными браузерами и Node.js 18+.

Базовый GET-запрос

Самый простой запрос с помощью fetch: передайте адрес, дождитесь ответа и разберите JSON.

async function fetchUsers() {
  const res = await fetch('https://api.example.com/users');
  if (!res.ok) throw new Error('HTTP ' + res.status);
  const users = await res.json();
  return users;
}

POST с телом JSON

Используйте method, headers и body. Тело должно быть строкой — вызовите JSON.stringify() для объекта.

async function createUser(user) {
  const res = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user)
  });
  if (!res.ok) throw new Error('Failed: ' + res.status);
  return res.json();
}

createUser({ name: 'Alice', email: 'alice@example.com' });

PUT для полного обновления

PUT заменяет ресурс. Отправляйте весь объект: поля, которые вы не указали, обычно очищаются на сервере.

await fetch(`/api/users/${id}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    id, name: 'Alice', email: 'alice@example.com', role: 'admin'
  })
});

PATCH для частичного обновления

PATCH обновляет только переданные поля. Используйте его для частичных обновлений вместо PUT.

await fetch(`/api/users/${id}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'new@example.com' })
});

DELETE-запрос

У DELETE обычно нет тела. Ответ часто содержит код 204 No Content и не имеет тела.

async function deleteUser(id) {
  const res = await fetch(`/api/users/${id}`, { method: 'DELETE' });
  if (!res.ok) throw new Error('Delete failed');
  // 204 No Content — no JSON to parse
}

Заголовки аутентификации

Добавляйте заголовок Authorization для защищённых конечных точек.

const res = await fetch('/api/me', {
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
});

Параметры запроса в адресе

Создавайте строки запроса с помощью URLSearchParams для безопасного кодирования.

const params = new URLSearchParams({
  q: 'react hooks',
  page: '2',
  pageSize: '20'
});

const res = await fetch(`/api/search?${params}`);
// /api/search?q=react+hooks&page=2&pageSize=20

Почему fetch не выбрасывает исключение при ошибках HTTP

fetch отклоняет Promise только при сбое сети — ответ 404 или 500 всё равно считается успешно полученным. Всегда проверяйте res.ok (true для ответов 2xx) или res.status и выбрасывайте исключение вручную.

const res = await fetch('/api/users/999');
if (!res.ok) {
  // res.ok is false for 4xx and 5xx
  throw new Error(`Server error ${res.status}: ${await res.text()}`);
}

Отмена запросов с помощью AbortController

Отменяйте выполняющийся запрос, чтобы предотвратить устаревшие результаты — это особенно важно для поиска по мере ввода и очистки эффекта в React.

const controller = new AbortController();

fetch('/api/search?q=hooks', { signal: controller.signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name !== 'AbortError') throw err;
  });

// Cancel:
controller.abort();

Отправка FormData

Для загрузки файлов или составных форм передавайте объект FormData в качестве тела. Не задавайте тип содержимого — браузер добавит его с правильной границей.

const form = new FormData();
form.append('avatar', fileInput.files[0]);
form.append('name', 'Alice');

await fetch('/api/upload', { method: 'POST', body: form });
// no Content-Type header — browser sets multipart/form-data

Быстрая проверка

Почему fetch() не выбрасывает ошибку, когда сервер возвращает 404 или 500?

Повторение: API fetch

fetch() возвращает Promise с ответом. Методы: GET (по умолчанию), POST, PUT, PATCH, DELETE. Для тел JSON нужны JSON.stringify() и заголовок типа содержимого. fetch отклоняет Promise только при сбое сети — проверяйте res.ok вручную. Используйте параметры строки запроса для строк запросов. AbortController — для отмены. FormData — для загрузки файлов (не задавайте тип содержимого — браузер обработает его сам).

Часто задаваемые вопросы

Урок «Fetch API: GET, POST, PUT и DELETE» бесплатный?

Да — полный текст урока «Fetch API: GET, POST, PUT и DELETE» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Fetch API: GET, POST, PUT и DELETE»?

Выполняйте GET-запросы с помощью fetch, отправляйте тела JSON в запросах POST и PUT и вызывайте конечные точки DELETE для удаления ресурсов. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Fetch API: GET, POST, PUT и DELETE»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Fetch API: GET, POST, PUT и DELETE
  2. Axios: перехватчики и базовый URL
  3. Обработка ошибок: коды состояния HTTP
  4. SWR и React Query для кэширования данных
← Назад к Frontend Academy