Javascript Promises vs Async Await EXPLAINED (in 5 minutes)

Подписаться 21 тыс.

Просмотров 590 тыс.

50% 1

In this tutorial I explain what Javascript promises are, why we need them, and how to use them, catch errors properly and then convert the same code to use async and await. With examples!
☕️ Don't forget, old developers need coffee (and.. beer and pizza too 🍺 🍕)
www.buymeacoff...
Check out the Bored API for fun sample data:
www.boredapi.com/
📧 📫 Join us on our developer journey! Sign up to our email newsletter:
robertsdevtalk...
🐦 Follow us on Twitter:
/ robertsdevtalk
🎶 Music by Epidemic Sound:
www.epidemicso...
Our gear - click through to support our channel! :)
Camera (Canon M50)
🇬🇧 UK: amzn.to/3sUbzuL
🇺🇸 US: amzn.to/3uBsG5c
Camera mic (RODE VideoMic Pro)
🇬🇧 UK: amzn.to/3ml8xgC
🇺🇸 US: amzn.to/2RkGxyi
Camera tripod (Manfrotto Compact tripod):
🇬🇧 UK: amzn.to/3fJGyWU
🇺🇸 US: amzn.to/3mF4oV2
Voiceover Mic (Blue Yeti)
🇬🇧 UK: amzn.to/2PV7UOQ
🇺🇸 US: amzn.to/3uMiEym
Chris's dev mouse for PC (Logitech MX Master 3)
🇬🇧 UK: amzn.to/39K7BNV
🇺🇸 US: amzn.to/3uKYvso
Chris's dev keyboard for PC (Logitech MX Keys)
🇬🇧 UK: amzn.to/3rSbHcX
🇺🇸 US: amzn.to/3a6Unef
Rob's dev keyboard for Mac (Apple Magic Keyboard)
🇬🇧 UK: amzn.to/3dEQpKG
🇺🇸 US: amzn.to/3sb6JZc
Rob's dev mouse for Mac (Apple Magic Mouse)
🇬🇧 UK: amzn.to/3sRCQhr
🇺🇸 US: amzn.to/3mFi6qS
Icons in this video kindly provided by FlatIcon from Freepik
www.freepik.com
www.flaticon.com
JS icon provided by Icon8 icons8.com
Disclaimer - some of our links are affiliate links, which means that we receive a small commission for any sales made via those links, at no extra cost to you - so a great way to support our channel! Thank you so much for your support 😊
#javascript #promises #async

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 743

@atatdotdot Год назад

2:25 "Then is called when the task completes... the catch method is called if anything goes wrong". This is wrong. These methods are called immediately. It's the functions that you pass to them that are called on those conditions. This may sound like pedantry but I would strongly suggest anyone trying to learn this to fully understand the distinction here.

@RDT Год назад

Good catch, thanks. Pinning this comment.

@paulhetherington3854 Год назад

Only if - there be - () call f(x) - pre amp d(x)! It never did - ught yet?

@jellyjollyjelly9513 8 месяцев назад

"It's the functions that you pass to them that are called on those conditions. " what do you mean by "on those conditions"? do you mean the functions passed to then() and catch() are called after the task completes? im confused about this sentence

@mattpickel223 7 месяцев назад

@@jellyjollyjelly9513 I think he is saying the method 'then' is called immediately when that line is executed. It is a method of a Promise. It binds a callback function that will be called when the promise returns fulfilled. 'The 'then' method is called when the task completes' would be wrong and should be 'The callback function passed to the 'then' method will be called when the task completes'

@sergioadame5528 7 месяцев назад

the .then anc .catch methdos being called inmediatly ever affects something? why giving the distinction between the execition of the methods en the code inside it if nothing will happen until the promise es fullfield? i guess there is something but cant thing of a case

@dom9534 2 года назад

dude this just made so many lightbulbs go off in my head and tied so many things together for me. thank you

@RDT 2 года назад

Thanks! Glad to hear it helped - I hoped it would do 🙏

@joelexperienced 2 года назад

hugely underrated. so few channels are 1. this well edited AND 2. this well explained

@RDT 2 года назад

Thank you that means a lot to hear 🙏

@vladpanchuk4699 Год назад

agree

@dub161 2 года назад

this is what I call a perfect 10/10 explanation. "Crisp" and at the same time complete information with example.

@RDT 2 года назад

Thanks for your kind words and support of the channel Nakshatra

@lecomar7220 Год назад

@@RDT The tutorial was beyond. It was quick BUT delivered ALL the information I was looking for. Thank you so much Roberts Dev Talk, wow!!!!!!!!😮😃😍

@omdodmani3205 7 месяцев назад

Yeah! Example Makes it way easier to understand compared to just explaining the theory.

@mattmcrae 9 месяцев назад

Umm... This is by far the most simple and logical explanation of this topic I've seen. In five minutes I've gone from writing code I didn't understand to totally getting it. Thank you!

@RDT 9 месяцев назад

Excellent!

@hamzadlm6625 Год назад

The first person I watch to not explain 1 phrase using 20 phrases, neat and straight to the point! thank you.

@jacintdavid5333 2 года назад

Watched async videos of bigger channels first and I have to say yours was superb!

@RDT 2 года назад

Thanks, that means a lot to hear 🙏

@SubtleAsh-TheImmortal 2 месяца назад

The quality of this content is way above what I'd normally see for concepts as foundational as these, please accept my gratitude Thank You!

@sadhappy8860 11 месяцев назад

I find that alot of 'programming words' are quite strange. It may sound complicated but it just needs someone to use the right explanation and then it clicks. A very helpful video, much appreciated.

@allhailalona 7 месяцев назад

I really liked this video: A. I like Harry Potter, and your accent reminds me of stephen fry reading the book B. the explanation is actually short and concise, and the editing is quite nice too, something u don't see a lot around...

@RDT 7 месяцев назад

Thank you! 🙏 I’ve not been compared to Stephen Fry before, an honour 😎

@djrmarketing598 5 месяцев назад

This was a great explanation. Despite programming for 25+ years, I've used Promises a ton in JS and C# I've used promises there too and never really understood that await/async was basically the same thing just sequential. 5 stars on your explanation!

@RDT 5 месяцев назад

Thanks

@lakshmanchoudhary020 2 года назад

This video is really underrated, straight to the point in 5 minutes. Appreciate your efforts.

@RDT 2 года назад

Thanks 🙏

@ThePerfectKiosk Год назад

It's worth noting that all async functions return Promise objects, even if there are no await or return statements within them. This means that you'll need to await or .then() on the result of any async function used by the caller (if you need the result, that is).

@ThePerfectKiosk Год назад

@@tyeinstem Promise is an object type. All async functions return one--return statements are translated into the "resolve" behavior of the resulting Promise object. The await keyword waits for a Promise to resolve, which you'll need to use in order to get an async function's return value.

@wtf_jokes9639 Год назад

What an absolute break down. I wish all teachers had the touch to teach like you

@XX-vu5jo 10 месяцев назад

LOL he taught it the wrong way LOL!!!!!!!!!! you are clearly learning from wrong content, poor guy

@kunikaingale4704 Год назад

bruh why so underrated?! Such a marvellous explanation, straight to the point

@richk5015 6 месяцев назад

Thank you, Chris, for explaining everything so eloquently. 🙏

@RDT 6 месяцев назад

My pleasure!

@suntoshaqula 5 месяцев назад

crisp clear straight to the point no bullshit awesome tutorial

@RDT 5 месяцев назад

Thanks pal

@philipackerley5775 Год назад

Superbly put together Chris, never heard or seen it explained as well 😇

@RDT Год назад

Wow, thank you 🙏😊

@returnMarcco Год назад

It's Rob

@AbhishekTiwari-xt1kt 2 года назад

Wow, nicely explained, short and sweet No BS

@onepointproduction9092 Год назад

Good lord, it's the most clear explanation i've ever watch. Thanks bro

@mushroomthump Год назад

I was so confused about this, cleared it up for me, thanks!

@johnreesekl6249 Год назад

I just couldn't grasp how this all worked when it first was exposed to it, but the coffee order example was brilliant. Overall the explanation finally helped me to figure out what is happening. Thanks. subscription earned!

@RDT Год назад

Thanks John, gad to hear it helped - I’m glad you enjoyed the coffee example 🙂

@safehome-jdev1417 Год назад

Agreed, when I think of why I’m Async’ing, I remember that I’m ordering something into a queue, and when I call it, I need to `.then` it or `async() => await` it I can’t work until my coffee is delivered 😊

@mehmetbulut1553 2 года назад

After months of struggle finally understanding Promises thank you so much Robert. Definitely subscribed 🥰

@RDT 2 года назад

Thanks for the sub Mehmet! Glad the video helped you 🙏

@JasperEjoc Год назад

of all the videos I watched, this is by far the most simple explanation of promises then, catch vs async await, thank you for this video

@RDT Год назад

You're very welcome!

@saurabhSahni-m7f 8 месяцев назад

This explanation was amazing. It was not complicated at all. Thank you.

@RDT 7 месяцев назад

You're very welcome!

@ahmadridza 2 месяца назад

That is the best explanation ive seen so far.. thank you so much

@chrislione950 Год назад

Wow,this is hands down the best explanation of this topic. Thanks alot

@VOGTLANDOUTDOORS Год назад

A VERY CLEAR handling of this often-confusing topic. You just EARNED another subscriber ! -Mark in North Aurora IL (USA)

@RDT Год назад

Thanks for your support Mark 🙂

@PerryCS2 Год назад

I really like how you add the code to the video AS you explain it... helps break things down...

@nelsondasilva3935 Год назад

perfect: short and sweet.. no fluff or dragged on and on examples.. 10/10

@comrade_rahul_1 5 месяцев назад

This was the first I understood async, await! Amazing video. 🤗

@RDT 5 месяцев назад

Awesome! Thank you!

@farhadahmed2007 2 месяца назад

What an incredible and simple explanation. Thanks for this!

@RDT 2 месяца назад

Glad it was helpful!

@kashix. Год назад

This is the best explanation with the best examples I've ever seen about async in Javascript. Thank you very much!!

@RDT Год назад

You're very welcome!

@PrestonL1 2 года назад

The most succinct explanation on this topic I've heard. Thank you!

@RDT 2 года назад

Thanks for you kind comments and support of the channel

@omri20omri Год назад

I never comment to RU-vid videos but I'm feeling ungrateful not to comment this one, that explanation was SMOOTH. Thank you so much!!!

@RDT Год назад

😎

@wassimmouloud3432 Год назад

the way you explain things is just perfect

@Bozo--- Год назад

With await be careful or you will block the execution of the main thread. In this video note the getActivity() without the await in front of it. If it wasn't a function using then prevents from blocking the js thread.

@MartinBarker Год назад

you missed that an async function as used in your example automatically means that the function returns a promise, so if you put a console.log after the call to the function it will occur first again. so it is not fully synchronous

@happyspaceinvader508 Год назад

That's the point... it's asynchronous.

@TOY. Год назад

Thank you so much Roberts for such a straightforward explanation, it really made me finally understand these hard concepts. I just have a question that stuck with me after watching: After knowing about both concepts, promises and async/await, should we use one or another? Or should we use both at the same time, and if so, why? Thanks again!

@RDT Год назад

Well async/await keywords are just syntactic sugar that make Promises easier to work with. They do the same thing so unless you’re working on a shared codebase it comes down to personal preference I guess? I personally think await is less error prone as there is no code nesting to get lost in, but that’s just MHO. Probably best for the sake of code consistency to pick your preferred method and run with it 🙂 Happy coding!

@Alex_C_5605 Год назад

There are some cases when async/await can't be used. Say, when you need to provide a callback to some library and that callback is expected to return something other than a Promise. In that case, you can't declare your function async and without declaring a function async you are not allowed to use await in it.

@francodominguez238 6 месяцев назад

This is the most beautiful explanation I've ever heard, thank you

@RDT 6 месяцев назад

Thank you! 🤩

@Reaper_f30 Год назад

coffee example is one of the best clearest ones ive seen man :D

@RDT Год назад

Thanks glad you liked it mate 🙂

@AOG91 2 года назад

Best short explanation I’ve ever seen!

@RDT 2 года назад

Thanks for your kind comment and support Alvaro

@AOG91 2 года назад

@@RDT Ofc, you deserve it 🙂

@DipanjanPatra Год назад

Cleanest async/await explainer!

@ahmedshafraz1538 3 месяца назад

Awesome and simple explanation ❤

@RDT Месяц назад

Thanks a lot 😊

@anshvashisht8519 Год назад

great explanation i have been struggling on google but you made it so easy.

@RDT Год назад

Glad it helped you Ansh, I tried to make the video I was looking for when I was trying to understand it!

@huangtiantian8770 Год назад

Thanks! This is the best video explaining await and promises I have ever seen

@hughe1504 2 года назад

this is definitely the best tutorial i have came across. Well done

@loydcose2780 2 года назад

That was short and simple, thank you!

@RDT 2 года назад

Thanks for your support Loyd

@mikehillbilly4079 5 месяцев назад

Concise, precise and nice. Excellent!

@RDT 4 месяца назад

Thanks

@StephanHaloftis 11 месяцев назад

You forgot to mention using finally! If you’re connecting to a db you can attach a finally block after your catch block which will always execute regardless. It’s a nice place to keep your db disconnect calls. Should be called a TCF block.

@RDT 11 месяцев назад

Good recommendation, finally block a good place to put any cleanup code 👍🏻

@ariflaksonodhewo8758 5 месяцев назад

Finally, i know how it works, thank you.

@RDT 2 месяца назад

You're welcome!

@dhruvpurwar6642 2 года назад

Soooo Good !!!! Well explained about the practical use case. Could have been better if discussed how async/await came to existence over promises..

@chrisstrauss7288 Год назад

Best explanation iv seen on this to date. Cleared up a lot for me

@compncheese8358 2 года назад

HOLY SMOKES! This video is so good! Thanks a bunch!!

@RDT 2 года назад

Thanks for your kind comment and support

@mohammedel2035 Год назад

Well, I can't find words to thank you enough... You helped me understand promises in 5min! Thank you so much!

@vegeta4614 2 года назад

This is really helpful. Will go through all ur javascript turorials now

@ivan.storojenko Год назад

Thanks for explanation! Please make a text larger so it would be nice visible on small screen like a phone

@YaBoiDallin 2 года назад

I've been trying to figure out promises and async for days and it finally makes sense. Thanks!

@TriNguyenuc-jc3fp 8 месяцев назад

Phenomenal explanation! You make my day sir

@RDT 7 месяцев назад

Glad you liked it! Thanks

@eidercarlos6391 Год назад

Great! The best explanation about the topic I've seen! Thanks!

@jonathansilva4883 Год назад

Great explanation, thanks!

@RDT Год назад

Glad it was helpful!

@Noraia Год назад

Best video about promises I watched so far!

@thishandharmakeerthi5327 Год назад

Hands down, Quality content 10/10. I subscribed the channel.

@RyanMitchell-kv5zv Год назад

I've watched many tutorials on this subject because this has been difficult for me to understand. Out of all of them, I think this one has so far provided the most clear and concise breakdown in a way that makes the topic actually easy to understand. And in 5 minutes no less. Great video

@backtic_education Год назад

Verrrrrrrrrrrrrry good explanation. Thank you so much.

@samichosen524 Год назад

Amazing presentation and great explanation, thanku

@raziqijr 2 года назад

this was one of the best explanation of async and promises !

@elisamunozespineira6809 Год назад

super well explained, I have watched tons of videos and I finally feel like I understand it!

@RDT Год назад

Thanks Elisa, glad it was helpful to you 🙏

@tanjimulislamsabbir857 7 месяцев назад

This is very clear and organised video. I loved it.❤

@oguzhanaydn7482 Год назад

very good and instructive video, i get it better now thank you

@Sammy-km9zk Год назад

I love these kind of explainations

@DnKZone 2 года назад

thanks it's really clear to me what promise in js is

@nepalxplorer 2 года назад

Really smooth, subscribed!

@RDT 2 года назад

Thanks Sanam

@braca86 Год назад

Hitchhiker's guide to the galaxy ❤

@nerdy561 Год назад

Best explanation video out there!

@tonyregalado7281 2 года назад

All I have to say is you have a new subscriber. A++.

@RDT 2 года назад

Thanks Tony!

@Tech-Dev 5 месяцев назад

Cheers for this tutorial.

@RDT 5 месяцев назад

My pleasure!

@idanhen10 Год назад

Amazingly explained!

@PhilipRittscher Год назад

You say 'haich' whilst I say 'aich'! Nice video though. I have taken some notes and learned from it. Thank you.

@RDT Год назад

You’re most welcome, glad you found it helpful 🙂

@hassanfarooq7379 Год назад

Thank you Robert!

@RDT Год назад

You are welcome, and thanks for supporting the channel

@atif7865 2 года назад

Watched for 1 minutes 15 seconds and immediately stopped to be surprised by number of views. Why is this channel and video in particular not top of every search result for Javascript?

@RDT 2 года назад

Thanks for your kind comments and support Atef, please let everyone know about our channel 🙏

@pauli_ 2 года назад

As everyone else has commented your video is brilliant. The coffee analogy on its own helped visualise things for me. Then add your concise explanation and I now get it. Thank you!

@RDT 2 года назад

Thanks Paul, glad it made sense 🙏

@duyvu7604 Год назад

This man explains programming concepts better than most of my professors lol.

@RDT Год назад

😀

@normanluismadrid422 Год назад

beautifully explained, thanks for this

@timcraig-s6v Год назад

Great explanation. Thank you!!

@Jeremiahking101 2 года назад

This literally made my day! THANK YOU!

@tassneemaltaf2001 Год назад

Loved the explanation

@ta-prgmr 7 месяцев назад

the explanation was really helpful!

@rayromanov Год назад

Succinct and accurate, with good examples to boot. Absolutely stellar teaching.

@takshpatel8109 2 года назад

exact, point to point, clean explanation about this topic (best one)

@RDT 2 года назад

Thanks glad you found it useful

@Xiao-qj9ez 3 месяца назад

Quite clear explanations

@ThanhLe-dh1ir Год назад

the perfect explanation bro

@TheVaniac Год назад

Good and clear explanation. Is there a reason that you choose to rely on third party request-library instead of just using fetch? I often get unreasonable offended when third party libraries are used instead of "vanilla" functionality as I see an increasing unawareness of how much added weight all these unnecessary libraries add to todays codebases. Isn't it better to stick to standard functionality especially when teaching beginners?

@ОлександрКилимник-х6м Год назад

I agree with you about the burden of the code with additional packages. But I want to say that it pisses me off when beginners are taught something that is simpler or standard, and then in work he uses something completely different. For what? It is better to immediately teach actuality for today approaches and libraries, because it is considered the best and most optimal for today.