This is a SERIES
FETCH API Part 1/4 (GET)
FETCH API Part 2/4 (POST)
FETCH API Part 3/4 (PUT)
FETCH API Part 4/4 (DELETE)
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
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
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
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.
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.
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 https://www.linkedin.com/in/silvenleaf/ or on Twitter (as @silvenleaf ).
If you wanna know more about me, this is my portfolio website SilvenLEAF.github.io
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
Password Hashing with bcrypt (easiest explanation)
Top comments (0)