Callbacks, Promises, Async Await | JavaScript Fetch API Explained

Learn about Callbacks, Promises, and Async Await as the JavaScript Fetch API is explained in this tutorial. You will also learn about thenables and how async / await replaces them in our JS code. The first 30 minutes covers the concepts. The last 30 minutes gives examples of retrieving data from different APIs with Fetch.

✅ Quick Concepts outline:
Fetch API with Async / Await
(0:00) Intro
(0:29) What is a callback function?
(1:15) What is the problem with callbacks?
(3:00) JavaScript Promises have 3 states
(5:28) A promise may not return a value where you expect it to: You need to wait for a promise to resolve
(6:58) Using thenables with a promise
(20:15) An easy mistake to make with promises
(24:00) Creating an async function
(25:00) Applying await inside the function
(33:45) Example 1: Retrieving user data
(40:00) Example 2: Retrieving dad jokes
(47:00) Example 3: Posting data
(49:40) Example 4: Retrieving data with URL parameters
(54:55) Abstract it all into single responsibility functions

🤖 APIs used in the examples for this tutorial:

📚 Further Reading:
MDN Web Docs:

✅ Follow Me:

Was this tutorial about the JavaScript Fetch API, Async/Await, Promises, Thenables, and Callbacks helpful? If so, please share. Let me know your thoughts in the comments.

#async #await #fetch

[danielgolden]

You make some of the most clear, well planned, well organized tutorials on JS on all of YouTube. Truly one of the most underrated JS tutorial channels.

I've received so much benefit from your videos over the past few weeks that I can't not say thanks in some way.

[pranavkastury]

This is a criminally underrated tutorial. The way all of this is explained is so good! I've taken so much out of this video and I'll be revisiting individual sections for reference down the line. Thank you so much, Dave!

[johnmcaulay]

another top class video mate, well done. I like two things about your videos:

1) The way your videos are so clearly explained.
2) The fact you go a little deeper into most topics than the other YouTubers out there.

[coderjag]

I've watched about 4-5 different videos on promises and sync/await, but this one really tied it all together for me and helped me understand these concepts. I like how you go in depth about the little things (etc. explaining how the parameters put into functions don't have to have the same name as the actual parameter that you're going to insert when calling the function). That makes your videos easy to follow by even absolute beginners. Don't change your teaching style! Keep it up!

[pliniojr]

I've seen a lot of tutorials about promises and async/await. But this one is probably the best one i've ever seen so far, because you used examples with actual data instead of using setTimeout, since this is what we future programmers will see in the wild. Thank you for the video, Dave! Greetings from Brazil.

[iDreamOfOkra]

I've decided to only learn languages that Dave has tutorials for! Thanks for yet another amazing and clear tutorial!

[dboulos]

Brilliant Dave - a lot of of tutorials only explain what works, but never what doesn't work and why. You offered such a comprehensive understanding of the principles of promises and async/await, and when and where to use them.
Thank you immensely!

[CynthiaSotoCaballerolYEAHl]

Best explanation on this topic on Youtube. Thanks Dave <3

[Ettrix]

This is the perfect amount of "in-depth", covers almost all aspects/use cases, without branching too far out of scope

[Anbaraen]

Late to the party but I've watched a lot of people explain promises and async/await and this is the first one that took the time to explain some of the common pitfalls when working asynchronously. You've got my follow!

[jipeejoce]

Great tutorial Dave ! Hope you can teach us some JS frameworks or some back-end with node in the near future. Anyway, thanks to deliver your knowlegde to the world and stay safe.

[waqaskhandev]

I have watched so many videos and never understood these topics the way you explain it. Now I completely understand how all these works. It is still so much worth Tutorials. ThankYou so much, Dave.

[jomamma]

Just wanted to say thank you for posting this tutorial. I'd been stuck on understanding promises and the whole sync/asynchronous concept for around 4 months. This had been a major roadblock for me in learning node for backend, so this has really helped a lot. I'm still not 100% clear, but this vid has really helped me progress my understanding. Thanks again.

[hindihits]

This video is an absolute treasure! Great explanation and examples! I am now comfortable with apis. Thank you so much Dave <3!

[necipyayla]

This tutorial series has been changed my software life, ı have couldn't understand from other javascript teacher's, until I find you, Thank you so much Dave :)

[a_maxed_out_handle_of__chars]

wow, simply mind blowing
dave, you're amazing

the video is 2 years old so only the aesthetics(colorscheme, font, etc) differ compared to today but the quality content is still the same

also, another thing popped while watching the video was you explained the then and catch methods for resolve and reject but in async await you can catch resolve and reject using try catch block

I had no idea about the Accept header type and never seen text/plain type either, thank you once again dave :)

[kostiantynkarzhanov]

Awesome tutorial! The explanations were very clear and the examples were incredibly helpful in understanding the concepts. Thank you so much for sharing your expertise, Dave! 💛

[nemac]

Amazing tutorial, Dave! You explained the topic very thoroughly. The pace was also very easy to follow, and the practical examples and insights into workflow really bring it all together. 10 / 10, Thank you!

[aeronwolfe]

awesome video. the section on promises... thank you! i finally get it! ive watched several videos on the topic, but still just didn't quite have the right mental model! but the way you constructed the promise with resolve and reject, THAT made it click for me!!!! thanks again!!! very well done!

[GG-hlzp]

I've been a full stack dev for over 3 years and your course helped me a lot. Thank you Dave.