FETCH API Part 3/4 (PUT) by SilvenLEAF
Tags: javascript, react, node, silvenleaf
Published: 2020-11-05 15:09:49

##### **This is a SERIES**
<a href="https://dev.to/silvenleaf/fetch-api-easiest-explanation-part-1-4-get-silvenleaf-21e2">
**FETCH API Part 1/4 (GET)**</a>
<a href="https://dev.to/silvenleaf/fetch-api-easiest-explanation-part-2-4-post-by-silvenleaf-1kmh">
**FETCH API Part 2/4 (POST)**</a>
<a href="https://dev.to/silvenleaf/fetch-api-easiest-explanation-part-3-4-put-by-silvenleaf-3oe8">
**FETCH API Part 3/4 (PUT)**</a>
<a href="https://dev.to/silvenleaf/fetch-api-easiest-explanation-part-4-4-delete-by-silvenleaf-4376">
**FETCH API Part 4/4 (DELETE)**</a>

***
Using Fetch Api for **PUT** request is way easier than you think.

### SIMPLEST WAY TO USE FETCH FOR PUT REQUEST
```javascript
fetch(YOUR_URL, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(YOUR_DATA_THAT_YOU_WANT_TO_PUT)
})
```
## What's happening here?
Here we are passing **2 arguments** into the **fetch function**, **1st one** is **YOUR_URL**, and **2nd one** is **an object describing about the request**.

- **method**: it's telling what type of request it is, here we described it as PUT

- **Content-Type**: it tells what kind of data we are sending. Here it is **application/json** that means we are sending json data. There are other options too, depending on what we are sending. But our main focus is this one.

- **body**: it contains the actual data that we are sending. Here we have to stringify our javascript object if we want to send it. So we used **JSON.stringify()**

- **YOUR_DATA_THAT_YOU_WANT_TO_PUT** is a JavaScript object.


## COMPLETE GUIDE FOR USING FETCH (PUT)
## PROMISE VERSION
```javascript
const myDataObject = { name: `SilvenLEAF`, age: 19, isTeen: true};

fetch(YOUR_URL, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(myDataObject)
})
.then(response => {
    return response.json( )
})
.then(data => 
    // this is the data we get after putting our data, do whatever you want with this data
    console.log(data) 
);
```
## What's happening on the code?
We have the data inside the varriable **myDataObject** that we want to put. Now we passed the **URL** where we want to put, as the **1st argument** on the fetch function. Then we passed **an object** as the **2nd argument**, it describes more about the request.

Here we described the request as **PUT** and also mentioned that our data that we will send is a json object using **application/json**. Then we described the data inside **body** property. It must be stringified. So we used **JSON.stringify( )** to stringify our javascript object. then we are done. It **puts** our data to that **url** and then we get a **response**.

But as we already know that we can not use this response, we need to parse it first. (See my Prev blog describing it in details  <a href="https://dev.to/silvenleaf/fetch-api-easiest-explanation-part-1-4-get-silvenleaf-21e2/edit">FETCH API PART 1/4 (GET)</a>). After parsing it, we get the usable data on the **data** variable. Now that's how we make a **PUT request** with FETCH so easily.

## ASYNC AWAIT VERSION
```javascript
//data that you want to send
const myDataObject = { name: `SilvenLEAF`, age: 19, isTeen: true };

const putData = async ( ) =>{
   const response = await fetch(YOUR_URL, {
       method: 'PUT', 
       headers: {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(myDataObject)
   });

  const data = await response.json( );

  // now do whatever you want with the data  
   console.log(data);
};
putData( );
```
## What's happening on the code?
The concept is totally same as the Promise version.

ONE NOTE: To use **async and await**, we define a function, then we call it. That's why use created a function named **putData** and then called it. Do NOT worry. I'll explain all about **async and await** on **Nov 6th 2020**.



### **Play with these codes to understand it better**

## ASYNC AWAIT VERSION
Copy-paste this code on your Browser console, (mine is Chrome) and hit enter.
```javascript
//your data to send
const myDataObject = {
	"userId": 1,
	"id": 1,
	"title": "The blog of SilvenLEAF",
	"completed": false
};


const putData = async ( ) =>{
   const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
       method: 'PUT', 
       headers: {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(myDataObject)
   });

  const data = await response.json( );

  // now do whatever you want with the data  
   console.log(data);
};
putData( );
```



## PROMISE VERSION
Copy-paste this code on your Browser console, (mine is Chrome) and hit enter.
```javascript
//your data to send
const mySecondDataObject = {
	"userId": 1,
	"id": 1,
	"title": "The blog of SilvenLEAF",
	"completed": false
};



fetch('https://jsonplaceholder.typicode.com/posts/1', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(mySecondDataObject)
})
.then(response => {
    return response.json( )
})
.then(data => 
    // this is the data we get after putting our data, do whatever you want with this data
    console.log(data) 
);
```


## If you **have any questions** or **If you are stuck**
Feel free to reach out to me. You can also contact me on LinkedIN <a href="https://www.linkedin.com/in/silvenleaf/">https://www.linkedin.com/in/silvenleaf/</a> or on Twitter (as @SilvenLEAF).

If you wanna know more about me, this is my portfolio website <a href=" https://SilvenLEAF.github.io">SilvenLEAF.github.io</a>

#### I'd **LOVE** to be your friend, feel **FREE** to reach out to me!!
### **FETCH API PART 4/4 (DELETE)(Series)** coming on **6th Nov, 2020**
## **NEXT BLOG** is coming on **6th Nov, 2020**
on **ASYNC and AWAIT**

# **Next Blogs DATE**
- **Nov 6th 2020**, **async and await**

- **Nov 8th 2020**, how to use **role-based auth system**

- **Nov 10th 2020**, **Change CSS variables with JavaScript**

- **Nov 12th, 14th, 16th 2020**, **Create login signup system with Passport (Series)**

- **Nov 18th 2020**, **How to create Login with Google**

- **Nov 20th 2020**, **How to create Login with Github**

- **Nov 22th 2020**, **How to create Login with LinkedIn**

- **Nov 24th 2020**, **How to create Login with Twitter**

- **Nov 26th, 28th, 30th 2020**, **Password Reset Series (with Node.js and React)**

## **If this blog was helpful to you**,
# **PLEASE** give a **LIKE** and share, 
It'd mean a lot to me. Thanks



### Prev Blog

<a href="https://dev.to/silvenleaf/fetch-api-easiest-explanation-part-2-4-post-by-silvenleaf-1kmh">FETCH API PART 2/4 (POST) (easiest explanation)</a>

### Next Blog
<a href="https://dev.to/silvenleaf/fetch-api-easiest-explanation-part-4-4-delete-by-silvenleaf-4376">FETCH API PART 4/4 (DELETE) (easiest explanation)</a>