Introduction to the Fetch API

For years, XMLHttpRequest has been web developers trusted sidekick. Whether directly or under the hood, XMLHttpRequest has enabled Ajax and a new type of interactive experiences, from Gmail to Facebook.

The Fetch API aims to replace XMLHttpRequest as the foundation of communication with remote resources. How this new API looks like and what problems it solves is the topic of this article.

The Fetch API

The Fetch API provides a fetch() method defined on the window object, which you can use to perform requests. This method returns a Promise that you can use to retrieve the response of the request.

To illustrate the Fetch API, we'll use a few lines of code that retrieve photographs using the Flickr API and insert them into the page. At the time of writing, this API isn't well supported. So, to have the code working I suggest you to try it using the last stable version of Chrome, which is version 43. Also note that the code needs you to replace your API key in place of the placeholder I set ("your_api_key").

As the first task, you have to retrieve a few pictures of penguins from Flickr and display them in your page.

Continue reading %Introduction to the Fetch API%

by Ludovico Fischer via SitePoint