🔥What is the difference between fetch and XMLHTTPRequest?

Hello everyone! While working on an interesting project, I had an idea to tell about the difference between fetch and XMLHTTPRequest. In fact, the question sounds quite interesting if you know the history of its creation, in the sense that it is a little incorrect, but you still need to know about it, because, let's say, for me as a developer, when I deal with all sorts of APIs every day, it is useful to know so as not to create unnecessary code.

What is XMLHTTPRequest and a brief history of its creation

In javascript, XMLHttpRequest objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. But generally speaking, to put it bluntly, it is an API. And when we hear this, we immediately remember the concepts of event loop, asynchronous (when the code execution will be completed after a certain time), etc. For example, code using XMLHTTPRequest looks like this:

const xhr = new XMLHttpRequest();

// method, URL, [isAsync, user, password]

xhr.open("GET", "/api/getPage");

// body

xhr.send()

The history of the creation of XMLHTTPRequest itself takes us back to the distant years when dinosaurs walked... Okay, just kidding. In fact, this API was first developed by Microsoft and was introduced in the Outlook on the web component of the Microsoft Exchange Server software 2000 product.

But seriously, here is a short list of differences:

1. Promise-oriented: The Fetch API uses promises, which makes it easier to work with asynchronous code and allows you to use convenient constructs like .then() and async and await.




2. Simplified interface: The Fetch API has a simpler and more intuitive syntax. For example, to make requests, you don’t need to create an object and set its properties, as is the case with XHR.




3. Support for new features: The Fetch API supports new features such as Request and Response objects, which provide convenient methods for working with requests, responses, and their transformations.




4. Support for streams: The Fetch API supports streaming data, which allows you to work with large amounts of data as it is received.




5. Canceling requests: Although the Fetch API does not have built-in support for canceling requests, you can use the abort controller to do so, which makes managing requests more flexible.




6. Improved customization: The Fetch API provides more options for configuring requests, such as setting headers, caching modes, and other parameters.




7. cors support: The Fetch API provides more flexibility in working with CORS (Cross-Origin Resource Sharing), which allows for more flexible configuration of requests to resources from other domains.




8. Better error handling: When working with the Fetch API, you can better handle response statuses, since a request error (e.g. network unavailable) will reject the promise, while a successful response with a 4xx or 5xx code will not reject it, and you will need to check the status code yourself.