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

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Merlion

Стек: JavaScript

> Пример ответа

Отправка JSON в API на фронтенде обычно выполняется с помощью Fetch API или Axios. Рассмотрим оба подхода.

Fetch API (нативный):

JAVASCRIPT
const data = { name: 'Иван', age: 30 };

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then(response => {
    if (!response.ok) throw new Error('Ошибка сети');
    return response.json();
  })
  .then(result => console.log('Успех:', result))
  .catch(error => console.error('Ошибка:', error));

Axios (популярная библиотека):

JAVASCRIPT
import axios from 'axios';

const data = { name: 'Иван', age: 30 };

axios.post('https://api.example.com/users', data)
  .then(response => console.log('Успех:', response.data))
  .catch(error => console.error('Ошибка:', error));

Ключевые моменты:

Устанавливаем заголовок Content-Type: application/json, чтобы сервер знал формат данных.
Данные преобразуем в JSON-строку с помощью JSON.stringify() (Fetch) или передаём объект напрямую (Axios делает это автоматически).
Обрабатываем ответ: проверяем статус, парсим JSON.
Используем async/await для более читаемого кода в современных проектах.

Пример с async/await:

JAVASCRIPT
async function sendData() {
  try {
    const response = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: 'Иван' }),
    });
    if (!response.ok) throw new Error('Ошибка');
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}