In this blog we will discuss the most frequently used HTTP Request methods. These methods include Post, Patch, Delete and get. We will cover each of these methods and the differences between them as well as when to use each one.
First we need to understand what each method does.
GET - is used to get/fetch data from a server
PATCH - is used to update an element or resource on a webpage.
POST - is used to create and element or a resource
DELETE - is self explanatory. It deletes a resource
POST and PATCH can get confusing but the main trick I use to remember which needs to be used is PATCH is for updates to an existing element where as POST is used to create an entire new one.
Lets look at our GET syntax first.
fetch(websiteURL)
.then(response => response.json())
.then(newData => console.log(newData))
this fetch will return the data in a format that we can begin iterating through it to build dynamic functionality in our website.
Next we will look at our PATCH syntax. There are a few differences from the GET.
fetch(websiteURL/`${id})`,{
method: 'PATCH',
headers;{content-type: 'application/json'},
body: JSON.stringify({exampleObject})
.then(response => response.json())
.then(newData => console.log(newData))
The big differences to note on a PATCH request.
- in the fetch you also need to add in the ID of the resource you are updating. This allows the fetch to know exactly where to go to do the update. This is also a helpful reminder that PATCH is used to update resources not create entirely new ones. You will also see we need to create a header stating what action we want(PATCH) followed by headers and a body. The header will be the same as long as you are working in JSON. And you will always have to use the stringify syntax in the body.
Next lets take a look at POST. POST is very similar to PATCH with a few differences. Lets take a look at the code first.
fetch(websiteURL,{
method: 'POST',
headers;{content-type: 'application/json'},
body: JSON.stringify({exampleObject})
.then(response => response.json())
.then(newData => console.log(newData))
The main difference you can see here is that there is no ID added to the end of the website URL. This is becaouse our POST is actually going to create an entirely new element which does not have an ID yet. It will gain that id once the POST occurs and the database receives it.
Lastly we will look at our Delete Method. Delete is a bit more simple with the code.
fetch(websiteURL/`${ID}'{
method: 'DELETE'
})
.then(response => response.json())
.then(newData => console.log(newData))
Here are the main takeaways
You need to have an Id in the URL so that the method knows exactly which resource to delete.
No Body or headers are needed for this method
Overall these HTTP methods will help you manage the information on your database and have an interactive application. The main things to remember are PATCH and DELETE need IDs and POST and FETCH do not. For more information on the syntax of these methods feel free to check out this link[https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods]
Top comments (0)