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

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

Основные способы выполнения HTTP-запросов в браузере: XMLHttpRequest (XHR), Fetch API, а также устаревшие методы вроде ActiveXObject (IE). Fetch - современный стандарт на промисах, более гибкий и лаконичный. XHR всё ещё используется для отслеживания прогресса загрузки. Также возможны запросы через WebSocket, Server-Sent Events и <form> с target iframe, но это не полноценные HTTP-запросы.

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

XMLHttpRequest - исторически первый API для асинхронных запросов. Поддерживает все HTTP-методы, загрузку файлов, отслеживание прогресса (через progress event), синхронные запросы (deprecated). Работает через callback-функции и event listeners.

Fetch API - современная альтернатива, основанная на промисах. Предоставляет более чистый синтаксис, встроенную поддержку CORS, Service Workers, потоковую передачу данных (Streams API). Однако не поддерживает отслеживание прогресса загрузки напрямую (только через ReadableStream). Не бросает ошибку на HTTP-статусы 4xx/5xx - нужно проверять response.ok.

Дополнительные механизмы:

• navigator.sendBeacon() - для отправки данных без ожидания ответа (аналитика, логи).
• WebSocket - для двусторонней связи в реальном времени.
• Server-Sent Events - для получения потоковых данных от сервера.
• <img>, <script>, <link> - для GET-запросов без обработки ответа.

На практике

Для большинства задач используйте Fetch: он короче, читаемее и лучше интегрируется с async/await. XHR применяйте только если нужен мониторинг прогресса загрузки (например, индикатор загрузки файла) или поддержка очень старых браузеров.

Важно: Fetch не отклоняет промис при HTTP-ошибках (404, 500). Всегда проверяйте response.ok или response.status. Для отмены запроса используйте AbortController с обоими API.

При работе с CORS убедитесь, что сервер отправляет правильные заголовки. Для запросов с credentials (cookies) укажите credentials: 'include' в Fetch или withCredentials: true в XHR.

Пример кода

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

// XHR с прогрессом
function uploadFile(file) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.upload.onprogress = (event) => {
      if (event.lengthComputable) {
        console.log(`Progress: ${event.loaded / event.total * 100}%`);
      }
    };
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(new Error('Upload failed'));
    xhr.send(file);
  });
}

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

Начните с перечисления основных API (XHR, Fetch), затем объясните их различия и области применения. Упомяните, что Fetch - современный стандарт, но XHR остаётся актуальным для специфических задач. Покажите понимание ограничений Fetch (отсутствие прогресса, поведение с ошибками) и способы их обхода. Добавьте про AbortController, CORS и credentials. Если спросят про альтернативы - расскажите про sendBeacon и WebSocket.

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

• Знание современных и устаревших API.
• Понимание асинхронности, промисов и обработки ошибок.
• Практический опыт с реальными кейсами (прогресс, отмена запросов, CORS).
• Умение выбирать правильный инструмент под задачу.

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

• Использование Fetch без проверки response.ok - промис не отклоняется при 404/500.
• Забывают про AbortController для отмены запросов (особенно в React useEffect).
• Путают fetch() с синхронным вызовом - забывают await или .then().
• Используют XHR для простых GET-запросов, когда Fetch был бы короче.
• Не учитывают CORS-ограничения при работе с внешними API.