FETCH - Using GET to receive data from a server

Fetch, it's not just a fun game to tire out your pupper (or your 3-year-old daughter) at the park. Fetch is instrumental in building an interactive web application, by allowing you to retrieve, update, delete, and store information in a database or databases.

Fetch is so important, it's taught right alongside JavaScript in the very first phase of my Flatiron School Software Engineer course. You need to understand the basics of fetch as a foundation before you can move on to the rest of the coursework.

So what is fetch? Fetch is an object method in JavaScript. Similar to other methods you are probably familiar with such as forEach, or reverse. What Fetch does is make a request to a server, and then either returns, updates, adds, or deletes data. In this blog we will focus on the GET fetch request. Which is used to return data from an API in the form of xml or json. The reponse object that fetch() eventually resolves must be conve

How to fetch? Fetch() takes one parameter, an url. So could be better illustrated as fetch(url). What fetch() returns is a promise. The promise is "I will return the data you asked for as soon as I've made the request, and received the data from the server. In the meantime, you can continue to do other things". This makes fetch() an asynchronous process. This promise allows us to continue to load our site or allows the user to interact with other elements while they wait for the data to be retrieved.

To handle this promise, we use .then. In plain English--"When you've completed the request I made, then do this with the data that you received". .then is ALSO a javascript object method and .then takes in a callback function as a parameter.

fetch('https://someserversaddress.com') //The URL of the server or API
.then( callback function )

If you recall earlier, the data that we receive as a response to our fetch request must be parsed to a usable format. We do this by calling a JavaScript method on the response object, such as .json() or or .text(). For this post, we will only focus on the .json() method.

This method eventually resolves the parsed data as a JavaScript object. The result of this method is NOT a json. It is the result of using json as the input to parse the original data. Common practice is to use r or resp as the parameter for the method.

fetch(URL) 
.then(r => r.json()) //.json() converts the string of data into an array

The return value of .then is also a promise. The return data of the .json() method is an object of arrays or a single object. How do we handle a promise? With a .then! In the next .then statement, you'll describe what you would like to do with the array of objects that you received. This is where you could iterate over the array to render data to DOM elements.

fetch(URL)
  .then(r => r.json())
  .then(dataArray.forEach(object => {
    console.log(object)
})

There you have it. A way to think about the fetch() GET function in a simple way. In future posts, we will go through POST/PATCH/DELETE methods for fetch(). I hope this helps you as you begin writing fetch() functions for your applications.

Key Takeaways

• Fetch() method is asynchronous. fetch() returns a promise which will eventually resolve to a response object.

• That response object is received as a stream of data that must be converted to a usable type.

• .json() uses json as the input to parse the data and the result is a JavaScript object.

• Handle promises using .then