HTTP request methods
Tags: programming, javascript, webdev
Published: 2021-08-13 18:39:10

In this post I would be sharing with you various types of request methods used to work with an API.
### What Are HTTP Request Methods?
An HTTP request is an action to be performed on a resource identified by a given Request-URL. *Request methods are case-sensitive, always noted in upper case.*

### How Do HTTP Requests Work?
HTTP requests work as the intermediary transportation method between a client/application and a server. The client submits an HTTP request to the server, and after processing, the server sends back a response. The response contains status information about the request.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uapyaa2ob49xctta1j7.png)

##### There are various HTTP request methods, but each one is assigned a specific purpose. Let's start -
### 1. GET Method -
GET method is used to retrieve and request data from a specified resource in a server. 

In this post I'll be using ['Swagger UI'](https://fakerestapi.azurewebsites.net/index.html) as a fake rest api to showcase how these requests work.

```js
let url = "https://fakerestapi.azurewebsites.net/api/v1/Activities";
fetch(url, {method: 'GET'})
.then(response => response.json())
.then(data => console.log(data));
// we receive the data from the api as the output
```
A GET request is often used to typically fetch json data from the server, there are different formats by which you can retrieve the data -
* XML
* HTML
* Text
* JSON

### 2. POST method -
Another popular HTTP request method is POST. In web communication, POST requests are utilized to send data to a server to create or update a resource. The HTTP POST method is often used to send user-generated data to a server. One example is when a user uploads a profile photo.
```js
let url = 'https://fakerestapi.azurewebsites.net/api/v1/Activities';
let data = {
  "id": 0,
  "title": "string",
  "dueDate": "2021-08-13T16:44:12.776Z",
  "completed": true
}
const options = {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
}
fetch(url, options)
  .then(res => res.json())
  .then(res => console.log(res));
// This way user data can be updated to the server.
```
The information submitted to the server with POST request method is archived in the request body of the HTTP request. 
**Here we use the JSON.stringify() method which converts a JavaScript object to a JSON string**

### 3. PUT method :
PUT is similar to POST as it is used to send data to the server to create or update a resource. The difference between the two is that PUT requests are [idempotent](https://developer.mozilla.org/en-US/docs/Glossary/Idempotent). 
This means that if you call the same PUT requests multiple times, the results will always be the same.
```js
const dataObject = {id: 1,
    title: 'Activity 1 update',
    dueDate: '2021-08-13T17:12:24.832Z',
    completed: true,
};

fetch('https://fakerestapi.azurewebsites.net/api/v1/Activities/1',{
    method:'PUT',
    headers:{
    'Content-Type':'application/json'
    },
    body:JSON.stringify(dataObject)
}).then(response=>{
    return response.json()
}).then(data=> 
console.log(data)
);
```

### 4. Delete method -
Just as it sounds, the DELETE request method is used to delete resources indicated by a specific URL. Making a DELETE request will remove the targeted resource.
```js
let url = "https://fakerestapi.azurewebsites.net/api/v1/Activities/30"
const deleteMethod = {
  method: 'DELETE',
  headers: {
   'Content-type': 'application/json; charset=UTF-8'
  },
 }
 fetch(url, deleteMethod) 
 .then(response => response.text())
 .then(data => console.log(data))
 .catch(err => console.log(err))
// This will delete the targeted id data from the server
```
**The difference from POST is that you will need the id of the record to DELETE or PUT**. Here we are using id = '30'
> Note that there's no need to parse the result. Parsing response to text will return in an empty string, and parsing it to JSON will give a parsing error.

### 5. PATCH :
A PATCH request is similar to POST and PUT. However, its primary purpose is to apply partial modifications to the resource. And 
just like a POST request, the PATCH request is also non-idempotent. Additionally, unlike POST and PUT which require a full user entity, with PATCH requests, you may only send the updated username.

Coming to the end I would give you a practical example to understand POST | PUT | PATCH method, so as it will be clear to you. *Example -*
`{ "username": "rkumar281", "email": "raghavkumar@domain.com" }`

If you POST this data to /users, then you might get back an entity such as :
```js
## /users/1
{
    "username": "rkumar281",
    "email": "raghavkumar@domain.com"
}
```
If you want to modify this entity later, you choose between PUT and PATCH. A PUT might look like this:
```js
PUT /users/1
{
    "username": "rkumar281",
    "email": "raghavkumar@gmail.com"       // new email address
}
```
You can accomplish the same using PATCH. That might look like this:
```js
PATCH /users/1
{
    "email": "raghavkumar@gmail.com"       // new email address
}
```
You'll notice a difference right away between these two. The PUT included all of the parameters on this user, but PATCH only included the one that was being modified `(email)`.

I hope you find the blog helpful in learning http requests, I've covered the most used requests, there are still more you can explore [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods).
Do put a comment on how you felt about the content & I'll be coming up with new blog post soon...