Let’s play Fetch!
The Fetch API GET , POST & PATCH explained
While learning Javascript one of my biggest hurdles has been attempting to grasp the concept around something called “Fetch” . A game i love to play with my dog , all of a sudden became the bane of my programming existence.So i decided to take a look at what is REALLY happening with Fetch.
The Fetch Api is Javascript’s way to retrieve or “fetching” resources , in this case data from an API. The Fetch API usually takes in two arguments, the first usually being the URL you are pulling data from and the second argument, which is optional is an HTTP verb. If a second argument is not provided your Fetch request will always default to the GET http verb .
The GET method is used to retrieve data from the server. The HTTP GET verb is a read-only method, so it has no risk of corrupting the data. Down below is an example of a “basic fetch”.
fetch ("http://localhost:3000/quotes").then(response => response.json()).then(quotes => renderQuotes(quotes))
After Fetch takes in the arguments of the URL and an HTTP verb, it then returns a promise . A promise lets Fetch know want to do once all the data from the API has loaded. Fetch accomplishes this by using the “.then” method. In the example above, we want to get back the data we receive in a JSON format, that is accomplished by calling“ .json” on our response from the API.The next “.then” instructs what is to be done with the data after it is received and turned into json. In the example above , the data is being passed into a function called renderQuotes which is defined later on.
A default GET request is not the only request a fetch can make.
The POST method sends data to the server and creates a new resource. The API service will associate the new resource by assigning it an ID . In short, this method is used to create a new data entry and is usually takes information from a form.
fetch("http://localhost:3000/quotes/",{method : "POST", <=== 'request method'headers: {"content-type": "application/json", <=== 'headers'"accept": "application/json"},body: JSON.stringify({ <===== 'body''author': author'quote': quote
})}).then(resp => resp.json()).then( puppy => renderPuppy(puppy))}
Unlike in a GET fetch, in a POST fetch we need to pass in the request method, body, and headers. We did not pass these in our for the GET method because by default the body and headers are set up by a GET request, but we need to specify them for all other types of requests. In the body, we assign values to the resource’s attributes, stringified, which means it exactly what it sounds like, it turns your response into a JSON string.
The fetch request i have had the most difficulty with has been a PATCH fetch.The PATCH method modifies an existing resource
fetch ("http://localhost:3000/quotes/1", {method: "PATCH",headers: {"content-type": "application/json","accept": "application/json"},body: JSON.stringify ({'likes': likes})}).then(response => response.json()).then(renderQuotes)}
During a patch request , the body is only required to contain the specific changes to the data. A set of instructions describing how that object or data should be changed, and the API will create a new version of the data according to that instructions passed in during the patch request. In the example above “likes” is the data that will be getting updated.
As a new javascript developer knowing how to query a database or an API is a must have skill. All real world applications pull data from somewhere, and being able to get that data is key! Fetch helps make this happen, so mastering and understanding fetch will make any new javascript developers job a breeze!
