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]

课代表！

[@BrianGomesHeartsYou]

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

[@andrewmukare3433]

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

[@RareTechniques]

Thanks brother

[@anuppokharel703]

Same here

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

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

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

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

[@onohsamuel6072]

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

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

[@carrillocarlosce]

Nice I love your javascript tutorials

[@mohamedmostafak]

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

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

[@Guitarpersonthing22]

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

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

[@sukanyachakraborty3359]

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

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

[@limitless9483]

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

[@tarandeepmatharu3488]

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

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

[@stratr4694]

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

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

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

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

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

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

[@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 :)

[@michaelwalsh6802]

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

[@sanghvian]

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

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

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

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

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

[@siyedyoussef3202]

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

[@sagarghare9829]

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

[@jieouyang2856]

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

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

[@jamalabdullahi8155]

Thanks traversy media

[@MrMarkgyuro]

this was great, really clear, yet interesting : )

[@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 :)

[@TheLollercaster]

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

[@davidredmond5094]

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

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

[@radadad9404]

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

[@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 ~_~

[@booklover3393]

Been struggling with async js, this video was exactly what I needed! Appreciate your content 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.

[@muhammadhamzaasif2128]

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

[@aaronestes3282]

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

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

[@MrHurrii]

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

[@rominagomez789]

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

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

[@williambrune1452]

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

[@xoxoldies13]

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

[@masquereseau5635]

Promises, and they still feel oh so wasted on myself

[@jordan59961]

❤️ nero

[@raymondmichael4987]

Walaah, first to comment. From Tanzania

[@MrGlujaN]

wow!

[@JohnnysaidWhat]

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

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

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

[@chickenballs-balls]

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

[@mmbower1]

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

[@clunkeys]

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

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

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

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

[@jovilh]

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

[@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 =)

[@elevatedtech]

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

[@daviskatana8723]

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

[@jogiparam]

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

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

[@VickTechPro]

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

[@HeroesOfAesthetics]

amazing video, I just subscribed, best video I have seen on this topic. Love how you start from the basics

[@JustLookA7]

Great content Brad. I always come to your videos first when I need to learn something new. Cheers from Argentina :D

[@wryguy]

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

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

[@sandeepnegi4939]

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

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

[@aaronalmeida426]

14:30 'Yea I can't spell that's what went wrong' gave me a good chuckle

[@stuvius]

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

[@mk325ef]

This was another great video. I really love your videos. Thank you for being so clear and well spoken.

[@chriswright1001]

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

[@ianhutchinson1436]

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

[@RichardLopez-lr4el]

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

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

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

[@stdope6989]

Currently doing a react tutorial, but had to come here for a refresher. Great tutorial as always. Really like how ur content applies to beginners

[@nerdytech7836]

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

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

[@helengu]

I can't stop watching your videos... keep up with the good work!

[@sivaiiitn6779]

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

[@abhisheksinha9027]

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

[@OperationsAndSmoothProductions]

Brad Traversy is the KING of crash courses .......... He's had more crashes than evel knievel ! ! !

[@robingabor3156]

I watching your videos not only for gaining insight into the subjects but also to get inspired, keep up the great work

[@yatin1370]

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