Fetch API в JavaScript: GET, POST и обработка ошибок на рабочем примере

Рабочий запрос через Fetch API состоит из четырёх обязательных действий: дождаться fetch, проверить response.ok, прочитать тело подходящим методом и обработать ошибку интерфейсом. fetch отклоняет Promise при части сетевых сбоев, но обычный ответ 404 или 500 сам по себе не попадает в catch. Поэтому проверка статуса должна быть написана явно до response.json().

Fetch API предоставляет Promise-интерфейс для HTTP-запросов в браузере. GET обычно читает ресурс, POST отправляет данные в теле. Но хороший пример должен показывать не только счастливый путь: пользователь должен увидеть загрузку, серверную ошибку, сетевой сбой и корректный результат, а кнопка не должна отправить десять одинаковых запросов.

Минимальный GET-запрос с правильной проверкой

Без второго аргумента fetch(url) выполняет GET. Возвращаемый Promise разрешается объектом Response, когда браузер получил статус и заголовки. Метод response.json() тоже асинхронный и читает тело один раз. Между этими шагами проверьте ok, который равен true для статусов диапазона 200.

async function loadTasks() {
  const response = await fetch('/api/tasks');

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

  const tasks = await response.json();
  return tasks;
}

Статус проверяется до чтения тела, а результат проходит в отдельное состояние интерфейса.

POST с JSON: method, headers и body

GET не должен иметь тело. Для POST объект JavaScript нужно сериализовать, иначе в сеть может уйти строка [object Object]. Заголовок Content-Type сообщает серверу формат тела, но сам не преобразует данные. Метод и формат должны соответствовать документации конкретного endpoint.

async function createTask(title) {
  const response = await fetch('/api/tasks', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title }),
  });

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

GET получает ресурс, а POST добавляет метод, формат и сериализованное тело.

Как разделить HTTP, сеть, JSON и отмену

У запроса несколько независимых точек отказа. Сеть может быть недоступна, сервер может вернуть 500, тело может оказаться невалидным JSON, а пользователь может уйти со страницы и отменить операцию. Одно сообщение «что-то пошло не так» удобно для первого прототипа, но бесполезно для диагностики.

async function requestJSON(url, options = {}) {
  const response = await fetch(url, options);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  const type = response.headers.get('content-type') || '';
  if (!type.includes('application/json')) {
    throw new TypeError('Сервер вернул не JSON');
  }
  return response.json();
}

Разные слои отказа обнаруживаются разными проверками.

Ошибки Fetch API, которые проходят незаметно

Код без await выводит Promise вместо данных. Код без проверки ok пытается обработать тело ошибки как успешный объект. Бесконечный индикатор появляется, когда состояние loading выключается только в счастливой ветке. Для интерфейса удобно использовать try, catch и finally.

Практика: загрузка и создание задач на странице

Соберите модуль с двумя функциями: loadTasks для GET и createTask для POST. Обработчик формы отвечает только за интерфейс: читает поле, блокирует кнопку, вызывает API-функцию, обновляет список и показывает ошибку. Такое разделение упрощает тестирование.