Progressive Web Application Development by Example

Using the Fetch API

Because AJAX has become a popular way to drive DOM manipulations, let's see how this is done using Fetch. This will be a slightly contrived example where a Podcast's logo is fetched and set to the corresponding IMG element:

var logo = document.querySelector('.podcast-logo');fetch("…/600x600bb.jpg").then(function(response) {  return response.blob();}).then(function(logoBlob) {  var objectURL = URL.createObjectURL(logoBlob);  logo.src = objectURL;});

If you are familiar with composing an XMLHttpRequest, this example should look very clean and simple. The first thing you will notice is that the only parameter needed is a URL. This is the simplest form of fetch.

This code does the same thing, but uses the XMLHttpRequest object: ...