On line 12 at @2:50, why did you use ".then" on result.json() if you were already using async/await syntax for the fetch line above it? Can we not just use "const data = await result.json()" ?
@vuestacks @ghosttogether No, the Response.json method returns a promise, but by using await it waits for the promise to resolve before assigning the value. That is the whole point. "const data = result.json()" sets data to the promise object "const data = await result.json()" sets data to what the promise resolves to, aka the response converted to json.
Does this still work? Copied this line for line and get - cannot read properties of undefined (reading 'temp_f'). Seems like you need a special key (not the standard one.
![How To Make An API Request in ReactJS With Axios and Fetch - Tutorial [2020]](/img/n.gif)
watched videos that were hours long and this three minute video is what actually made everything click. Thank you.
Beautiful, straight forward to the point!!!
@@alanbalvin7731 thanks glad it worked out for you :)
On line 12 at @2:50, why did you use ".then" on result.json() if you were already using async/await syntax for the fetch line above it? Can we not just use "const data = await result.json()" ?
Can we? Await is designed to return a promise, not the data itself.
@vuestacks @ghosttogether No, the Response.json method returns a promise, but by using await it waits for the promise to resolve before assigning the value. That is the whole point.
"const data = result.json()" sets data to the promise object
"const data = await result.json()" sets data to what the promise resolves to, aka the response converted to json.
@@ghosttogether No need in .then
useEffect(() => {
const fetchData = async () => {
const data = await fetch(URL);
const {current, location} = await data.json();
setTemp(current.temp_f)
}
fetchData();
}, []);
Actually both of the methods do the same thing, await is just fancy .then() underneath
Simple concept but super helpful❤
This was super helpful! Thank you
Welcome.. glad it's helping 🌛
Thanks this is very useful, what can I do if I want the temperature to change when I click a button?
Why would you put your API key on the front-end!? Nobody builds API calls this way...
For demonstration purposes
Yikes, I guess you still need something like a csrf token even if you move to backend
Why don't we use fetch directly but we created a separate function?
Because you can't use async on useEffect
Where can i get the code repo.
Thank you very much!
as a guy who never worked with api and react. that code is discountingly hard to read.
Does this still work? Copied this line for line and get - cannot read properties of undefined (reading 'temp_f'). Seems like you need a special key (not the standard one.