Understanding the HTTP Methods

In this post we are going to explore the fundamental of HTTP methods. HTTP defines set of methods, each of them indicates specific action for a resource. There are most commonly used five methods.

  • GET
  • POST
  • PUT
  • PATCH
  • DELETE

GET

GET is used to request data from the server. It is not used to create, update or delete data from the server.

Example using axios,

axios.get(`${api_endpoint}`)
     .then(res => console.log(res.data))

It is cacheable meaning we can cache the response.

POST

POST is used to create new entry (data) to the server. Example using axios,

axios.post(`${api_endpoint}`, {
  name: "John Doe"
}).then(res => console.log(res.data))

Most of the cases it is cacheable.

PUT

PUT creates a new data or update an existing data. Example of PUT,

axios.put(`${api_endpoint}/${id}`, {
  name: "John",
  age: 24
}).then(res => console.log(res.data))

PUT is not cacheable.

PATCH

PATCH is used when you want to apply partial update to a resource. Example of PATCH,

axios.patch(`${api_endpoint}/${id}`, {
  age: 25
}).then(res => console.log(res.data))

PATCH is not cacheable.

DELETE

DELETE deletes a specified resource. Example of DELETE,

axios.delete(`${api_endpoint}`, {
  data: {
    id: 254512
  }
}).then(res => console.log(res.data))

DELETE is not cacheable.

Difference between POST and PUT

The difference between POST and PUT, PUT is idempotent meaning if an entry does exist it updates the entry else creates a new entry, where POST always creates a new entry.

Difference between PUT and PATCH

The difference between PUT and PATCH, for PUT you need to send entire data and for PATCH you need to send only attribute that you want to update. For example, for PUT if you want to change the name attribute you need to send name, age etc

axios.put(`${api_endpoint}/${id}`, {
  name: "Michael",
  age: 24
}).then(res => console.log(res.data))

Where in PATCH you just need to send name attribute

axios.patch(`${api_endpoint}/${id}`, {
  name: "Michael"
}).then(res => console.log(res.data))

2 thoughts on “Understanding the HTTP Methods”

Leave a Comment

Your email address will not be published. Required fields are marked *