Что такое body

Body - это часть HTTP-сообщения, в которой передаются данные. У HTTP-сообщения есть стартовая строка, заголовки и опциональное тело. URL, HTTP-метод, статус и headers не являются body.

В запросе body отвечает на вопрос: какие данные клиент отправляет серверу. В ответе body отвечает на вопрос: какие данные сервер вернул клиенту. Для frontend-разработчика это напрямую связано с API-запросами, формами, загрузкой файлов и парсингом ответа.

Не говорите, что body есть всегда. У многих запросов и ответов тело может отсутствовать. Например, GET обычно передает параметры в URL, а ответ 204 No Content успешен именно без body.

Хороший короткий ответ можно дать так:

Body - это полезная нагрузка HTTP-запроса или ответа. В запросе через body отправляют данные на сервер, например JSON или форму. В ответе из body читают данные сервера, например JSON. Формат тела должен совпадать с Content-Type, а в fetch тело ответа нельзя читать несколько раз.

Такая формулировка показывает не только знание термина, но и практику. Вы сразу закрываете API, заголовки, методы парсинга и типичную ловушку с повторным чтением response body.

Когда фронтенд отправляет данные, body задается в параметрах запроса. Для JSON важно передать строку, а не обычный объект.

await fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Anna', role: 'editor' }),
});

Плохой вариант - передать объект напрямую в body. Fetch не превратит его в JSON так, как вы ожидаете. Сервер может получить строку [object Object] или не разобрать данные. Для UI это часто выглядит так: форма отправилась, но запись не создалась или создалась с пустыми полями. Надежнее явно сериализовать объект через JSON.stringify(), указать ожидаемый Content-Type и обработать ошибку сервера.

// Плохо: обычный объект не сериализуется в JSON автоматически
await fetch('/api/users', {
  method: 'POST',
  body: { name: 'Anna' },
});

Ответ сервера тоже может иметь body. Во фронтенде вы обычно читаете его через методы объекта Response: json(), text(), blob(), arrayBuffer() или работаете с потоком.

const response = await fetch('/api/profile');

if (!response.ok) {
  throw new Error('Request failed');
}

const profile = await response.json();

Здесь есть два риска. Первый: тело можно прочитать один раз. Второй: успешный ответ не гарантирует, что тело есть и что оно является JSON. Если не учесть это, экран может показать общую ошибку вместо успешного удаления или потерять полезное сообщение backend. Поэтому в надежном коде учитывайте статус и контракт API.

Content-Type описывает формат body. Если вы отправляете JSON, сервер обычно ждет application/json. Если отправляете обычную HTML-форму, это может быть application/x-www-form-urlencoded. Если отправляете файлы, часто используется multipart/form-data.

Самая частая ловушка - FormData. В этом случае браузер сам добавляет boundary к заголовку. Поэтому такой код безопаснее:

const formData = new FormData();
formData.append('avatar', file);
formData.append('name', 'Anna');

await fetch('/api/profile/avatar', {
  method: 'POST',
  body: formData,
});

Не добавляйте Content-Type: multipart/form-data вручную без необходимости. Иначе можно сломать boundary, и backend не сможет прочитать файл. В интерфейсе это обычно превращается в бесконечную загрузку или ошибку файл не выбран, хотя пользователь выбрал файл правильно.

Для интервью важен не список всех форматов, а понятное правило работы с API.

1. Выберите HTTP-метод по смыслу операции.
2. Положите данные в body только там, где это ожидает API.
3. Сериализуйте body в нужный формат.
4. Согласуйте формат с Content-Type.
5. При чтении ответа учитывайте статус, пустое тело и одноразовое чтение потока.

Такой ответ показывает практический опыт. Вы сразу объясняете, как избежать реальных багов: сервер не видит данные, загрузка файла не работает, UI падает на пустом ответе, ошибка API теряет полезное сообщение.