Async JS Crash Course - Callbacks, Promises, Async Await

In this crash course we will look at asynchronous JavaScript and cover callbacks, promises including promise.all as well as the async / await syntax.
FULL JS COURSE (Just 10 Bucks!!!!):
www.udemy.com/modern-javascri...
CODE:
plnkr.co/4Pv2HhiWV4kiPHY9VrUw
💖 Become a Patron: Show support & get perks!
/ traversymedia
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia

[@lardosian]

Is it normal to sometimes have to watch these kind of videos a few times for it to sink in?!!

[@trappedcat3615]

yes -- repitition is key

[@JBuchmann]

I like repetition from multiple instructors as they all explain it differently.

[@JosephLuklukkyjoe]

very normal for me. sometimes there are concepts that don't even sink in for me after multiple watches; i need to supplement it with multiple uses/practices too.

[@jackylt]

Yes. Thats how it is.

[@GotLotsaFaith]

100 percent!! Don't be bashful... Learning this stuff could loosely be compared to one's seeing any challenging movie or reading an intelligent book, and to that end, I would submit something along the lines of this: No human being on this earth could fully and completely grasp all the sub-plots going on in William Peter Blatty's, THE EXORCIST, after a single viewing--and this material, although logically more difficult, is right there in the OPEN; but either way, it is still not possible to take it all in at once.. (BTW, I have watched The Exorcist over 100 times and each time I do, I fine-tune my comprehension of all the layering and cross-dialog constantly going on in every direction, it seems) Same with any good book worth it's salt. For computer science stuff YES--repeat to your heart's content. It allows terminology to begin to really sink in, or the correct way of phrasing explanations, the physical set-ups and the architectural layers, etc.. "The more the merrier..." I repeated the Crash Course on NodeJS for about 6-7 hours one day and I'm sure I did not get all of it--but got a LOT more of it than I otherwise would have =)

[@sonnyps413]

Timestamps - --- Pre-callback ---- 2:40 - 9:00 Pre-callback 2:40 GetPosts( ) : finish at 7:00 CreatPost( ) : finish at 8:00 ----- Actual callback 9:15 - 10:40 ----- Promise 11:05 - 15:00 Promise.all 15:25 - 18:25 (If the longest promise takes 10 seconds, the Promise.all will take for 10 seconds then return all values/responses.) Fetch( ) 18:25 - 20:00 ----- Async/Await 20:30 (Function must be named async if you want to use await inside that function) Async with Fetch() 21:50 - 23:30 (Using async-await with fetch results in a much cleaner code than using multiple .then(s))

[@mohammedfarhadurrahman8434]

You're a legend! Thank you!

[@methembethomastshuma9587]

you are an angel

[@jihedgouay8992]

@@wojciechkohut5383 hhh

[@jihedgouay8992]

thx

[@Jun-qj4mz]

课代表！

[@hannesder3te]

Struggling for years to get my head around promises. This has done it in 20 min. Thank you!

[@ff-1971]

I totally LOVE how this guy explains stuff!! It's like every doubt or question I have is being immediately addressed! Please don't stop teaching 🙏

[@bovrar2nd861]

You had me explained in 30 seconds what I was floating 2 weeks to get. Well done sir! You have made my day! Thank you.

[@farhanprine]

You have an innate skill of communicating problems in a clear, concise way. Thank you, you're the most effective teaching (JS) resource on KZbin.

[@kjguitarman]

You're one of the best software development teachers on KZbin. You describe the main concepts clearly with simple and to the point examples. Too many instructors either dive too deep or shallow with their content. They do a poor job illustrating what they're coding. A handful of those top notch universities in the greater Boston area could use a teacher like you!

[@jayc.9234]

With your setTimeout function at 10:00 it actually waits three seconds for the posts to show; it's important to note that once createPost runs, it waits two seconds, and then, once getPosts is called, it waits another second before the DOM is manipulated. Thanks for the content, it's very informative!

[@TomasDavidcz]

Thats exactly what i thought as well

[@andrewmukare3433]

I owe most of my understanding of JS to you. Thanks so much man

[@RareTechniques]

Thanks brother

[@anuppokharel703]

Same here

[@BrianGomesHeartsYou]

"Dom was painted.." Your understanding and explanation is on another level :)

[@mohamedmostafak]

It has been 4 years, and still the best video regarding this topic yet. Your efforts are really appreciated.

[@erichepperle7085]

Can't wait to watch this brother! You make some of the best and most easy to understand programming tutorials out that. Thank you for your efforts to help the rest of us.

[@lilyshih7614]

How did you manage to explain these concepts so clearly and make it so easy to be understood?! I couldn't stop myself from watching more tutorials of yours! I wish I knew them earlier, haha. These videos are really awesome and engaging! Thanks, man. ^^

[@GooseGumlizzard]

Great video. I just bought a Udemy course on async js, it was very confusing. In 20 minutes you explained it in an easy way with real life examples, a much better way for me to learn. Next udemy course I need I'll definitely look for yours.

[@onohsamuel6072]

Today is 01/03/2024. you truly made this for beginners and advance. Thanks, Traversy Media You're a rare gem. ❤

[@sukanyachakraborty3359]

I am new to JS and I never understood these terms clearly. Thank you so much Brad for making it so crystal clear.

[@Guitarpersonthing22]

Very simple, clear, and concise. Excellent tutorial and refresher. Thank you so much for the awesome video!

[@tarandeepmatharu3488]

thanks man , i was very frustrated reading alot of content online and didn't learned async await love your channel

[@ChiNguyen-br1wy]

This makes so much sense. I like how you can simplify the problem and create an example that's so easy to comprehend

[@abenjamin13]

I greatly appreciate these refresher course you provide Brad. I"m gearing up for new job and needed a refresher on callbacks, promises, and async operations. Thank you

[@limitless9483]

Man you don't even know me and you've helped me so much in life thank you!

[@shankerm3959]

On this topic, this is the BEST tutorial i have ever seen. I Promise. Thank You!

[@davitchkheidze670]

Await a minute, I see what you did there

[@PP-xj7vg]

@@davitchkheidze670 Didn't fetch the joke, mind explaining it?

[@akshay__sood]

@@PP-xj7vg reCallBack

[@user-yd7db3wd7w]

"asynchronous programming is the best place for bad jokes" - Fireship

[@stratr4694]

I've been struggling a bit understanding these async functions. This was was a great way to explain them. Thanks!

[@michaelwalsh6802]

The ability to describe complex things so clearly, succinctly and simply is truly it's own kind of genius. Cheers.

[@carrillocarlosce]

Nice I love your javascript tutorials

[@jamesprivett1257]

Hey Brad, this is excellent thank you. I have been meaning to learn more modern js concepts without using jQuery and so have signed up for your Udemy course. Looking forward to it, you do a very good job of explaining all this stuff so thanks again and keep up the hard work. :)

[@microman99]

I was super confused with this stuff. I watched few of your tutorials, and found you a great teacher in making things clear in an easy way. Thank you so much !!

[@rushabhpatel4291]

This is so so good. People don't explain this stuff. We learn old JS version and suddenly we are thrown in react or node.js world wondering where does this stuff come from. So thank you very much for this.

[@tony-k]

Thanks a lot! Funny thing - I think in this video Brad explained async / await logic way more better than in his mentioned Udemy JS course :)

[@umvlogdiferente]

Hey Brad I love your tutorials, every time I get stuck doing js I go to youtube and search it up and you're always one of the top results and 9/10 times you have the exact solution for my problem. The other 1/10 times is cause I gotta watch another video you made, so basically you always help. Keep up the amazing work!

[@thehardyjake]

Absolutely love your content. If I need to learn something I always come to this channel first cuz the descriptions and examples are always so good and complete.

[@sanghvian]

Lotta videos watched on this but like everything in programming, it's never fully clear till Brad teaches it. Thanks a lot man !

[@siyedyoussef3202]

Congratulation Brad for 400K subscribres ..... And we are weating for you're amazing video about Docker Crash Course

[@kps2642]

this is pretty awesome, thanks man.

[@TraversyMedia]

You're very welcome

[@Bhagavanbhakt]

kzbin.info/www/bejne/jXXZe2xqfZKDpsU

[@Bhagavanbhakt]

Yes good

[@gavinjboyd1]

Agree, thanks for all the simple examples and good explanation

[@ScottL888]

@@TraversyMedia Do you have an updated fiddle/jsbin for the course? Looks like the linked one expired. As always thanks for the great tutorials!!!!!!!

[@filipequincas1485]

Beautiful. Your example in 8:30 was just what I needed to understand this concept of Async/callbacks. I have been watching many classes on youtube about this stuff and yours was the only one I could understand seamlessly, thanks!

[@thisaintmyrealname1]

Man I'm a huge fan. I discovered you on udemy and after taking your React, NodeJS and MERN Stack courses I found this channel and it's nothing but pure gold.

[@dariussturge7479]

6:22 has me laughing out loud ...Boston accent and all you keep it real!!! Live for your content broski keep it coming.

[@dolanbright3733]

this reminds me of star wars card trader guy

[@moderncloth682]

baw-dy pah-suh wicked hahhd.

[@tmattoneill]

It's like having Bill Burr teach you JS

[@sagarghare9829]

Thanks brad for this tutorial. you are good teacher . love from india

[@cybersyn-nh8du]

This video actually makes a lot more sense than the majority of the other videos I've watched about the topic. Great course :)

[@zahraf3256]

I learned php from you many years ago when you had a crash course with stuff like chat, blog,... Now I'm still learning from you after so many years! Thank you Brad Traversy!

[@jamalabdullahi8155]

Thanks traversy media

[@davidredmond5094]

"Ah Shitttttt...." Brad, you are amazing :) Thanks for the content!

[@BobbyBundlez]

holy crap only 10 minutes in and already finally understand more about callbacks than i EVER HAVE from ANY other tutorial. you are definitely right about the fact that there is simply not enough video formatted lessons. all i have found is complex articles trying to explain this stuff. thanks man! i may have to sign up and pay for your udemy course. get at me on here if you are cool with answering some questiojns about it

[@GoncaloGuitarist]

The best explanation and compilation that I've seen. First time that I can wrap my head around those things. Is true: there's few material that actually explains it thoroughly. Cheers. 🙂

[@abrahamemmanuel4906]

Love from Lagos NG... Congrats on 400k subs

[@sodiqoyedotun3185]

Abraham, howdy? So I have a broda that likes Brad Traversy Tutorials from Lagos.

[@osasiria2728]

yeah even me too

[@nnaemekaish]

Me three :)

[@IsaacAsante17]

Me four :)... Oops, I'm not from Lagos. Oh well, cheers brothers.

[@angelrocky5852]

We plenty 🙆

[@MrMarkgyuro]

this was great, really clear, yet interesting : )

[@gregorybrewer6776]

Brilliant tutorial: to the point, short and concise but containing everything. Also I like the slow pace of your class and it is easy for me to follow. Thanks a million 😄

[@MrHurrii]

Thank you for the video. Finally I've wrapped my head around async/await. Keep up the good work!

[@chablay1]

Thanks for teaching us with this valuable suff, you are true A teacher, god bless u always, love from INDIA.

[@code_siksha]

To understand es6 basics in hindi watch kzbin.info/aero/PLZjjdd9-SJS2NwSWDZhueyoGzCJkeg6RV

[@chiboreache]

_const fetch = require("node-fetch")_ js... js nevah change.... btw, thanks for the tut! I *catch* it, finally ~_~

[@joel-rg8xm]

So, I was watching many confusing videos about Async Javascript stuff, just to find this tutorial from over three years ago to finally get the whole point of it. No doubt that simple minimalist examples get always the job done when teaching-learning :) THX

[@jieouyang2856]

One of the best learning video I have watched, compare all of them together and explained very clearly. Nice work

[@muhammadhamzaasif2128]

Hey Brad Plaese make a crash course or KZbin series for MEAN stack beginner developer

[@stevenluoma1268]

"So how do I do the .catch in the async await stuff?" I could see someone asking. try{ all your stuff that awaits } catch{ } ! Just like how you'd do it elsewhere =)

[@MrSidMan]

I am a definite subscriber to Brads excellent tutorials. He's an excellent teacher, well explained, and well paced. I highly recommend further studies via the channels he mentions. I save time and money going with his suggestions of various online services he mentions on some of his lessons, and I just have to give a big thanks to Brad for his dedication to what this channel is all about. Thanks man!

[@jasonclydechua994]

Before watching this video, I had so much trouble trying to understand these three topics: callbacks, promises, and async/await. Thank you so much! Your video helped a lot!

[@rominagomez789]

"Yeah, I can't spell, that's what went wrong" lol

[@braker37]

Is it necessary to use await in this code: const data = await res.json(); As far as I understand, await is used when fetching data, while in this case, you are just parsing it, which happens synchronously (supposedly). Please tell me if I'm wrong and where :)

[@tonygriffin944]

Great question. I recently watched a tutorial where the teacher had done as you described, omitted the second await on parsing the data. When inspecting the data in the console it was not in json format. The teacher immediately knew it was because he forgot to await the response from parsing the data. He said it does actually take some time (milliseconds), especially when dealing with larger data sets. So best to put an await in-front of the json parse method if you want to ensure you get the data in the json format. Hope that's helpful.

[@sayedpritom]

@@tonygriffin944 Thanks for sharing the lesson. It was helpful 👍

[@nukeware9444]

it actually takes some time (milliseconds) to parse JSON.

[@tenpointcorner]

After the initial fetch() call, only the headers have been read. So, to parse the body as JSON, first the body data has to be read from the incoming stream. And, since reading from the TCP stream is asynchronous, the .json() operation ends up asynchronous. Note: the actual parsing of the JSON itself is not asynchronous. It's just the retrieving of the data from the incoming stream that is asynchronous.

[@jogiparam]

By far the best available tutorial on Callbacks, Promises and Async Await. Thanks Brad :)

[@JohnnysaidWhat]

This was so helpful. The best explanation on the internet on promises, and await on the internet period. Thank you so much.

[@aaronestes3282]

"I can't spell that's what went wrong." lmao

[@masquereseau5635]

Promises, and they still feel oh so wasted on myself

[@jordan59961]

❤️ nero

[@radadad9404]

I have been struggling with understanding and differentiating all of these. Thanks for this video. It clears things up so much!

[@jovilh]

Such a clear video. Finally an explanation I can wrap my head around. Thank you so much!

[@pinch-of-salt]

I love your videos! I am new to JavaScript and this helped me a lot. What do you think is the best language as an all-rounder? Python,JS,Java,C,etc.? I am really good in Java but I do realize that Java is old in it's approach, development is time consuming and at times non-productive. I loved groovy too but not a lot of jobs available for pure groovy development.

[@rohanshenoy8353]

Hi bro, well i don't think there is any one best language. If you are comfortable in Java then don't worry, I don't think java is going anywhere soon. If you want to learn a new language I suggest JavaScript. Many may suggest otherwise, my main reason is you can do a lot using JavaScript may that be web, android, IOS, desktop and even machine learning. So that's just my suggestion. Cheers.

[@Theelderscrollsftw94]

@@rohanshenoy8353 Seriously? You can code machine learning with JS? IM SO GLAD I'M BECOMING A FRONT-END DEVELOPER! To what degree would you say you are using machine learning?

[@rohanshenoy8353]

The Panda King Python definitely has more libraries to offer than JavaScript (as of now). Still it's quite developed and growing. Many developers are showing interest in machine learning so I'm sure ML in js will catch up pretty quick too. U can check some course on udemy too. I think there are few in js.

[@F4ILCON]

@@Theelderscrollsftw94 Just quick add to knowledge, not sure its clear, but JS is front-end and back-end, there are some big difference between them, so ML would be back-end development for JS, there specifics back-end JS library for ML, just like you have for front-end like React and Vue for example.

[@Theelderscrollsftw94]

@@F4ILCON Ah cool, I didn't know that...

[@bhaaratsharma6023]

at 23:48 isn't the 'await' before res.json() redundant since await fetch is already there ?

[@saienrique]

Did u test it. Fetch returns a promise. Might need await

[@tenpointcorner]

After the initial fetch() call, only the headers have been read. So, to parse the body as JSON, first the body data has to be read from the incoming stream. And, since reading from the TCP stream is asynchronous, the .json() operation ends up asynchronous. Note: the actual parsing of the JSON itself is not asynchronous. It's just the retrieving of the data from the incoming stream that is asynchronous.

[@TheLollercaster]

As always, your examples/explanations are the best to address these concepts/terms. Thanks for doing this!

[@clunkeys]

Loved it. I'm glad you went from ground up because this has been an issue living inside my head rent free.

[@raymondmichael4987]

Walaah, first to comment. From Tanzania

[@MrGlujaN]

wow!

[@robinl6137]

I think it's 3 seconds? cause the callback will wait for 1 second.

[@thinkingaloud7925]

So satisfying that i found someone who found this out. I almost thought i was wrong...

[@luisfvperes]

I have the same doubt

[@maspoetry1]

yes, because time out is really saying 'time to start executing' not the execution time.

[@samanthatricia318]

This thing should have been explained in more detail. I am also confused, and disappointed cos its should have been explained

[@javierzapien314]

Samantha Tricia it’s a crash course

[@mmbower1]

Traversy is my favorite code instructor hands down. There are some others who are close but this guy takes the cake for sure.

[@booklover3393]

Been struggling with async js, this video was exactly what I needed! Appreciate your content so much!!!!

[@chickenballs-balls]

"I can't spell, that's what went wrong" xD

[@elevatedtech]

are you going to CALLBACK the person that called you? Sorry lol

[@mohsenmaghrebi6935]

thank you very useful, every time i am assigned a front end web project i revise and recap my knowledge. Specially because i switch around many programming languages, i can easily remind myself the basic concepts by watching videos like this. Kudos and great video.

[@olegkontsograda9006]

Than you yet again brother! The basics are so crucial, and this basic crash course finally helped me to puzzle together the logic of how async/await and promises work. I cannot express enough how much I enjoy your content, keep it up! I believe I speak for the collective when I say, we need it! :)

[@daviskatana8723]

Amazing teacher, without you I don't see myself understanding most coding concepts, keep on the great work

[@williambrune1452]

One of the clearest explanations on callbacks and promises I have seen. Thank you.

[@Adam-gp3ij]

Trust me, I watched almost 10 videos on KZbin, and they were not making sense to me about sync/async. But, I got the entire idea, after I watched this video. You are amazing. God bless you

[@abdurrahmanrobin4915]

I was struggling solve an issue last couple of hours, and after watching this - problem is solved. Thanks, Now things are clear :)

[@sandeepnegi4939]

after so long fiddling with the concept finally learned it thank u so much

[@wryguy]

I've spent hours reading docs and tutorials. Your video finally made it click. Thank you.

[@xoxoldies13]

This is one of the most useful videos, I've watched on this topic. Thank you for making this

[@nerdytech7836]

Thankfully React does all this for us under the hook! But it is very useful to refresh concepts, great work Brad!

[@chriswright1001]

this is the best explination of this prinicipals - it has FINALLY sunk in - thank you so much!

[@VickTechPro]

TraversyMedia, your Async JS tutorial was a game-changer for understanding Promises, thank you for making complex concepts accessible! You are the best.

[@themenon]

The third video I am watching to understand callbacks , promises and async, and finally, I understood the concepts, thanks to your clear, 'non-jargony', explanation.

[@RichardLopez-lr4el]

Incredible tutorial! This helps so much! I was confused by the chrome API and this clarified everything!

[@aacismaharjan]

I have been stuck in API async await... it took me 1 days and this video to figure it out... Thank you Brad Sir!

[@abhisheksinha9027]

Great video. Thanks. You simplified some of the complex looking stuffs in JS.

[@stuvius]

Calm, no bs, and easy to follow. A+

[@ianhutchinson1436]

The best video tutorial on async JS I have come across. Thank you for putting it out.

[@jadehendricks2368]

Thanks for this Brad, this is the second time I have been through this video. It has finally clicked :)! Thanks for all the hard work.

[@marthineangelfabico8646]

This video is saving me rn. My lecturer simply was writing code in his lecture and didn't elaborate when he used async / await / fetch for the first time

[@brianmcclain2241]

Brilliant, clearly explained, and unpretentious -- I FINALLY get Promises and async / await (or at least I've taken a quantum leap forward)

[@vaibhav_naik]

Thank you for this tutorial, it really helped me understand this callback, promise and async await

[@kovalski6000]

This is exactly what I was looking for. Very useful and clearly explained. Many things are clear to me now. Thank you very much

[@sivaiiitn6779]

Tried many other resources but you made it very clear and simple. thank you so much!!

[@yatin1370]

This has definitely increased my comfort level with these topics by a good magnitude, thanks for that.. 👍

[@zachtapia]

Thank you so much, you have made clear in 24 minutes, what would have taken me days to understand and wrap my head around.