How does XMLHttpRequest differ from Fetch API?

<!-- BEGIN COPY / PASTE -->
        // Using XMLHttpRequest
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "https://api.example.com/data", true);
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log("XMLHttpRequest Response:", xhr.responseText);
            }
        };
        xhr.send();

        // Using Fetch API
        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("Fetch API Response:", data))
            .catch(error => console.error("Fetch API Error:", error));
        <!-- END COPY / PASTE -->