FETCH API Part 4/4 (DELETE) by SilvenLEAF
Tags: javascript, react, node, silvenleaf
Published: 2020-11-06 14:12:07

##### **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 **DELETE** request is way easier than you think.

### SIMPLEST WAY TO USE FETCH FOR DELETE REQUEST:
```javascript
fetch(YOUR_URL, {
  method: 'DELETE',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(YOUR_ADDITIONAL_DATA)  //if you do not want to send any addional data,  replace the complete JSON.stringify(YOUR_ADDITIONAL_DATA) with null
})
```
## 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 DELETE

- **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. 

**Remember**: we use it only if we send any additional data,  if we are not sending any additional data, replace entire body with null and you do not need this 'Content-Type' header. 

- **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()**. But if you do not want to send any addional data, just type **null**.

- **YOUR_ADDITIONAL_DATA** is a JavaScript object.


## COMPLETE GUIDE FOR USING FETCH (DELETE)
## PROMISE VERSION
```javascript
const myDataObject ={ userId: 1}
fetch(YOUR_URL, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(myDataObject)
})
.then(response => {
    return response.json( )
})
.then(data => 
    // this is the data we get after doing the delete request, do whatever you want with this data
    console.log(data) 
);
```
## What's happening on the code?
We have the additional data inside the variable **myDataObject** that we want to send with our DELETE request. Now we passed the **URL** where we want to make the DELETE request, 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 **DELETE** and also mentioned that our additional 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 make a **DELETE** request to that url with that additional data, 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 **DELETE request** with FETCH so easily.

## ASYNC AWAIT VERSION
```javascript
//additional data
const myDataObject = { userId: 1 };

const deleteData = async ( ) =>{
   const response = await fetch(YOUR_URL, {
       method: 'DELETE', 
       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);
};
deleteData( );
```
## 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 **deleteData** and then called it. Do NOT worry. I'll explain all about **async and await** on **Nov 7th 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
const deleteData = async ( ) =>{
   const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
       method: 'DELETE', 
       headers: {
         'Content-Type': 'application/json'
       },
       body: null
   });

  const data = await response.json( );

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



## PROMISE VERSION
Copy-paste this code on your Browser console, (mine is Chrome) and hit enter.
```javascript
fetch('https://jsonplaceholder.typicode.com/posts/1', {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json'
    },
    body: null
})
.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!!


# **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-3-4-put-by-silvenleaf-3oe8">FETCH API PART 3/4 (PUT) (easiest explanation)</a>

### Next Blog
<a href="https://dev.to/silvenleaf/async-await-easiest-explanation-by-silvenleaf-2o0g">
Async Await (easiest explanation)
</a>