Basics Of Fetch
I recently started learning Javascript at my bootcamp course and one section I found particularly interesting was the fetch() method.
The fetch method seems to be a newer concept of jQuery.ajax(). To give you a brief break down on how the fetch method differs from the ajax method follow the link below:
Did you know that research shows that 40 percent of visitors to a website will leave if the site takes more than 3 seconds to load. Mobile users are even less patient.
Part of the solution to this problem was to create asynchronous code especially for code that has to access other resources for necessary data.
Asynchronous coding is defined as ‘a means of parallel programming in which a unit of work runs separately from the main application thread and notifies the calling thread of its completion, failure or progress…’ by Stackify. Or to put this into a simpler version, you wouldn’t wait for the roast chicken to be cooked before you start the potatoes ( I hope). You look to cook everything together so that it can all be finished around the same time.
I practiced fetch requests a lot by playing around with them in my developer tools. This can be accessed via View => Developer => Developer Tools. Make sure you navigate to the console tab.
Below is an example of a basic fetch request.
SO. Let’s break this down. The first part fetch(‘URL’) is a call to the specific path URL you are trying to retrieve data from. For instance a call to http://localhost:3000/images will return something called a Promise.
What is a Promise? It is the eventual completion or failure of the fetch request. Kind of like saying ‘I promise to return you an answer, whether it be Fulfilled or Rejected.’ Here we can see the Promise being returned. Great! But wait. What’s the .then mean? Well, exactly that. This line of code is saying, retrieve the request THEN console log the response so that I can see if it is working. The .then returns an object of this one image in our system.
Here we can see what is returned. However, we still need to pass it through one more .then to retrieve the object data and be able to render the necessary data onto our page.
Great this means we can then use the data retrieved to render the image to the page by passing the image object to a renderImage function.
So how about a POST request. For instance what happens when we hit the submit button on a form, how do we update the front end and the back end.
A simple POST request is needed.
First we need to use document.querySelector to find the form:
If you don’t know how to use querySelector click this link to find out more:
We then need to call an eventListener on the form:
in the addNewComment function that we would create we would create a new object to pass in to our database as well. Below is a very basic request. The apiHeaders used below are:
These headers can have far more data in. The body can have far more data in as well.
This should update our database with the new object. You will then need to call another .then to render the new comment! Hence why we passed the unordered list within the function called in the event listener. This will allow us to access the list of comments and update it on the front end.
So how about a patch? I found this one the trickiest to find any examples of online. I will try my best to give you a straightforward example!
So a PATCH request. This is a request where we want to update an object, a value of a property, something within our database. I will keep it relatively simple. Imagine you are wanting to update the name of someone in the database.
SO, before calling this PATCH request in the necessary function. We would need to first call the object and change the name first. Now, our fetch request needs to be changed slightly. As this is a specific patch request to a specific object in the database, we need to call our standard url + the object id. This will allow the update to target the correct object in the database.
As we would have changed the name prior to calling the PATCH request. The object being passed into the body will be the updated one! This should update the database. We would then simply need to call a new .then() to render the front end as well!
If you want to try a basic GET request. First navigate to this URL(`http://api.open-notify.org/astros.json`). Next navigate to the the top and try a request simply replacing the URL with `http://api.open-notify.org/astros.json`.
It should look something like this:
It’s a URL to the number of people currently in space!
Hope that helps and makes some sense!
