FETCH API Part 1/4 (GET) by SilvenLEAF 
Tags: javascript, node, react, silvenleaf
Published: 2020-11-03 02:21:18

##### **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 is way easier than you think. And using it for a **GET** request is the easiest.

### SIMPLEST WAY TO USE FETCH FOR GET REQUEST
```javascript
  fetch(YOUR_URL);
```
Simply give your url on the fetch function. That's all. Without extra arguments, it's just a simple **GET request**.


## COMPLETE GUIDE FOR USING FETCH (GET)
## PROMISE VERSION
```javascript
fetch(YOUR_URL)
.then( response =>{
  //turning the response into the usable data
  return response.json( );
})
.then( data =>{
  //do whatever you want with this data. This is the data you wanted to get from YOUR_URL
  console.log(data);
});
```

## What is happening on the code?
First, we are calling the FETCH function passing the **URL** as the argument. Then this function gives us a **response**. But this **response** we get is **NOT** JSON. It's just an object with a series of methods we can use depending on what we want to do with the **response**, these methods include: **json( ), text( ), blob( ), arrayBuffer( )** etc. The one we want is the JSON one, because we want to handle our data as a **JSON object**. So we used **response.json( )**. It will turn that response into a JSON object. So, finally, now we get **data**. Now we can use it however we want. I just console.log(data). You do whatever you want.

You can simply copy this code and use your url and enjoy playing with it.

## ASYNC AWAIT VERSION
```javascript
const getData = async ( ) =>{
   const response = await fetch(YOUR_URL);

  //turning the response into the usable data
   const data = await response.json( );

   //now do whatever your want with this data. 
   console.log(data);
}

getData( );
```
## What is happening on the code?
The main concept is same with Promise version. Here we are calling the FETCH function passing the  **url** as the argument. It's **asynchronous**, that means it'll take a little time to fetch the response. So we used **await** keyword to pause until it fetches the response. 

[If you do NOT know about **async await**, do NOT worry. **My blog** explaining **async await** will be on **6th Nov 2020**, stay tuned]

When it fetches the response, it'll store it on the **response** variable. But as we know, we can not use it yet. We have to use a method on it to convert it into an usable data. Here we'll use **json( )** because we want to handle it as a JSON object. But, this **response.json( )** is also **asynchronous**. So we used **await** keyword again, to pause it until it converts the response into the usable data. When it's done, it'll store it on the **data** variable. Now you can do whatever you want with this data.

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


## A DEMO CODE

### ASYNC AWAIT VERSION
Copy-paste this code on your Browser console, (mine is Chrome) and hit enter.
```javascript
const myUrl = 'https://jsonplaceholder.typicode.com/todos/1'

const getData = async ( ) =>{
   const response = await fetch(myUrl);
   //turning the response into the usable data
   const data = await response.json( );
   //now do whatever your want with this data. 
   console.log(data);
}

getData( );

```


### PROMISE VERSION
Copy-paste this code on your Browser console, (mine is Chrome) and hit enter.
```javascript
const yourUrl = 'https://jsonplaceholder.typicode.com/todos/1'

fetch(yourUrl)
.then( response =>{
  //turning the response into the usable data
  return response.json( );
})
.then( data =>{
  //do whatever you want with this **data**. This is the data you wanted to get from YOUR_URL
  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 BLOG** is coming on **4th Nov, 2020**
on **FETCH API PART 2/4 (POST) (Series)**

# **Next Blogs DATE**
- **Nov 4th and Nov 5th 2020**, all remaining 3 parts of **FETCH Series**
- **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/password-hashing-with-bcrypt-easiest-explanation-5gpg">
Password Hashing with bcrypt (easiest explanation)
</a>

### Next 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>