fetch() is not the only way JS can deal with data from servers, but it might be the easiest. The go-to method used to be XMLHttpRequest, however that method is starting to die off. Any developer starting out should take some time to get familiar with this new built in API.

fetch() uses promises, so read this if you don’t know what those are

The Big Picture

I’m paraphrasing a bit here, but javascript.info breaks down the fetch() basics nicely:

1. fetch() makes network request to a url and returns a promise. 2. That promise resolves with a response object when the remote server responds with headers. 3. To read the response body, we have to call a response method on it, like text() or json() , which will return another promise whose resolve value is the body of the response.

For a more detailed technical breakdown, I encourage you to check out that javascript.info link. Also, Google wrote a great article and they unsurprisingly go into more depth than little old me.

Breakdown

fetch() creates a promise that resolves with a response object. Now, that response object does have a body, but it’s something called a readable stream object. Our data is in there, but the only way to get it out is through a response method which returns our data as another resolved promise value. So we need one more then() to actually use our data. Here’s a basic pseudo code version of what’s happening:

fetch(url)

.then(function(theResponseObject) {

return theResponseObject.methodToGetToData()

})

.then(function(myUsableData) {

// manipulate/show/log our data

})

.catch(function(error)

// error handling here

);

If any of those steps gets rejected, you would just catch() it.

Working with an example

So now lets talk through an example. For this, we’ll use the fabulous JSONplaceholder site, which gives dummy JSON files that follow REST conventions. Perfect for testing and tutorials. Below, let’s put a “user” on our page:

Our fetch() resolves with a response object, which is taken into our first then() method. I logged some basic properties, but I encourage you to poke around on your own as well. Our first then() returns response.json() , which is a resolved promise that holds our data. In this case it’s JSON, but if it were just text, we could’ve used the text() response method.

In our second then() , we actually get to manipulate our data. I’m just using document.write() for this tutorial, but now that you have access to the data, you could put it into your page however you want. The second then() just returns our data to reinforce the idea that chaining can go on as long as you like. It all ends with logging our user to the console.

So for every fetch() whose data you want to show or manipulate you will need at least two then() methods: the first to return the response method that retrieves your data, and the second then to actually work with the data.

Fetch isn’t just for getting

Our apps would hardly be dynamic if they could only read data, so fetch() can take a second argument, a request. You simply pass in an object to fetch() that specifies the type of request you want to make, along with the headers and body and whatever else you need. The kind people at Google created this example code in their article on fetch:

fetch(url, {

method: 'post',

headers: {

"Content-type": "application/json; charset=UTF-8"

},

body: 'foo=bar&lorem=ipsum'

})

.then(json)

.then(function (data) {

console.log('Request succeeded with JSON response', data);

})

.catch(function (error) {

console.log('Request failed', error);

});

However, to send data from your page, you need to set up your servers to handle incoming info properly. Which, is a bit beyond the scope of this tutorial. But in most web frameworks, sending data via fetch is just like doing it with form data. The rails docs have a great section on using JSON Parameters for those who are interested.

Using fetch() on your own site

fetch() can go to any url, including your own server. To visit your site’s own files, just give a relative path name instead of a URL. If fetch() doesn’t see “http”, it will assume you are going from your root directory. This works on production or localhost servers. Here’s a simple example of fetch() retrieving some JSON data from my root folder on my local test server:

fetch(‘test.json’).then((r) => r.json()).then(console.log)

// LOG: {a: 1}

You can also post data to your own server by simply providing a relative URL and not an absolute one. Again, your site must be able to handle incoming data for that to work.

(by the way, setting up a local server isn’t hard and is well worth looking into)

Go forth and fetch

And there you have it, the very basics of fetch() . I highly encourage reading the MDN docs, the Google and javascript.info articles as well. There’s also a nicer way to use fetch with Async/Await, once you’re comfortable with this syntax, I encourage you to check it out. But the best way to learn is to do, so get out there and build a fetching new site.

happy coding everyone,

mike