Using Fetch…
If you are learning JavaScript, then it won’t be long before you are introduced to the Fetch API. In this article we will discuss what Fetch is, how to use it and how to update the DOM when we get a response! The word API can be used for many things but in the context of using Fetch, we are talking about some data that we can use in our website or the Fetch API itself.
What is Fetch?
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global
fetch()method that provides an easy, logical way to fetch resources asynchronously across the network. -MDN web docs
In other words, the Fetch API, at the very minimum, allows us to GET a resource (usually in the form of JSON) from a server, as long as the server allows it! This JSON is usually just data that looks very very similar to objects (or arrays, or arrays of objects…) in JavaScript! ;)
Using Fetch!
To use the Fetch API, all we have to do is call fetch() and give it the URL as the first argument. Feel free to open up the developer tools and enter the following code into the console. It might take a second or two to log out the data, its hosted for free on heroku so it may need to fire up!
The example above is using a real URL that sends back JSON for us to use! Fetch returns a promise that contains the response. The response itself isn’t very useful at the moment but we can call .json() on the response to extract the json content. Calling .json() on our response also returns a promise with our JSON data passed to it. Now in our second .then() method we can use our data and update the DOM. Our json in this particular example is an array of objects.
Instead of console.log(ourData), let’s iterate over the array and create new html elements and attach them to the DOM.
Adding our JSON to the DOM!
In the above example, we are iterating over our array of objects and for each item the array, we are creating a new <p> html element, setting the innerText of that element to item.content (the post content in this example) and then attaching it to document.body.
We can also use Fetch to post data to the server!
We may want to save data to our database. We can use Fetch to also send data (again, usually in the form of JSON) to the server so we can persist the data.
This may look more complicating but its still the same concept as before only this time we are sending some data to the server and our response is usually the newly created(saved) object. Fetch can accept a second argument in the form of an object. This object (normally called config) needs a few key/value pairs. The first is the method, in the example above, we are setting the method to ‘POST’. Our config also needs some headers (telling the server what type of data is incoming and what type of data we accept as a response). And the last thing in our config object is the body. The body is the actual data we want to persist or have the server process. Also, since we are making an HTTP request, the data we send must be a string hence the JSON.stringify(ourData). JSON.stringify() is built into JavaScript that takes an Object and basically turns it into JSON!
This is just the beginning of the Fetch API. Once you wrap your head around using Fetch and manipulating the DOM based on the json data you should also start learning how to handle errors and using Fetch for other Restful actions.
