> Какие способы выполнения HTTP-запросов в браузере на JavaScript? (JavaScript)

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

Основные способы: XMLHttpRequest (классический, событийный), fetch (современный, на промисах), navigator.sendBeacon (для аналитики и отправки данных при уходе со страницы), WebSocket (для постоянного двустороннего канала, не совсем HTTP, но часто упоминается), а также EventSource (Server-Sent Events, только приём). Для простых GET-запросов можно использовать Image или script с JSONP, но это устаревшие хаки.

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

XMLHttpRequest - первый стандартный API для HTTP-запросов из браузера. Поддерживает все методы, заголовки, upload progress, но требует ручной обработки событий и имеет громоздкий синтаксис. До сих пор используется в legacy-коде и для задач, где нужен точный контроль над прогрессом загрузки.

fetch - современный API на промисах, более лаконичный и читаемый. Возвращает Promise<Response>, поддерживает streaming, AbortController для отмены. Ключевое отличие: не отклоняет промис при HTTP-ошибках (404, 500) - нужно проверять response.ok. Не поддерживает upload progress из коробки.

navigator.sendBeacon - предназначен для отправки небольших объёмов данных (обычно аналитика) надёжно, даже когда страница закрывается. Использует POST, не возвращает ответа, работает асинхронно в фоне.

WebSocket - полноценный двусторонний канал поверх TCP, инициируется как HTTP-запрос с апгрейдом протокола. Не является HTTP в строгом смысле, но часто используется для real-time.

EventSource - односторонний поток событий от сервера по HTTP. Проще WebSocket, автоматически переподключается, но только server-to-client.

JSONP - загрузка данных через <script>, обходит CORS, но работает только с GET и требует доверия к серверу. Сейчас практически не используется.

На практике

Для большинства задач выбирайте fetch - он стандарт де-факто. Используйте XMLHttpRequest, если нужен upload progress или работаете с legacy-кодом. Для аналитики и логов - sendBeacon. Для real-time - WebSocket или EventSource в зависимости от направления данных. JSONP избегайте, если нет жёстких ограничений CORS.

Пример кода

JAVASCRIPT
// fetch с обработкой ошибок
async function getData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Fetch failed:', error);
  }
}

// XMLHttpRequest с прогрессом
function uploadWithProgress(url, file) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url);
  xhr.upload.onprogress = (e) => {
    if (e.lengthComputable) {
      console.log(`Progress: ${Math.round((e.loaded / e.total) * 100)}%`);
    }
  };
  xhr.onload = () => console.log('Done', xhr.status);
  xhr.send(file);
}

// sendBeacon для аналитики
navigator.sendBeacon('/analytics', new Blob([JSON.stringify(data)], { type: 'application/json' }));

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

Начните с перечисления основных способов, затем кратко охарактеризуйте каждый. Подчеркните различия: fetch vs XMLHttpRequest (промисы, обработка ошибок, прогресс), sendBeacon vs fetch (надёжность при уходе со страницы). Упомяните ограничения: CORS, отсутствие upload progress в fetch, поведение при HTTP-ошибках. Если спросят про отмену запроса - расскажите про AbortController. Не углубляйтесь в детали, если не просят, но покажите, что понимаете trade-off'ы.

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

• знание современного API (fetch) и умение объяснить, чем он лучше XMLHttpRequest
• понимание edge cases: обработка ошибок, отмена запросов, прогресс загрузки
• осведомлённость о специализированных API (sendBeacon, EventSource) и их назначении
• способность выбрать подходящий инструмент под конкретную задачу
• понимание ограничений браузера: CORS, отсутствие доступа к заголовкам, политика безопасности

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

• утверждение, что fetch автоматически бросает ошибку на HTTP-статусы 4xx/5xx - это не так
• игнорирование AbortController при обсуждении отмены запросов
• рекомендация JSONP как современного решения
• путаница между WebSocket и EventSource (двусторонний vs односторонний)
• забывают про sendBeacon для аналитики, хотя это важный кейс
• не упоминают про отсутствие upload progress в fetch - это частый подвох