Чем отличаются XMLHttpRequest и fetch() в JavaScript и браузерах?

XMLHttpRequest и fetch() — это два метода, используемых в JavaScript для выполнения HTTP-запросов к серверу. Однако они отличаются по синтаксису, функциональности и удобству использования. В этом ответе мы разберем основные различия между ними.

1. Синтаксис

XMLHttpRequest

XMLHttpRequest (XHR) — это старый, но мощный способ выполнения асинхронных HTTP-запросов в JavaScript. Для использования XHR нужно создать объект, настроить его и обработать результат в несколько этапов.

Пример использования XHR:

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function() {
  if (xhr.status === 200) {
    let data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error('Ошибка запроса:', xhr.statusText);
  }
};

xhr.onerror = function() {
  console.error('Произошла ошибка при запросе');
};

xhr.send();

fetch()

fetch() — это более современный API для выполнения HTTP-запросов, поддерживающий промисы и значительно упрощающий синтаксис.

Пример использования fetch:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Ошибка сети');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка запроса:', error));

2. Асинхронность

• XMLHttpRequest: Работает с колбэками. Это может привести к проблемам с читаемостью кода, особенно когда возникает необходимость обработать несколько последовательных запросов (проблема "callback hell").
• fetch(): Использует промисы, что упрощает работу с асинхронностью. Промисы делают код более чистым и легко читаемым, особенно при работе с цепочками запросов.

3. Обработка ошибок

• XMLHttpRequest: Для обработки ошибок используется отдельный обработчик onerror, и проверка статуса ответа происходит вручную в колбэке onload.
• fetch(): Ошибки можно обработать с помощью метода catch, который перехватывает ошибки как на уровне сети, так и ошибки в ответах. Однако важно заметить, что fetch() не отклоняет промис на ошибочные HTTP-статусы (например, 404 или 500), для этого нужно вручную проверять статус ответа с помощью response.ok.

4. Поддержка JSON и других форматов данных

• XMLHttpRequest: Для работы с ответами в формате JSON необходимо вручную парсить строку JSON через JSON.parse(). XHR также поддерживает другие форматы, такие как XML, и предоставляет доступ к бинарным данным.
• fetch(): Метод fetch() упрощает работу с JSON, предоставляя метод .json() для преобразования данных в формат JSON. Он также поддерживает другие форматы, такие как текст, блобы и потоковые данные.

5. Поддержка старых браузеров

• XMLHttpRequest: Поддерживается во всех браузерах, даже в очень старых версиях. Это делает его хорошим выбором для поддержания совместимости в старых приложениях.
• fetch(): fetch() поддерживается только в современных браузерах. Для старых браузеров (например, IE11 и ниже) требуется полифилл, чтобы использовать fetch().

6. Управление запросами

• XMLHttpRequest: Для работы с XHR нужно вручную управлять состоянием запроса, например, используя методы .setRequestHeader() для добавления заголовков, а также проверять статус ответа.
• fetch(): Управление запросами проще и интуитивно понятно. Заголовки можно установить через объект опций в методе fetch. Существуют также встроенные методы для работы с запросами и ответами, такие как .json(), .text(), и .blob().

7. Примеры использования различных опций

XMLHttpRequest

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: 'John' }));

fetch()

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Ошибка:', error));

8. Поддержка потоков (Streams)

• XMLHttpRequest: Не поддерживает потоки данных напрямую.
• fetch(): В отличие от XHR, fetch() поддерживает потоковые данные (Streams). Это позволяет работать с большими объемами данных (например, при загрузке видео или аудио) без необходимости загружать весь файл в память.

9. Кэширование

• XMLHttpRequest: XHR поддерживает кэширование по умолчанию, но это нужно вручную настраивать, если требуется отключить кэширование.
• fetch(): fetch() поддерживает кэширование по умолчанию, но с возможностью явной настройки через параметр cache в опциях запроса.

Заключение

• XMLHttpRequest — это устаревшая технология, но она поддерживается всеми браузерами и имеет богатый функционал. Она может быть полезной для работы с более старыми приложениями или для обеспечения совместимости с устаревшими браузерами.
• fetch() — это современный, более гибкий и читаемый способ работы с HTTP-запросами. Он поддерживает промисы, потоковые данные и предоставляет более удобный интерфейс для работы с запросами и ответами. Однако для использования в старых браузерах потребуется полифилл.

Для новых проектов рекомендуется использовать fetch(), так как это современный и удобный инструмент для асинхронных запросов, но если необходимо поддерживать старые браузеры, можно использовать XMLHttpRequest или полифилл для fetch().