В чём разница между XMLHttpRequest и fetch()?

Разница между XMLHttpRequest и fetch()

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

1. Синтаксис

XMLHttpRequest — это более старая технология, которая требует больше строк кода для выполнения запросов. Пример создания GET-запроса с использованием XMLHttpRequest:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

fetch, с другой стороны, использует более современный и лаконичный подход с промисами (promises). Пример того же запроса с использованием fetch:

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('There has been a problem with your fetch operation:', error));

2. Поддержка промисов

fetch возвращает промис, что позволяет использовать методы .then(), .catch() и .finally(). Это делает код более читаемым и уменьшает вероятность ошибок, связанных с обработкой состояния запроса.

XMLHttpRequest не поддерживает промисы, что может привести к более сложной обработке состояния готовности. Это часто приводит к "адской колбе" (callback hell), когда несколько уровней вложенных функций затрудняют чтение и поддержку кода.

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

При использовании XMLHttpRequest необходимо вручную проверять статус ответа и обрабатывать возможные ошибки. Например, если сервер вернёт статус 404, вам нужно будет добавить дополнительную логику для этого.

В случае fetch вы можете воспользоваться встроенной проверкой статуса ответа. Если ответ не ok (например, статус не в диапазоне 200-299), вы можете выбросить ошибку, что упростит обработку.

4. Поддержка потоков

fetch поддерживает потоковую передачу данных, что позволяет обрабатывать данные по мере их поступления. Это особенно полезно для загрузки больших файлов или работы с API, которые возвращают данные по частям.

5. Поддержка CORS

Обе технологии поддерживают CORS (Cross-Origin Resource Sharing), но поведение может отличаться. fetch имеет более гибкие настройки для CORS, позволяя легко настраивать заголовки и параметры запросов.

6. Преобразование данных

В fetch можно легко преобразовать данные в нужный формат (например, JSON) с помощью методов, таких как .json(), .text(), и других. XMLHttpRequest требует явного парсинга ответа, что добавляет дополнительный уровень сложности.

Практические советы

• Используйте fetch: если ваша цель — писать чистый и современный код, выбирайте fetch. Он более лаконичный и проще в использовании.
• Обрабатывайте ошибки: всегда добавляйте обработку ошибок как для fetch, так и для XMLHttpRequest, чтобы избежать неожиданных сбоев.
• Избегайте callback hell: если вы используете XMLHttpRequest, старайтесь разбивать логику на функции, чтобы избежать вложенности.

Распространённые ошибки

• Использование XMLHttpRequest без проверки статуса ответа может привести к тому, что ошибки не будут замечены.
• При использовании fetch не забывайте обрабатывать ошибки сети и статусы ответа, чтобы избежать недоразумений.
• Путаница с CORS — не забудьте проверить настройки сервера, если запросы не проходят.

В общем, хотя XMLHttpRequest всё ещё поддерживается и используется, fetch является предпочтительным методом для современных веб-приложений благодаря своей простоте и мощным возможностям.