Understanding Promises and Async Await in JavaScript

Let's go over some JavaScript promise fundamentals. We'll start with a simple, practical, example of fetching data from an API, to see one of the most common use cases. Then we'll cover the various states of Promises, what they mean, and how to achieve them. I'll show how to use `.then` and `.catch` to get the results of a Promise when it is fulfilled or rejected.

Next, we'll use Quokka to visualize the Promise chain flow, and how `.then` statements are skipped when an error occurs in the chain. With all that understanding, we'll write the API fetch we saw at the start of the video and build upon it by doing some nested Promises fetches. I'll show how to flatten them out after that.

Finally we'll convert what we have to Async Await, to show how it can be easier to reason about more complex Promise situations.

~~~~~~

Resources for tools used in this video:

📕 MDN Promise documentation

🎥 Philip Roberts Event Loop video

🎥 Jake Archibald's Render Loop video

🔌 Quokka VSCode Extension

~~~~~~

Timestamps:

00:00 - What we'll cover
01:19 - Reviewing the tools
02:25 - The first example
03:58 - Video References
04:28 - Promise States
08:24 - Chaining .then and .catch
16:34 - Quokka for viewing Promise chains
22:50 - Putting together the API fetch
27:40 - Nested Promise fetching and flattening
36:55 - Async Await as an alternative syntax
47:29 - Wrap-up

~~~~~~

Follow Jimmy Cleveland's doings:

~~~~~~

#promises #javascript

[MrVisheshsingh]

Thank you, Jimmy! I am loving the content and the way you explain things by breaking it down into smaller chunks is amaaazing!🥰

[andreaev]

Perfect tutorial, very clear and straight to the point. Thank you!

[fairweathr]

So happy with this video. The way you structure your explanations and demonstrations is really efficient and helps me tremendously to understand promises and async/await. As a recent beginner I thank you a lot for this precious work!

[silverstonebro]

Thanks for this, really well put together video and you explain things clearly. Great teaching style. You also mind blasted me a bit at 44:54 when you said "now you might be thinking - can't we just async await? yep" at the exact moment the question spawned in my brain. Looking forward to watching the rest of your stuff.

[TheTomplays]

This article make a boom in my mind... Perfect explanation man. Thanks a lot.

[yaboi]

So glad you made this video! Easy to understand with great examples. Would love a continuation of the advanced methods of the promises with some real-world applications if you got some spare time to do that :-) Thank you!!

Btw thank you for showing me the Quokka VSCode extension. Installed it right away, such a nice tool!

[repasco]

Excellent video as usual Jimmy, thank you!

[arjunp]

Another great and comprehensive tutorial as always .

[greatauntmuriel]

definitely been in a vacuum of async/await.. never really understood the inner workings of promises cuz i was kind of intimidated to try and learn it, you make it suuuper simple... thank you 🙌🏼 definitely would be interested in all the promise methods

[RushabhWadkar]

What happened at 23:32 ?? :D It's okay man! Btw great video, thanks for it! :)

[kqdex]

Jesus teaching us Promises. what a time to be alive!

[santhoshraghavpidathala]

Thank you soo much for fulfilling my request. I am using quokka for react project. Could you help me to debug react components using quokka. For example: 1) how to see props of a class components? 2) how to call a class component? To see the output in quokka. Please help me