Using Async/Await with the Fetch API - JavaScript Tutorial
ฝัง
- เผยแพร่เมื่อ 17 ก.ย. 2024
- In this video I'll be showing you how you can combine the power of Async/Await with the Fetch API to fire off HTTP requests. This is a great alternative to using the traditional promise-based approach and can make your code a lot cleaner.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozi...
Follow me on Twitter @dcodeyt!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript #webdev
Very clear tutorial on the use of Async/Await with FetchApi. Thanks, Dom
{2021-12-28}, {2022-10-20}, {2023-08-24}
Wow. I was stuck on something for hours and this video just cleared up everything for me. Very simple and straightforward with easy to understand examples, great video!
Same here
@@beldylover x2
This video really cleared up problems I've been struggling with for a long time. I love how it cleans up my code. I am so tired of errors caused by long, complicated, multiple 'then' statements.
Stuck for 2 days and your video just solved it in 7 minutes. thank you so much.
holy smokes, wish I gotten to this video years ago! so clear and concise! very nice!
Got some interviews coming, wish me luck!
Good luck
@@brothercaleb thank you! I am nervous af, cause I haven't been to an interview since forever...
Good luck mate!!
@@dcode-software thank you!
Did you crush it?
That's the best video on the subject I've seen so far!
That one-line async / await function blew my mind away.
you probably dont care but if you are bored like me during the covid times then you can stream all the new movies on InstaFlixxer. Been streaming with my brother for the last few weeks :)
@Jimmy Marcel yup, been using instaflixxer for since december myself :D
As always, clean code, really easy to understand!
Content idea: What about headless browser tutorial (with something like puppeteer)?
Keep up with the great work!
Cheers mate! And thank you for the suggestion ☺️
This was incredibly helpful! Thank you so much. I didn't realize that .json() requires an await as well, and I was pulling my hair out trying to figure out why I was getting a promise object instead of the data after using response.json(). Thanks again!
that's what I wanted, no bullshit just straight up quality content.
This video helped me fix this problem i was stuck on, thank you
That's awesome!! Glad it helped
Also saved me quite a bit of time. Thank you !
Thank you! Great explanation. Makes code so clean and efficient.
thankyuso muachh this content truly help me figure out my project prblem
Clean explanation and makes it easy to do. Thanks
You’re awesome man thank you
You just made my day, huge thanks !
Awesome explanation, thank you so much!
Thanks for the video. I'm quite familiar with GET method, and wonder if we need to use async/await for other methods too?
at 2:28 it's not really fair to say the await is 1 line while the fetch dot then is 3 lines because the await also requires the async function
Hi
fantastic video but this will turn ur code to synchronous code, i.e., the code will block until the fetch completes and the code returns from the "await" which defeats the whole purpose of having promises. From clean-code perspective your code is elegant but from practicality point of view, the above code will have ur HTML document freeze and become un-responsive till the await returns.
Your code will be much more useful if you use that async function inside the first "then".
Just to be clear, your code will force the JS code to be executed in the main thread (the one that handles the page events which should never be frozen/blocked). Throwing "await" in the main JS thread, forces ur code to wait for the function to return i.e., the entire page will block until the function returns. Assume the async function takes 30 seconds to return, now the page is un-responsive for 30 seconds.
citing the documentation from MDN:
" can be put in front of any async promise-based
function to pause your code on that line until the promise fulfills,
then return the resulting value."
great video, thanks
You are welcome!
THanks it worked like charm
Simple and to the point noice
Gracias, excelente explicación.
Thank you.
Great video! it truly helps! just one question. in the console you can see the fetched values, but in the end theres a text __proto__: Array (0) ...My qestion is, how does this affect the next code, that uses the data from the API?
I am atm stuck with a code were I have this exact output, but the functions that requires the data from the API don't work.. I am just trying to check my error from all angles here. Many thanks!
Thank you sir!
You are welcome!
i dont know if you check your messages or not but there is something i have been stuck on from some time now and require some assistance about so please help me.. suppose we fetched an array of data using fetch api once and want to use the data in 10 different functions.i declare the array data on the top and then fetch data into it.. after that i try to use that data into other functions but the fetched data is not available in other functions..so i ask how can i do so without making each and every function async..
I'm not sure why the document.addEventListener stuff is needed. Can anyone explain please?
Awesome as always
Cheers mate!
This is a good tutorial but what if I don't want to fetch onload? I want to do a fetch after a button is clicked. How do you add an eventlistener to that?
If I type with arroz function is a same ?
what is theme name of vs code?
How about using unique variable names _ rather than overLoading the variable "users"?
Can you make a video on making put, post, delete requests using fetch api?
I've got videos on using POST with Fetch, but will consider the others 🙂 thanks
2022 🤟
what is theme? tell me please)
It's my theme, called "dcode"
@@dcode-software oh , thanks , you're theme very cool! I like it
Code is not looking clear
ur guide is good but no one show a way to charge large data, u only show how charge 2 records and it dont work at real world