Hello Everyone
<p dir="auto">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.
<p dir="auto"><img src="https://images.hive.blog/DQmdeWnJztWjjJG1N64XskRhPePu5X9c8sRhwi8zqE3hM9u/erer.png" alt="erer.png" />
<p dir="auto">So here I have an HTML file open in my visual studio
<p dir="auto"><img src="https://images.hive.blog/DQmdmXh5QW5v6CCUrg45Reugza3zKMVqk37YtP1FPgb4K1E/image.png" alt="image.png" />
<p dir="auto">And this fetchAPI.js file is linked to it.<br />
<img src="https://images.hive.blog/DQmSGuczp4Y6jp3M3rZAzz4XJAjVAptPyk8ThiaUPS9oFkS/image.png" alt="image.png" />
<p dir="auto">so whatever I write here is executed.
<p dir="auto"><img src="https://images.hive.blog/DQmUAB9Ls6CvibTjep5VPcaCG2vDYwH3E3YhDAkswaCT7Mp/image.png" alt="image.png" />
<pre><code>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));
<p dir="auto">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.
<p dir="auto">ok now let's try another API (fake API.)
<p dir="auto"><img src="https://images.hive.blog/DQmQDra8mxbva8thxA1PyjFMgEQ4BYbevnJi9WGbmX1THk8/image.png" alt="image.png" />
<pre><code>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));
<p dir="auto"><img src="https://images.hive.blog/DQmWTyHXWXKuMc1U8XWyRQasTdieKNBqy4Ff1sTqKkMafgn/image.png" alt="image.png" />
<p dir="auto">so as you can see it is working fine.
<p dir="auto"><center><br />
<strong>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<br />
<img src="https://images.hive.blog/DQmd3WcHH8i6U2JkmnrvEvd4FwjDQxJtG3Tnhzxdjswktdx/ntitled-1.png" alt="ntitled-1.png" />
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 and Chat with us on Discord.
[Gitplait-Team]