create account

Fetching API -- JavaScript Tutorial by pakgamer

View this thread on: hive.blogpeakd.comecency.com
· @pakgamer ·
$9.69
Fetching API -- JavaScript Tutorial
## <center> Hello Everyone</center>

In the last post, we have discussed JavaScript local storage which is also a very important topic in learning JavaScript. If you haven't read that tutorial please read it because it will help you in the future. In this post, we are going to learn how can we fetch API. This is gonna be a simple tutorial. As we are going to learn about promises in the upcoming post so this tutorial will give you idea about what promises is and what exactly they do.  So let me start directly with the visual studio.


![erer.png](https://images.hive.blog/DQmdeWnJztWjjJG1N64XskRhPePu5X9c8sRhwi8zqE3hM9u/erer.png)

So here I have an HTML file open in my visual studio 

![image.png](https://images.hive.blog/DQmdmXh5QW5v6CCUrg45Reugza3zKMVqk37YtP1FPgb4K1E/image.png)


And this fetchAPI.js file is linked to it.
![image.png](https://images.hive.blog/DQmSGuczp4Y6jp3M3rZAzz4XJAjVAptPyk8ThiaUPS9oFkS/image.png)

so whatever I write here is executed.

![image.png](https://images.hive.blog/DQmUAB9Ls6CvibTjep5VPcaCG2vDYwH3E3YhDAkswaCT7Mp/image.png)


```
async function fetchAPI(){
    const response= await fetch('https://api.github.com/users')
    const conJSON=response.json();
    return conJSON;
   }
   
   let obj= fetchAPI();
   obj.then(data=> console.log(data));
```

Here I am fetching data from a GitHub API which returns some data of users. Here I am using async/await function.  First I have a function with fetch API name. The async function actually. Then I have a variable with name response which is using await. Then a conJson which is returning the response as JSON. and then I am returning that conJSON variable.


ok now let's try another API (fake API.)

![image.png](https://images.hive.blog/DQmQDra8mxbva8thxA1PyjFMgEQ4BYbevnJi9WGbmX1THk8/image.png)

```
async function fetchAPI(){
    const response= await fetch('https://jsonplaceholder.typicode.com/todos/1')
    const conJSON=response.json();
    return conJSON;
   }
   
   let obj= fetchAPI();
   obj.then(data=> console.log(data));
```


![image.png](https://images.hive.blog/DQmWTyHXWXKuMc1U8XWyRQasTdieKNBqy4Ff1sTqKkMafgn/image.png)

so as you can see it is working fine.


<center>
**I think this much is enough for today. Now if you like the post please  upvote and comment if you want to give me some advise**
![ntitled-1.png](https://images.hive.blog/DQmd3WcHH8i6U2JkmnrvEvd4FwjDQxJtG3Tnhzxdjswktdx/ntitled-1.png)</center>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 21 others
properties (23)
authorpakgamer
permlinkfetching-api-javascript-tutorial
categoryhive-148441
json_metadata{"tags":["programming","learning"],"image":["https://images.hive.blog/DQmdeWnJztWjjJG1N64XskRhPePu5X9c8sRhwi8zqE3hM9u/erer.png","https://images.hive.blog/DQmdmXh5QW5v6CCUrg45Reugza3zKMVqk37YtP1FPgb4K1E/image.png","https://images.hive.blog/DQmSGuczp4Y6jp3M3rZAzz4XJAjVAptPyk8ThiaUPS9oFkS/image.png","https://images.hive.blog/DQmUAB9Ls6CvibTjep5VPcaCG2vDYwH3E3YhDAkswaCT7Mp/image.png","https://images.hive.blog/DQmQDra8mxbva8thxA1PyjFMgEQ4BYbevnJi9WGbmX1THk8/image.png","https://images.hive.blog/DQmWTyHXWXKuMc1U8XWyRQasTdieKNBqy4Ff1sTqKkMafgn/image.png","https://images.hive.blog/DQmd3WcHH8i6U2JkmnrvEvd4FwjDQxJtG3Tnhzxdjswktdx/ntitled-1.png"],"app":"hiveblog/0.1","format":"markdown"}
created2020-06-13 16:31:36
last_update2020-06-13 16:31:36
depth0
children1
last_payout2020-06-20 16:31:36
cashout_time1969-12-31 23:59:59
total_payout_value4.898 HBD
curator_payout_value4.795 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,428
author_reputation19,304,605,112,640
root_title"Fetching API -- JavaScript Tutorial"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id97,943,426
net_rshares22,013,615,939,971
author_curate_reward""
vote details (85)
@gitplait-mod1 ·
Amazing post on javascript tutorial. Your efforts are laudable. Your effort will be helpful for the around the globe to learn the skill of javascript. Keep it up your good work. I advise you to share the links of previous posts on new post. It will make easier to explore previous posts on same topic.

Your post has been curated with @gitplait community account because this is the kind of publications we like to see in our community.

Join our Community on [Hive](https://hive.blog/trending/hive-103590) and Chat with us on [Discord](https://discord.com/invite/CWCj3rw).

[Gitplait-Team]
👍  
properties (23)
authorgitplait-mod1
permlinkqbz413
categoryhive-148441
json_metadata{"users":["gitplait"],"links":["https://hive.blog/trending/hive-103590","https://discord.com/invite/CWCj3rw"],"app":"hiveblog/0.1"}
created2020-06-15 15:22:18
last_update2020-06-15 15:22:18
depth1
children0
last_payout2020-06-22 15:22:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length590
author_reputation64,455,719,431
root_title"Fetching API -- JavaScript Tutorial"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id97,980,880
net_rshares19,503,656,589
author_curate_reward""
vote details (1)