HTTP REQUEST Methods-GET, POST, PUT, PATCH, DELETE. (A Walkthrough With JavaScript’s Fetch API)

Published in

The Startup

4 min readOct 20, 2020

In this article, we are going to learn the most common HTTP methods(POST, GET, PUT, PATCH, DELETE). If you are a beginner then you are confused when using those HTTP methods. Let’s try to clear your confusion through the examples.

We will be using this fake API for a demonstration. with credits to https://jsonplaceholder.typicode.com/

The most commonly used HTTP methods POST, GET, PUT, PATCH, DELETE are similar to CURD (create, update, read, delete) operations in the database. Just try to remember below the key Points

Create NEW record =>POST
read=>GET
If the record exists then update else create a new record=>PUT
update/modify=>PATCH
delete=>DELETE

The Get Method

Get method is used to retrieve or get the information from the given server using a given URL. In REST CURD, it performs the read operation.

Let’s try GET method :

Let’s set up an HTML file that you can run locally on your browser. Create a file called get.html.Let’s look at the code :

The Post Method

Post is used for sending data to the server such as uploading a file or transferring some data or adding a new row to the back end table to any kind of web form. In a simple sentence, we can say that the post method is used for inserting new items in the backend server. In REST CRUD operation it performs the create operation.

Let’s try the post method:

Again create a post.html file that can run in your local browser. Let’s try the code:

Note that we needed to pass in the request method, headers, and body. We don’t pass these in the GET Method because these fields are configured by default for the GET request but we need to specify them for all other types of requests.

The server we are using is a placeholder service, so the server is just simulating the correct responses. No actual change is being done to the API, so don’t be confused. If you go to these website https://jsonplaceholder.typicode.com/todos do not find the new resource added.

The PUT Method

The PUT method is most often used to update an existing resource.

let’s try to understand the PUT method mechanism:

In HTTP.PUT method, the resource is first identified by the URL and if it exists, then it is updated, otherwise, a new resource is created. In simply we can say that If the resource exists then update else create a new resource.

Let’s try to understand the put method through the code

Again create a put.html file. Let’s try this!!!

THE PATCH METHOD

The PATCH method is used to update the values of the resource properties.

let’s look at the patch method

Before writing the code look at the below screenshot which is taken from the placeholder where userID:1 this userID has two property one is the title & another one is the completed. Respectively their values are ‘delectus aut autem’ & ‘false’.Here we are going to update the values of the resource properties.