How To Make API Call In React using useEffect() Hook With Fetch API and async / await

in this tutorial I'm going to show you how to use the use effect hook in react to fetch some data from a weather API so here I have my basic react application in vs code I've imported user State and use effect s which are called react Hooks and we're going to use these hooks to get some data from an API that gets us some weather information like what temperature it is right now in London so the first thing I'm going to do for this example is I'm going to create a new variable URL and it's going to be our API call so here I'm using weatherapi.com so the first thing I'm going to do is I'm going to use the use effect hook here and I'm going to create an arrow function here now instead of using your fetch API call directly inside this function what I'm going to do is I'm going to create another function called Fetch data so I'm going to use the async keyword to make this an asynchronous function now inside this function I'm going to assign the result to the fetch function with the URL from the API fetch will return a promise so we have to make that a weight so it works together with async so let's go ahead and take a look at the results that we get from this fetch API call and I'm going to use the console.log to Output the result variable but remember guys we're not running fetch function directly inside use effect so what I'm going to do is I'm going to call the fetch data function right after its definition so I'm going to hit Ctrl s and then F12 so we can go into the developer console and you will see our console is returning the response object it's doing that two times because we're calling it inside use effect so if I add a empty array brackets there it's going to call it only one time I'm not going to go into details why this happens this way this is a subject for another tutorial but here we have the response object from console log so here in the dev console you will see that it's a readable stream so to convert the response from the API to a Json object we're going to use Json method so now if at this point I run this program again you will see it's now returning a promise so even though we requested a Json object we still ended up with a promise and in order to convert This Promise into an actual Json object we need to call the then function on that promise so now we can actually retrieve the actual Json object from the promise and if I output this Json object into the console and run the app you will see that now we actually have the access to the API object that was returned so here we have the current property and inside it we have the temperature properties so I'm going to grab a temp underscore F and pass it into set temp function it's a function that was created earlier before I started this tutorial so I'm going to set temp to Json current temp F and the cool thing now is every time you refresh this react application you will see current London temperature which is at this time it's 57.2 degrees but it's actually going to change every time you refresh it let's say every half an hour or so so guys this is one way of how you can get data from an API using fetch API with a sync and a weight inside the use effect hook in react

Channel: Ghost Together

Views: 28,005

Keywords: react, reactjs, useeffect, hook, how to make api call, api, get data, fetch api, vscode, visual studio code

Id: ZRFwuGpiLl4

Length: 3min 53sec (233 seconds)

Published: Fri Oct 07 2022