Какие знаешь способы отправки данных на сервер

Да ты посмотри, какая хуйня творится в мире фронтенда! Сидишь такой, пишешь код, а тут тебе на выбор — овердохуища способов отправить данные на сервер. Прямо как в столовой: хочешь — борщ, хочешь — сосиска в тесте, а хочешь — вообще пойди нахуй и ничего не ешь. Но мы же не такие, мы жадные до знаний, блядь. Так что слушай сюда, разбираем по косточкам.

Вот, например, XMLHttpRequest (XHR) — это типа наш дед, который до сих пор ходит в баню по субботам и рассказывает, как раньше трактора чинили. Старый, сука, но работает! Код у него, конечно, на три метра в длину, но если вдруг надо поддержать IE11 (а зачем, спрашивается?), то он выручит.

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ key: 'value' }));

А потом пришёл Fetch API — молодой, дерзкий, на промисах. Говорит: «Зачем эти все костыли, нахуй? Давай проще!». И правда, код в разы короче и чище. Но, блядь, есть нюанс: если сервер вернёт ошибку 404 или 500, fetch не упадёт в catch как миленький, ему похуй. Надо проверять response.ok. Хитрый, сука.

fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' })
});

Дальше — Axios. Это вообще отдельная религия. Библиотека, которая делает всё то же самое, но с блэкджеком и интерсепторами. Хочешь — автоматически JSON распарсит, хочешь — прогресс загрузки покажет. Народ его обожает, но я, честно, иногда подозреваю, что это просто мода. Как кроссовки определённой марки, блядь.

axios.post('/api/data', { key: 'value' });

А если тебе надо файлы отправить, то тут в игру вступает FormData. Вещь, конечно, мощная, но ощущение, будто ты не код пишешь, а в 90-е вернулся, бумажки в конверте носишь. Зато работает на ура, особенно с <input type="file">.

const formData = new FormData();
formData.append('file', fileInput.files[0]);
fetch('/upload', { method: 'POST', body: formData });

Ну и куда же без WebSocket. Это когда тебе мало просто разок отправить запрос и ждать ответа. Тут тебе нужен постоянный стрим, общение в реальном времени, чаты, уведомления — вот это всё. Открыл соединение и шлёшь данные туда-сюда, как сумасшедший. Красота, но и головной боли прибавляет — соединение может разорваться, его надо восстанавливать... В общем, веселье на всю голову.

const socket = new WebSocket('ws://example.com');
socket.send(JSON.stringify({ data: 'value' }));

И на закуску — GraphQL. Это вообще отдельная вселенная, ёпта. Ты не просто шлёшь данные, ты шлёшь запрос, в котором говоришь серверу, что именно тебе нужно вернуть. Ничего лишнего, одна сплошная эффективность. Но, блядь, пока разберёшься в этой схеме, типах и резолверах — волосы дыбом встанут. Зато когда въедешь — обратной дороги нет, как с наркотой.

fetch('/graphql', {
  method: 'POST',
  body: JSON.stringify({ query: '{ user { name } }' })
});

Вот и весь расклад, дружище. Выбирай, что душе угодно, но помни главное: неважно, чем ты шлёшь данные, важно, чтобы они долетели и не сломали всё к хуям. Удачи в коде, и да не сгинешь ты в аду бесконечных багов!