Javascript Promises vs Async Await EXPLAINED (in 5 minutes)

[@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]

"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]

@@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]

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

[@dub161]

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

[@RDT]

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]

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

[@dom9534]

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

[@RDT]

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

[@SoraJustAGuy]

It’s important to point out that working with multiple apis you often have to chain multiple promises resulting in callbacks nested inside callbacks nested inside callbacks nested inside callbacks…you get the idea. 😅This is what we call a CALLBACK HELL. So the primary reason async/ await exists is to avoid a callback hell

[@RDT]

Absolutely 👍🏻

[@babykosh5415]

This is what I was looking for...thank you for asking this!

[@Ketan2555]

@@kkdpsudpsu Promise.all is not suitable when you need to ensure the first API call's response is available before making another API call that relies on it.

[@mohamedafrid1349]

I just want to call another api using first call's result. What method I have to follow ?

[@mohamedafrid1349]

By the way, i am using subscription for the first call

[@mattmcrae]

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]

Excellent!

[@joelexperienced]

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

[@RDT]

Thank you that means a lot to hear 🙏

[@vladpanchuk4699]

agree

[@sadhappy8860]

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]

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]

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

[@theunknown21329]

As a noob, I watched so many videos and didn't quite understand. This was very helpful, thanks!

[@hamzadlm6625]

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

[@jacintdavid5333]

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

[@RDT]

Thanks, that means a lot to hear 🙏

[@miladevs]

Great analogy with the waiter bringing coffee to explain promises! It really clarifies how promises work in JavaScript. Using then and catch makes handling asynchronous operations much cleaner. Thanks for breaking it down so well, Kyle!

[@SubtleAsh-TheImmortal]

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!

[@thomasstambaugh5181]

I greatly appreciate this excellent and crisp overview of a deep and difficult topic. I would love second piece that drills down a bit into two specific areas that I've struggled with: 1. What are the specific semantics and limitations of async/await? For example, this piece cites (4:19) without elaboration "however it can be used on its own within JavaScript Modules". What specifically does this mean? Is there a straightforward way to restrict the use of async/await to a specific module that needs it without having to make each caller in the entire call chain (to the top-level) use async/await? 2. Error detection, reporting, and handling. When a piece of my code buried deep in a complex promise chain detects an error, what is the syntax and accepted convention for reporting that error? When multiple promises are chained together using ".then" and one of them detects an error, how is the ".catch" handler invoked? Where in the chain should that catch handler be? In real code, some promises are chained and some are called using async/await. Since the former use .catch and the latter try/catch, how is one reported to the other? I fell into this deep, dark and forbidding well of complexity when I needed to code a React frontend that uses axios to interact with a backend MySQL database for managing user information. This is all on a linux platform. I chose the "mysql2" npm package, and the backend services all use node express. An example of a scenario that I've found challenging is how to handle a scenario where the browser requests something that isn't in the database -- for example, a user with a userID that is not in the database. The SQL is straightforward and the db works fine. The low-level db call returns "null" as the requested record. My code must somehow report that as a runtime error -- there is an issue, but the backend infrastructure worked fine. The hack I've settled on is that the backend answers a "200" response containing the runtime error data. The frontend must parse each 200 response and throw a suitable error for the (React) caller to handle. I wrap all the frontend interaction with the server in a React context so that this hack is at least encapsulated in a single place. I evolved this approach after literally months of doing battle with all this. I think I'm finally clawing my way back to the top, but it's a been a long and arduous adventure. If I had found this video last October I might have had an easier time. :)

[@RDT]

Thanks for the feedback Thomas, glad the video was helpful! 🙏 Might try and address some of these Qs in a future video or perhaps a JS course. With regards to your question about handling users requesting resources that are not in the database, this is something that is to be expected and planned for when creating web apps. So you can do a null check on the resource and then use the 404 status code (with some descriptive content) which is standard. Are you using a framework or bare Express? For example NestJS has a NotFoundException type for this very reason that is caught by the built in exception filter and returned to the requester as a 404 status response.

[@thomasstambaugh5181]

@@RDT : Indeed, I'm doing something along these lines. The approach I'm currently taking is that when a backend request is successfully processed and recognizes that it has collected invalid data, then it creates a special JS object containing the error condition and includes a 404 as the status code of this special object. The backend then answers a "200" response (because there were no "failures" in the backend) where the response.data contains a "details" field that has this special error object. The frontend has a React context that encapsulates all the calls to backend, and each backend response is passed through a "validate" method in this context. The validate method simply returns its argument if there are no issues. If there is a 200 response with a "details" field, then the front knows that runtime exception has occurred. It collects the data from the "details" field and throws an error that the frontend React code then deals with. I go through this extra level of indirection because the usual "node express" middleware strips everything from a 404 and creates its own standard 404. That's fine when a service isn't running or has credentials issue. The approach I've taken allows the details of whatever actually happened in my backend code to be reported to the frontend. The first use-case that requires something like this is when a new visitor to my app signs in for the very first time. I use Auth0 to do all the authentication, and the result is that my sign-in code is asked to sign in a user with a "providerID" (in the cause of Auth0 its the value of the "user.sub" field after a successful login) that my backend has never seen before. With the approach I've taken, the frontend can catch the resulting error and handle it by launching a "create user" app. That app will ultimately perform another call to the backend that will do the necessary "INSERT" operations on my user DB. I've learned more than I ever wanted to know about exceptions, service calls, async/await, promises, and all of that. But it's the end of the day Friday and everything seems to be behaving as desired. Have a great weekend. :)

[@Alex_C_5605]

@Thomas Stambaugh if you can change the back end implementation, it is a good idea yo return http status 404 instead of 200 in case db returned a null for a given userID. This way you can split ui code between normal processing and error handling.

[@RDT]

@Thomas Stambaugh Hi Thomas, 4xx status codes (including 404) indicate a problem with the request or resource and it is OK (and expected) to return them from the server. Server error codes start with 500. Hope this helps 🙂

[@djrmarketing598]

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]

Thanks

[@elobro9612]

I'm a fresh graduate and currently working as a junior full-stack developer. I'm having a hard time learning the Promises and Async and this video really helps me a lot. Thank you so much!

[@leoMC4384]

You had hard time learning Promises and you were a fresh graduate??? WTF?? You're a student having a hard time as a Project Manager now?? 😂😂😂

[@elobro9612]

@@leoMC4384 I'm a Senior Full Stack Dev now. Yey! 🥳🥳

[@XX-vu5jo]

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

[@somtoilo7465]

This is perfect! Wow best explanation I've come across

[@RDT]

Wow, thanks!

[@richk5015]

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

[@RDT]

My pleasure!

[@kunikaingale4704]

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

[@mushroomthump]

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

[@ChaDaeyeob]

After struggling with various definitions of async/await, I stumbled upon this video which made everything crystal clear. Thank you so much Mr. Sir Roberts for simplifying things!

[@RDT]

You're very welcome!

[@prasannamallisetty7208]

I just randomly watched this video. Oh my god. I am astonished. This is the best video i had watched about promises till date. What an explanation. I wish i had known about you and your videos earlier 😢. Became a fan of yours today subscribed.

[@RDT]

Thank you so much 😀

[@drakZes]

Best Promise explanation I have ever seen in my life!!!

[@RDT]

Wow, thank you! 🙏

[@saurabhSahni-m7f]

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

[@RDT]

You're very welcome!

[@philipackerley5775]

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

[@RDT]

Wow, thank you 🙏😊

[@returnMarcco]

It's Rob

[@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.

[@lakshmanchoudhary020]

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

[@RDT]

Thanks 🙏

[@onepointproduction9092]

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

[@AbhishekTiwari-xt1kt]

Wow, nicely explained, short and sweet No BS

[@chrislione950]

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

[@mehmetbulut1553]

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

[@RDT]

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

[@jalalkhan3166]

Promises & async await ARE PROUD OF YOU. such explanation💛

[@RDT]

Thanks 🙏

[@wassimmouloud3432]

the way you explain things is just perfect

[@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!

[@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!

[@francodominguez238]

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

[@RDT]

Thank you! 🤩

[@zhaofour9833]

The best explanation so far only uses 5 min and easy but illustrative example

[@vinodcs80]

Quick and simple. Appreciate it.

[@AOG91]

Best short explanation I’ve ever seen!

[@RDT]

Thanks for your kind comment and support Alvaro

[@AOG91]

@@RDT Ofc, you deserve it 🙂

[@tungpho2132]

Jesus, your explanation literally make me happy and smiling reading the code, 10/10

[@RDT]

Thanks! 🙏

[@nelsondasilva3935]

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

[@rudranshnagar6363]

Simple and to the point. Good work man!

[@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 🙂

[@vampirekabir]

well edited and well explained!!u deserve million subs

[@RDT]

Thanks! We agree 😅

[@farhadahmed2007]

What an incredible and simple explanation. Thanks for this!

[@RDT]

Glad it was helpful!

[@Aziz-kw6ct]

Your explanation was perfect, thank you for the effort.

[@RDT]

Glad it was helpful!

[@PerryCS2]

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

[@someguynamedvictor]

Beat explanation of these two concepts I’ve ever heard. 👍

[@RDT]

That’s really kind, thank you

[@omri20omri]

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

[@RDT]

😎

[@comrade_rahul_1]

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

[@RDT]

Awesome! Thank you!

[@MeowMeowTheCato]

Been a bit confused about the promises, async await, and try catch thing. But not anymore. Best explanation :D

[@mikehillbilly4079]

Concise, precise and nice. Excellent!

[@RDT]

Thanks

[@TriNguyenuc-jc3fp]

Phenomenal explanation! You make my day sir

[@RDT]

Glad you liked it! Thanks

[@muhammadmuneebwaseem504]

Bro, you made my day. It just takes 5 mins to understand the difference between then/catch, async-await, and the use of try/catch with it. Awesome dude!

[@RDT]

Thanks! Happy to hear it helped! 😊

[@Reaper_f30]

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

[@RDT]

Thanks glad you liked it mate 🙂

[@venkateshak.s9290]

Very neat n crisp information without any extra buzz! 🤗👏

[@wtf_jokes9639]

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

[@XX-vu5jo]

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

[@poisonedcheeseproductions]

don't you love it when you are painstakingly taking notes and the professor hits you with 'this code will fail'

[@GovindYaswanth]

Had listened to lot of videos and read articles. But Wow!!! Yours is best explained and perfect real time example... Love it Man!!!

[@huangtiantian8770]

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

[@ahmadridza]

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

[@MichaelKim505]

Truely helpful and insightful explanation on Promise with good examples.

[@loydcose2780]

That was short and simple, thank you!

[@RDT]

Thanks for your support Loyd

[@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.

[@PrestonL1]

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

[@RDT]

Thanks for you kind comments and support of the channel

[@chrisstrauss7288]

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

[@josecarlosgarcia6477]

this is the best explanation on KZbin, Thanks

[@nichi785]

Perfect explanation!!!, I always had doubts about the use of async-await x .then().catch(), and your didactic explanation this content helped me a lot. from Brazil ^^

[@RDT]

Thanks for you kind comments and support of the channel

[@vegeta4614]

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

[@suntoshaqula]

crisp clear straight to the point no bullshit awesome tutorial

[@RDT]

Thanks pal

[@viktorste]

Wow, brilliant. I knew all this, but I would never explain it like in this video in 1000 years.

[@RDT]

Thank you 🙏

[@jan-dawa]

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.

[@compncheese8358]

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

[@RDT]

Thanks for your kind comment and support

[@nepalxplorer]

Really smooth, subscribed!

[@RDT]

Thanks Sanam

[@bennythetiger6052]

Oh my God!!! This explanation is perfect! I was really struggling to understand both promises and async functions, but now I see it all! Thank you so much!

[@vservicesvservices7095]

For those who wonder what is promise, w3chool has good explanation of it.

[@cbmage]

this actually helped a lot, thank you very much!

[@RDT]

Glad it helped!

[@eidercarlos6391]

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

[@ultragamersvk1668]

Thanks for not making it too complicated like other youtubers, You are awesome

[@RDT]

I appreciate that! Thanks for your support of the channel

[@hughe1504]

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

[@Morquioo]

Couldn't have explained it better. Amazing content.

[@ahmedshafraz1538]

Awesome and simple explanation ❤

[@RDT]

Thanks a lot 😊

[@thishandharmakeerthi5327]

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

[@Noraia]

Best video about promises I watched so far!

[@FailNTry]

One of the best video i watched in 5 mins well done ❤

[@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!

[@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 🙏

[@DipanjanPatra]

Cleanest async/await explainer!

[@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 😊

[@tanjimulislamsabbir857]

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

[@joepage3065]

Very clear and concise explanation. Thanks 👍

[@oah8465]

That was really smooth. Thank you.

[@RDT]

Glad you liked it!

[@saptarshic]

Thanks

[@RDT]

You’re welcome 🙂

[@mahdishirazi5785]

this video is literally GOLD

[@raziqijr]

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

[@danglad5546]

Great simple explanation, you are very good at it.

[@zaeemjaved6850]

BEST VIDEO ON THIS TOPIC! PERIOD!

[@barteg_s]

Briliant video, very simple and easy to understand, it's nice that you're comparing the two in one short video. Thank you!

[@RDT]

Thanks for your kind comments and support

[@keyvanhosseini3518]

This video was so useful, thank you for creating it. 🙂🙂

[@OlgaDayneko]

Very good explanation! Thank you!