Yes let's talk about it!
I learned the Fetch API even before jQuery, I guess that's just a sign of the times! I remember building one of my first applications with Javascript, a simple app built on a Rails API that allowed users to rate and add tasting notes to their favorite wines. Fetch was the connection point that allowed me to retrieve data from my backend and present that data to the user. It's basically magic 😜. But let's dive in!
Heres the Webster definition of fetch: "to go or come after and bring or take back"
Followed by MDN's definition: "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."
I actually think the Webster definition explains fetch pretty well, fetch is a way for us to go and retrieve data, send new data, edit data, or delete data. I'n this article I will go over getting data.
In order to retrieve data with Fetch, you just need to provide Fetch with the resource you're trying to GET. For example let's say we are trying to get a list of todos from JSONPlaceholder. Following this specific API our fetch request would be the following:
fetch('https://jsonplaceholder.typicode.com/todos')
Awesome! So what's next?
Well, our fetch request returns something called a promise to us, which in simple terms is just a way to handle an API request asynchronously. Javascript is essentially saying, "Hey, I don't know how long it's going to take to retrieve all this data, but I promise to come back to it when I have the time." The function above, fetch(specific-url) returns to us an object that represents what the source, in this case the data the JSONPlaceholder API sent back, this is called the response.
Once this takes place we have to call the then() method on the response, which again, is just an object. Like so:
fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => { some type of processing })
If we were to console.log this response, it will look something like this:
Response {type: "cors", url: "https://jsonplaceholder.typicode.com/todos", redirected: false, status: 200, ok: true, …}
type: "cors"
url: "https://jsonplaceholder.typicode.com/todos"
redirected: false
status: 200
ok: true
statusText: ""
headers: Headers {}
body: ReadableStream
bodyUsed: false
Basically, fetch is returning the status of our GET request, as we see above our request is successful but this isn't very useful for our user. Our todos that we have requested are actually hidden in the body as ReadableStream, so we need to convert this data. Because we know our todos our formatted in JSON we can call response.json() to convert the ReadableStream.
fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())
This then() method returns to us another promise, so we can get the todos we were after with another then() call like so:
fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())
.then(todos => console.log(todos))
If you were to run this fetch in your console you will see that an array of objects are returned, which are all our todos! From here you can iterate through the data as you please, grabbing the pieces that you wish to display to the user! Well that was easy! GET is just one piece of Fetch in Javascript, and is an awesome way to retrieve data for your web applications. Thanks for taking the time to follow along!
Cheers,
Corbin
Top comments (0)