В чем разница между XMLHttpRequest и fetch() в JavaScript и браузерах?

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

1. Синтаксис и простота использования

XMLHttpRequest

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

var 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()

Метод 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("Fetch error:", error));

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

В XMLHttpRequest обработка ошибок осуществляется через состояние readyState и статус HTTP. В fetch() обрабатываются ошибки с помощью промисов, что делает код более удобочитаемым.

XMLHttpRequest

if (xhr.status >= 200 && xhr.status < 300) {
    // Успешный ответ
} else {
    // Ошибка
}

fetch()

if (!response.ok) {
    throw new Error("Ошибка сети");
}

3. Поддержка Promise

fetch() возвращает промис, а это значит, что можно легко использовать async/await, что значительно упрощает асинхронный код:

async function getData() {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Network response was not ok");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}

getData();

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

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

5. Работа с запросами

• fetch() позволяет легко работать с различными типами запросов (POST, PUT, DELETE и т. д.) и настраивать заголовки:

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

• В XMLHttpRequest это требует больше кода:

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ key: "value" }));

Заключение

Резюмируя, можно выделить основные различия между XMLHttpRequest и fetch():

• fetch() имеет более современный и удобочитаемый синтаксис.
• fetch() позволяет использовать промисы и async/await, упрощая работу с асинхронным кодом.
• Обработка ошибок в fetch() более интуитивно понятна.
• fetch() предлагает более гибкие возможности работы с CORS и различными HTTP-методами.

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