> Как реализована отправка JSON в API (JavaScript)

Короткий ответ

Отправка JSON в API - это сериализация JavaScript-объекта в строку через JSON.stringify() и передача её в теле HTTP-запроса с заголовком Content-Type: application/json. Основные способы: fetch с опциями method, headers и body, либо XMLHttpRequest. Важно обрабатывать ошибки сети и некорректные статусы ответа, а также учитывать особенности CORS и кодировки.

Подробное объяснение

JSON - текстовый формат, поэтому перед отправкой объект превращается в строку. Сервер, получив запрос, парсит её обратно в структуру данных. Ключевые моменты:

• Content-Type: application/json обязателен - иначе сервер может не распознать формат тела.
• Accept: application/json желателен - сообщает серверу ожидаемый формат ответа.
• Метод обычно POST, PUT или PATCH - для создания или обновления ресурсов.
• Тело запроса - строка, не объект. fetch сам не сериализует объекты.
• Для работы с ответом нужно вызвать res.json() - он возвращает Promise с распарсенным объектом.
• Ошибки сети (нет интернета, DNS) не вызывают reject у fetch - только TypeError при сетевом сбое. HTTP-статусы 4xx/5xx считаются успешным выполнением запроса, поэтому их нужно проверять вручную через res.ok.

На практике

В реальном коде важно:

• Использовать try/catch или .catch() для обработки сетевых ошибок.
• Проверять res.ok перед парсингом ответа.
• Добавлять таймаут через AbortController, чтобы избежать зависания запроса.
• Для отправки вложенных объектов или массивов - JSON.stringify обрабатывает их рекурсивно.
• Не отправлять undefined или функции - они будут пропущены при сериализации.
• Для больших payload'ов учитывать лимиты сервера и сжимать данные при необходимости.

Пример кода

JAVASCRIPT
async function sendJson(url, data) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`HTTP ${response.status}: ${errorText}`);
    }

    return await response.json();
  } catch (error) {
    console.error('Ошибка отправки JSON:', error);
    throw error;
  }
}

// Использование
const payload = { name: 'Иван', age: 30, tags: ['a', 'b'] };
sendJson('/api/users', payload)
  .then(result => console.log('Успех:', result))
  .catch(err => console.error('Провал:', err));

Как отвечать на собеседовании

Начни с базовой механики: сериализация + заголовки + метод. Затем покажи понимание нюансов: проверка res.ok, обработка ошибок, AbortController. Если спросят про альтернативы - упомяни axios, который автоматически сериализует объекты и бросает ошибки на 4xx/5xx. Подчеркни, что в production-коде нужна единая обёртка для запросов с обработкой ошибок и повторными попытками. Говори о trade-off между fetch и axios - первый нативный, второй удобнее.

Что проверяет интервьюер

• Понимание разницы между объектом и JSON-строкой.
• Знание обязательных заголовков.
• Умение обрабатывать асинхронные ошибки.
• Осведомлённость о поведении fetch при HTTP-статусах.
• Способность объяснить, почему JSON.stringify нужен явно.
• Понимание CORS и preflight-запросов для Content-Type: application/json.

Типичные ошибки

• Забыть JSON.stringify - отправка [object Object] вместо данных.
• Не проверять res.ok - обработка ошибок 4xx/5xx как успеха.
• Игнорировать сетевые ошибки - fetch не reject'ит на HTTP-ошибках.
• Не ставить Content-Type - сервер может вернуть 415 Unsupported Media Type.
• Пытаться отправить FormData или Blob с Content-Type: application/json.
• Не использовать try/catch - необработанный reject в async-функции.
• Забывать про AbortController для таймаутов - запрос может висеть бесконечно.