Member-only story
From XHR to Fetch With Async/Await on the Finish Line
A look at the evolution and history of requests in JavaScript
It’s been a while since my last piece. I’ve been busy exploring other skills related to my technical ones. But the time has now come to share some exciting things about my favorite language: JavaScript!
XMLHttpRequest Synchronous
Long before async JavaScript was a thing, we used the XMLHttpRequest (XHR) to call an API to get data without refreshing our page.
The XHR is event-based. So when we used to make an AJAX call, all the code below the call had to wait until we got our response back from the server (aka synchronous). Our JavaScript was blocking all the other code.
If we got back an error instead of the response we expected, then the errors in our JavaScript became huge:
In the example below, you can see that this XMLHttpRequest is blocking everything below it, until there is a successful message back from the API.
XMLHttpRequest Asynchronous
We don’t want our code to pause until our response is back from the server.— we just want to get back when we’ve received the result from the server.
Luckily, there is a way to make the XMLHttpRequest asynchronous, with the async parameter.
We do this by changing the xhr.open(“GET”, url, false); to xhr.open(“GET”, url); because if we skip the latest parameter in the open method, the value will be true for the async parameter.
