A Simple Starter Guide to .fetch()
Think about the aspects of a good website. What makes it good in your eyes? It may be the organization or interactivity of the pages, or even the fact that it has pictures and gifs showing upon loading. Now, think about the aspects of a bad website. Obviously the opposite of the good aspects we have listed above, but we can also add how quickly the website loads on initial startup as well as navigating the pages.
Unless specified, browsers will wait until all of the data is loaded to show anything on the page. We can imagine that if a webpage had a ton of data to show, it may take a long time before the user can do anything on the page. That’s where AJAX (Asynchronous JavaScript and XML) comes into play.
Ajax works asynchronously. Simply, the basic HTML and CSS on a page will load for a user without a long wait time. Meanwhile in the backend, the Ajax technique will load other JavaScript or DOM elements behind the scenes, but won’t gunk up the process of the total load. An example of the Ajax technique is fetch().
Let’s talk about .fetch( ), baby
Let’s talk about you and me
Let’s talk about all the good things
And the bad things that may be
fetch() is a function that receives data, and processes it for the user to understand. For this demo, I created a small app that shows the functionality of fetch(). (For those reading who are currently enrolled in the Flatiron coding bootcamp, the basic layout may look similar to a Phase 3 lab)
[Disclaimer: This topic is still relatively new to me, so if any of the following is incorrect or misleading, I apologize in advance.]
For this example, I created a small database that held a few characters from the movie Mean Girls and spun up a server for them. Although in practice, you can use your own database or any available API that you have.
The first step in our index.js file is to create an event listener for all of the content to be loaded, and call a function ( getCharacters() ) immediately. There you can see that we have our fetch request.
A fetch request takes two arguments, but only one is required, the location of where the data is coming from. In our example we use the a page from the server that we spun up. But like I said, you can use urls, APIs, text files, and other locations, as long as there is data to be fetched.
What a fetch request returns is called a Promise. Not to bog down the blog, but in this example it is returning the data that was stored in my database:
The next step in the fetch request is to parse the data from that promise. That is done with a .then() attached to the fetch request. In our above image, we see two .then’s on separate lines; that is just for human understanding. Javascript doesn’t care if it is on one line continuously or separated by the new lines, it interprets the same. Let’s break those two lines down in the context of this overall app.
When making a fetch request, we get a promise object. That object needs to be parsed into JSON syntax so our Javascript can use it. In this line we are taking the promise object, and calling it “res” (response), and then turning that response into JSON syntax with the arrow function.
One important thing to note is that any .then statement will automatically take the previous return of the previous .then statement as an object. In this line above, we take the previously JSON-ified object and rename it characterData. A simple next step is to console.log(characterData) just to see what exactly you are working with. It could be a single object, or an array, or arrays or arrays of objects. It’s important that you know what you are working with in order to decide what you want to do with it.
In our example, we are taking the characterData that we requested from our webpage, and sending each of those objects to be rendered and show on the webpage itself. I’ll spare you those specifics and just show you the end result.
Fetching data is a very useful tool for web development that provides an easy, and asynchronous way to retrieve data for display without slowing down the process for the user. There is a lot more to the fetch( ) method than what I demoed today, but I hope this offers post offers some explanation into this amazing tool!
