Async JS Crash Course - Callbacks, Promises, Async Await
ฝัง
- เผยแพร่เมื่อ 21 มิ.ย. 2018
- 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 - วิทยาศาสตร์และเทคโนโลยี
Is it normal to sometimes have to watch these kind of videos a few times for it to sink in?!!
yes -- repitition is key
I like repetition from multiple instructors as they all explain it differently.
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.
Yes. Thats how it is.
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 =)
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))
You're a legend! Thank you!
you are an angel
@@wojciechkohut5383 hhh
thx
课代表！
Struggling for years to get my head around promises. This has done it in 20 min. Thank you!
You're one of the best software development teachers on TH-cam. 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!
You have an innate skill of communicating problems in a clear, concise way. Thank you, you're the most effective teaching (JS) resource on TH-cam.
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 🙏
"Dom was painted.." Your understanding and explanation is on another level :)
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.
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!
Thats exactly what i thought as well
I owe most of my understanding of JS to you. Thanks so much man
Thanks brother
Same here
Today is 01/03/2024.
you truly made this for beginners and advance.
Thanks, Traversy Media
You're a rare gem. ❤
It has been 4 years, and still the best video regarding this topic yet.
Your efforts are really appreciated.
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.
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. ^^
I am new to JS and I never understood these terms clearly. Thank you so much Brad for making it so crystal clear.
This makes so much sense. I like how you can simplify the problem and create an example that's so easy to comprehend
Man you don't even know me and you've helped me so much in life thank you!
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.
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
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 !!
Nice I love your javascript tutorials
Very simple, clear, and concise. Excellent tutorial and refresher. Thank you so much for the awesome video!
The ability to describe complex things so clearly, succinctly and simply is truly it's own kind of genius.
Cheers.
I've been struggling a bit understanding these async functions. This was was a great way to explain them. Thanks!
thanks man ,
i was very frustrated reading alot of content online and didn't learned async await love your channel
On this topic, this is the BEST tutorial i have ever seen. I Promise. Thank You!
Await a minute, I see what you did there
@@davitchkheidze670 Didn't fetch the joke, mind explaining it?
@@PP-xj7vg reCallBack
"asynchronous programming is the best place for bad jokes" - Fireship
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.
Lotta videos watched on this but like everything in programming, it's never fully clear till Brad teaches it. Thanks a lot man !
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!
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. :)
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!
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.
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 :)
Congratulation Brad for 400K subscribres ..... And we are weating for you're amazing video about Docker Crash Course
This video actually makes a lot more sense than the majority of the other videos I've watched about the topic. Great course :)
One of the best learning video I have watched, compare all of them together and explained very clearly. Nice work
6:22 has me laughing out loud ...Boston accent and all you keep it real!!! Live for your content broski keep it coming.
this reminds me of star wars card trader guy
baw-dy pah-suh wicked hahhd.
It's like having Bill Burr teach you JS
this is pretty awesome, thanks man.
You're very welcome
th-cam.com/video/WDvJ94H-Ppc/w-d-xo.html
Yes good
Agree, thanks for all the simple examples and good explanation
@@TraversyMedia Do you have an updated fiddle/jsbin for the course? Looks like the linked one expired. As always thanks for the great tutorials!!!!!!!
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!
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.
"Ah Shitttttt...." Brad, you are amazing :) Thanks for the content!
Thanks brad for this tutorial. you are good teacher . love from india
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 😄
Love from Lagos NG...
Congrats on 400k subs
Abraham, howdy? So I have a broda that likes Brad Traversy Tutorials from Lagos.
yeah even me too
Me three :)
Me four :)... Oops, I'm not from Lagos. Oh well, cheers brothers.
We plenty 🙆
Thanks traversy media
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. 🙂
14:30 'Yea I can't spell that's what went wrong' gave me a good chuckle
this was great, really clear, yet interesting : )
Thanks for teaching us with this valuable suff, you are true A teacher, god bless u always, love from INDIA.
To understand es6 basics in hindi watch
th-cam.com/play/PLZjjdd9-SJS2NwSWDZhueyoGzCJkeg6RV.html
By far the best available tutorial on Callbacks, Promises and Async Await. Thanks Brad :)
This was so helpful. The best explanation on the internet on promises, and await on the internet period. Thank you so much.
_const fetch = require("node-fetch")_
js... js nevah change....
btw, thanks for the tut! I *catch* it, finally ~_~
Hey Brad
Plaese make a crash course or TH-cam series for MEAN stack beginner developer
Traversy is my favorite code instructor hands down. There are some others who are close but this guy takes the cake for sure.
Been struggling with async js, this video was exactly what I needed! Appreciate your content so much!!!!
"I can't spell that's what went wrong." lmao
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 :)
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.
@@tonygriffin944 Thanks for sharing the lesson. It was helpful 👍
it actually takes some time (milliseconds) to parse JSON.
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.
As always, your examples/explanations are the best to address these concepts/terms.
Thanks for doing this!
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!
"Yeah, I can't spell, that's what went wrong" lol
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.
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.
@@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?
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.
@@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.
@@F4ILCON Ah cool, I didn't know that...
Thank you for the video. Finally I've wrapped my head around async/await.
Keep up the good work!
This is one of the most useful videos, I've watched on this topic. Thank you for making this
Promises, and they still feel oh so wasted on myself
❤️ nero
at 23:48 isn't the 'await' before res.json() redundant since await fetch is already there ?
Did u test it. Fetch returns a promise. Might need await
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.
One of the clearest explanations on callbacks and promises I have seen. Thank you.
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! :)
"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 =)
"I can't spell, that's what went wrong" xD
Amazing teacher, without you I don't see myself understanding most coding concepts, keep on the great work
after so long fiddling with the concept finally learned it thank u so much
I think it's 3 seconds? cause the callback will wait for 1 second.
So satisfying that i found someone who found this out. I almost thought i was wrong...
I have the same doubt
yes, because time out is really saying 'time to start executing' not the execution time.
This thing should have been explained in more detail. I am also confused, and disappointed cos its should have been explained
Samantha Tricia it’s a crash course
Walaah, first to comment.
From Tanzania
wow!
Loved it. I'm glad you went from ground up because this has been an issue living inside my head rent free.
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
are you going to CALLBACK the person that called you? Sorry lol
I have been struggling with understanding and differentiating all of these. Thanks for this video. It clears things up so much!
Such a clear video. Finally an explanation I can wrap my head around. Thank you so much!
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.
Great content Brad. I always come to your videos first when I need to learn something new. Cheers from Argentina :D
Thankfully React does all this for us under the hook! But it is very useful to refresh concepts, great work Brad!
Calm, no bs, and easy to follow.
A+
I've spent hours reading docs and tutorials. Your video finally made it click. Thank you.
this is the best explination of this prinicipals - it has FINALLY sunk in - thank you so much!
Brad Traversy is the KING of crash courses .......... He's had more crashes than evel knievel ! ! !
you don't understand how much of help you do with this videos your amazing !
I can't stop watching your videos... keep up with the good work!
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
Very nice, I like the fact that you never leave out the basics and you don’t wanna show off or something, you simply wanna teach the stuff. Keep it up.
I could care less about showing off or looking smart. My goal is to teach in a practical manner so others can learn and so it sticks. Not to confuse them and have them think I am a genius. Unfortunately, many programmers are like that. They want to confuse you and then call you an idiot :)
Thank you so much, you have made clear in 24 minutes, what would have taken me days to understand and wrap my head around.
Trust me, I watched almost 10 videos on TH-cam, 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
Incredible tutorial! This helps so much! I was confused by the chrome API and this clarified everything!
I watching your videos not only for gaining insight into the subjects but also to get inspired, keep up the great work
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!
The best video tutorial on async JS I have come across. Thank you for putting it out.
i love the way you go from beginner to intermediate in your videos
Great video. Thanks. You simplified some of the complex looking stuffs in JS.
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.
Traversy Media always explains things and concepts so clearly. I am your die-hard fan.
Oh man, thanks a lot, I've read and watch so many materials and don't understand until I met this one.