via window.fetch API.
One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn’t really made for what we’ve been using it for. We’ve done well to create elegant APIs around XHR but we know we can do better. Our effort to do better is the
fetch API. Let’s have a basic look at the new
window.fetchmethod, available now in Firefox and Chrome Canary.
via Introduction to fetch().
fetch() allows you to make network requests similar to XMLHttpRequest (XHR). The main difference is that the Fetch API uses Promises, which enables a simpler and cleaner API, avoiding callback hell and having to remember the complex API of XMLHttpRequest.
The Fetch API has been available in the Service Worker global scope since Chrome 40, but it’ll be enabled in the window scope in Chrome 42. There is also a rather fetching polyfill by GitHub that you can use today.
If you’ve never used Promises before, check out this great article by Jake Archibald.
In the one of my last articles I was looking at a few ways we could call asynchronous code in a synchronous flow. Each approach was trying to tackle the same problem of making 3 XHR requests (each to pull in a dummy tweet) and then displaying a status bar of total tweets, photos and favourites. Obviously we’d need the tweets before we could tally up any totals so we had to somewhat control these async requests in a synchronous fashion.
First we looked at nesting our requests into a ‘callback hell’ – a pattern familiar and avoided by Node.js developers. We then looked at 2 ways of breaking separate requests up into their own functions (creating slightly more code) and calling each consecutive function once a previous call was completed. And finally we looked at Promises and how they reduced lines of code and made things more legible.
I was pretty much sold on Promises as the answer to everything. That was, until I heard about generator functions and iterator objects, a new way to define functions that paused and continued and available in ECMAScript 6.
Now I’m not going to get into the nitty gritty of these ES6 iterators and generators, as far more intelligent people than me have already documented them in an much more elegant way than I ever could.
Let’s start with a story. A user story:
A friend of mine called me in the middle of the day with a very strange request. He told me
“Could you come over and help me to fill-in a form”.
I was surprised as filling forms is the easiest thing to do online, isn’t it? Even for not so-tech-savvy people.
So I went to my friend’s home and surprise, it wasn’t so easy! It took me 25 min to debug what was wrong with this website (a government one, in Bulgaria). The problem was missing validation (via XMLHttpRequest).
Of course, I called the agency, expecting everything to go to /dev/null/, but surprisingly they were interested in the problem, so I spent another 25 min explaining the problem and sending them all data they needed. These included:
Browser and OS version
Where exactly the problem occurs
Plugins installed on my friend’s browser
etc, etc, etc … you know what I am talking about.
It was exhausting.