The worst part about working on sites that use AJAX is having to use the XMLHttpRequest API, unfortunately this isn’t always easy as we are using it for things it wasn’t really made for. To get around this developers often use libraries like jQuery or MooTools which provide an abstraction however underlying these libraries is still the same XMLHttpRequest API.

Over the past few years browsers have done a great job of providing us with better API’s and this has meant that we could stop relying on libraries and instead just use the API’s directly. In doing this they haven’t ignored XMLHttpRequest API, and have chosen to replace it with the Fetch API.

For those old enough to remember Mean Girls you might remember this particular bit:

Thankfully Fetch has happened and is now available to use in Firefox, Chrome and Opera. For all the other browser there is also a polyfill available (find it at https://github.com/github/fetch).

Using the Fetch API

The Fetch API is really simple to use, you simply call fetch passing the URL of the data source as the first parameter and an object containing the options as the second parameter.

// url (required), options (optional)
fetch('/foo/bar', { method: 'get' })

The API will then return an ES6 promise, meaning we can chain .then() onto the end of our fetch request, passing a success method as our first parameter and a error handling method as our second parameter.

// url (required), options (optional)
fetch('/foo/bar', { method: 'get' }).then(function(response) {
        //Do something with your response
}).catch(function(err) {
        //Handle any errors here
});

When previously using XMLHttpRequest, the API would buffer the response into memory but with the Fetch API instead, the response is a low-level body stream. In practice this means that in our success handler we need to handle our response. In a lot of cases you likely are going to be returning JSON from your server so you can simply call the .json() method on your response.

// url (required), options (optional)
fetch('/foo/bar', { method: 'get' }).then(function(response) {
        //Do something with your response
        var jsonResponse = response.json();
        console.log(jsonResponse);
}).catch(function(err) {
        //Handle any errors here
});

Gotcha’s

When using the Fetch API there are a number of gotcha’s you will find if you are not used to using API’s that return a streaming response. The one that got me was that once you have done something with the response you could no longer access it. The example below would throw an error:

// url (required), options (optional)
fetch('/foo/bar', { method: 'get' }).then(function(response) {
        //Do something with your response
        var jsonResponse = response.json();
        var jsonResponse2 = response.json(); //Stream has already been resolved so this will error
}).catch(function(err) {
        //Handle any errors here
});

Browser Support

fetch information{.bfEmbed}

Summary

This was a very quick introduction to using the Fetch API, further information can be found over on the MDN https://developer.mozilla.org/en/docs/Web/API/Fetch_API. Personally I am a big fan of the Fetch API and am using it on several of my new projects, if (like me) you want to use Fetch on the server there is also an Isomorphic Fetch polyfill available on NPM https://www.npmjs.com/package/isomorphic-fetch.

Are you looking for your next role?

I work as an Engineering Manager at Beamly where we are currently looking for both Frontend and Full Stack software engineers based in our London office.

Find out more