GET, POST, PATCH, and DELETE with real world example

I remember the first week of class being asked what real-world example I would use to describe GET, POST, PATCH, and DELETE. A few weeks in, I look back at my example and smile because I was completely off. So what exactly are they? Let’s take a closer look.

Think of client-server communication as a real-world Starbucks/client relationship. You walk up to the counter and order coffee or whatever you typically get. The barista sends your request, and someone presents you with the order. Let’s use this real-world example to explain these different types of request methods.

GET

GET is one of the commonly used HTTP protocol. It is used to request data from a specified resource. In the example we explained above, you are going to Starbucks, and getting your order is the same scenario in the GET method. Requests using GET should only retrieve data. You accessing medium article is a GET request

Opening "http://localhost:3000/comments"
or index.html

POST

As you are preparing to pay for the coffee you just ordered, you remember Aunt Jane also wants a coffee, so you kindly ask the barista to make it two. Updating the order in the “system” to add one more coffee is what we call a POST method. The POST method is used to submit a change which also updates the server.

const postURL = "http://localhost:3000/comments" //your url endpoint
let optionsPost = {
method: "POST",
headers: {
      "Content-Type" : "application/json",
       Accept : "application/json",
},
body : JSON.stringify({
    "imageId": 1,
     "content": addComment.innerText
     "likes": newCount;
})
}
fetch(postURL, optionsPost)
.then(res => res.json())
.then(data => console.log(data))
}

PATCH

Wait, you just remembered Aunt Jane likes two shots of espresso in her coffee instead of one. You go back to the poor barista and say, “can you actually add one more shot in the coffee”? So he edits the order and sends the updated request. This is what we call the PATCH method. The PATCH method is used to apply partial modifications to a resource.

const patchURL = "http://localhost:3000/images/1" //url endpoint
let optionsPatch = {
method: "PATCH",
headers: {
     "Content-Type" : "application/json",
     Accept : "application/json",
},
body : JSON.stringify({
     "likes": updatedNewCount
})
}
fetch(patchURL, optionsPatch)
.then(res => res.json())
.then(data => console.log(data))
}

Make sure the endpoint on your patch request URL has an “id” to target what you are trying to update. In this scenario, I am trying to update a like button to have an “images/ 1” as an endpoint. Here is a snippet of my db.json

{
"images": [
{
"id": 1,
"title": "Woofing those bugs away",
"likes": 44,
"image": "coder-dog.png"
}
],
"comments": [
{
"id": 1,
"imageId": 1,
"content": "What a cute dog!"
},
{
"id": 2,
"imageId": 1,
"content": "He's got a nose for bugs!"
}
]
}

DELETE

Aunt Jane is not having a good day today. She changed her mind about wanting a coffee, so now you have to go back and face the barista one more time. You quickly go to the counter and tell the barista to cancel the order; he then deletes the order from the system. This is what we call a DELETE method. The DELETE method deletes the specified resource.

let options = {
method: "DELETE",
headers: {
      "Content-Type": "application/json",
       Accept: "application/json"
}
};

I hope these examples are helpful and would make it a bit easier to understand when to use which method.