Playing Fetch, But Not With An Animal

After 3 months of playing with Ruby and Rails, Flatiron School has finally let us move on to learning a little bit of JavaScript! Before learning any coding languages, it feels like JavaScript has more weight behind the name than most others. Even with the limited knowledge I had before starting the course, I knew that JavaScript was an overwhelmingly important part to what makes the internet work, but I didn’t know how much until I started diving into it with this phase of our program.

Early in our experience with JavaScript, we started to learn about fetch requests. Fetch requests, put simply, take the data given to the user through an API and allow that data to be placed on the webpage. You can use the fetch to perform a plethora of jobs. You can use a “GET” request to show data on the page, a “POST” request to add new data to the page, or a “PATCH” request to edit, or a “DELETE” request to delete some data entirely.

Fetch requests, as Flatiron explained to us, is a way to execute a technique known as AJAX. AJAX is used to present a page quickly to a user (QUICKLY being extremely important, as we know the average user doesn’t have the patience to wait through a long page load) and then add more information to the DOM after the page loads. Fetch allows us an easy entrance to employing AJAX for our applications.

Let’s check out a basic “GET” fetch request

The fetch request initially takes in a baseUrl (in this case it’s out of frame, but it’s http://localhost:3000). If we go into our console and add a breakpoint in the function on line 9 we see that resp is somewhat hard to understand:

Not the best! in that same line, we convert the response to json on line 11, which ends up looking significantly more readable:

That’s much better! At this point, we iterate over that array of data (which looks strikingly similar to our API, I might add) and get each individual element of that array to add to our DOM to appear on our webpage:

After each element is isolated, it’s passed into a new function elsewhere in our code to attach to the DOM and allow our users to begin to manipulate it.

Fetch requests are absolutely fundamental to efficiently use JavaScript and break into that world of programming. They make presenting data to the userbase a breeze once you get the hang of the in’s and out’s of them. With one more month of bootcamp left, I’m excited to take what I’ve learned in this JavaScript section and apply it to the last month of using the React framework!