JavaScript fetch POST: отправить JSON и проверить ответ

Чтобы отправить JSON методом POST через fetch, задайте method, заголовок Content-Type и передайте сериализованное тело через JSON.stringify(). Проверяйте response.ok: fetch() не отклоняет Promise только из-за HTTP-статуса 400 или 500.

POST-запрос с JSON

async function postJson(url, data) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(data)
  });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

globalThis.fetch = async (_url, options) => new Response(
  JSON.stringify({received: JSON.parse(options.body)}),
  {status: 201, headers: {'Content-Type': 'application/json'}}
);
const result = await postJson('/api/items', {name: 'Книга'});
console.log(result.received.name); // Книга

При ошибке HTTP выбросьте исключение или верните структурированный результат — выберите единое поведение для API-клиента.

Отдельно обработать сетевую и HTTP-ошибку

try {
  const result = await postJson('/api/items', {name: 'Книга'});
  console.log('Создано:', result.received.name);
} catch (error) {
  console.error('Запрос не выполнен:', error.message);
}

Сетевой сбой отклоняет Promise; HTTP-ошибка обрабатывается проверкой ok. JSON в теле ответа тоже может оказаться некорректным, поэтому при ненадёжном API обработайте ошибку response.json().

Почему fetch не попадает в catch при ответе 404?

Потому что запрос завершился HTTP-ответом. Проверьте response.ok или response.status и сами переведите неуспешный статус в обработку ошибки.

Как отправить данные формы?

Преобразуйте нужные поля в объект и передайте его в postJson. Для загрузки файлов используйте FormData, не задавая Content-Type вручную: браузер добавит boundary.