Async Javascript Tutorial For Beginners (Callbacks, Promises, Async Await).
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- Check out my courses to become a PRO!
developedbyed....
We are getting closer and closer to launching the Creative Javascript Course. I wanted to share a small portion of the Async Javascript chapter of the course where we will learn everything there is to know about how async code works in javascript.
We are going to take a look at all the popular ways async code is being run such as callbacks, promises and the new async await.
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/dev...
#programming #javascript
"Nobody uses XML anymore"
I go to work everyday and cry at my desk because they use XML.
ufff feels bad man
I bet it is Java?
Farrell Raafi yepp
XML can give u serious security vulnerabilities.
@@farrellraafi1301 C#
This is probably the clearest I've ever watched anyone explain async/await and promises before. Well done!
i can't agree with you more
indeed
@@swapnil0979 nice
Agree
Just watched and I agree
I was searching a tutorial about async last night Ed! Have you read my mind or what? 😜 Have a nice day!
3:19 "Top Ten Musicians Who Surprisingly Didn't Die From Drugs" What are you watching Dev? 😅 // jk it's cool
He's probably watching Top Ten.
This morning I was looking for Promises, and your notification poped up. This must be some sign :D
I can’t learn such boring stuff without a mentor as interesting and lively as this.
same!
Thanks so much for this video! You're the first person I watch to give such an overview of everything INCLUDING why things get nicer as we move along. Your examples are also on point and realistic. I appreciated this video a lot!
please help. 18:56 at line 6 we can directly console log email password then why are we using callback dunction as call back function does the same.
I was starting to panick because everywhere I read, I couldn't understand callbacks, promises, async and await. This video has helped me so much. Thank you ed
It started out pretty good, but got a bit too fast towards promises for my taste.
"Nobody uses XML anymore" - Salesforce says "That's not true!"
Took me about a week to really understand , in a way, how asynchronous code works. I understand promises kinda, but async/await syntax is more intuitive for me. This async stuff is a headache nonetheless lol
It is a headache definitely, especially if one is not used to async model.
"Nobody uses XML anymore"
Android developer dude: Hold my coffee
ya native android dev
Yes to this!
now jetpack compose :'(
Odoo developer too
*sees Summoning Salt under your subscriptions*
Me: Ah, I too am a man of culture
I cant emphazise enough: very very good teacher!! took me sooo long to understand async stuff in js...
thx a lot! i hope you make some additional videos to this topic! greetz
This channel is a gold mine. I hated coding and development before getting here like how kids hate Maths at school. Thank you so much for making such difficult topics so easily digestible and understandable.
Edit: AND SUPER FUN TO FOLLOW ALONG
The way JS does async await still feels pretty janky compared to C# where it seems much more natural
I might use this tutorial as a reference for my video! Great stuff man! Keep working hard, all of you guys that teach for free deserve all the success in the world.
After nearly giving up on learning Promises I finally got what I was looking for in this video. Thank you so much for making things simple and detailed, rather than complex long videos which makes it harder for the beginners.
please help. 18:56 at line 6 we can directly console log email password then why are we using callback dunction as call back function does the same.
Could you share your discord server's share link? I want to join it
@@szymex8341 Thanks a lot
24:36 What is promise
29:13 Refactoring using promise
37:31 Async Await
man, you're great!even if you sayd that you're not gonna give the course for free you're still posting some of you're hard work for free!keep the hard work
This is something i needed and I am so happy that you did a tutorial on this... is there any chance you will be covering ReactiveJS and observables in the future
Any corona virus API?
I was literally thinking the same :)
Watched several TH-cam videos and courses on this topic but! It's always great to get a fresh perspective.. 🤣
Hope you've been doing well Ed! Stay safe.. 😷
aren`t they all girlfriend-boyfriend words ?-----callback, promises, await
gf-bf loool lmao
Wonderful tutorial my gorgeous teacher on internet...
Nice video. My question is, how do you async/await to calls made to the Chrome API for extensions? Every time I try to apply await to any of those calls (directly or indirectly) I receive a " 'await' has no effect on this type of expression" message. Even if I wrap the call in my own custom function, still the same results. I need my application to stop everything it's doing and wait for the response from that API call before moving forward. I can't imagine having to insert my entire logic into the callback of the API call method. That wouldn't make any sense.
to be honest sorry to say, I am trying to learn something from you but I don't know why you are going to Figma from code editor believe me you broke my concentrate
Hi Ed, I like your videos. Do you have a NodeJS (for backends) course that I can enroll in?
Watching your video and Brad Traversy video about Async give me full understanding about callbacks, Promise and Async&Await.... Both of you are the best teachers
Cleanest most visually pleasing explanation of Callbacks on the internet. Thanks Dev Ed, not all heros wear capes.
23:02 promises and Async/await starts
Life saver !!!!
setTimeout doesnt return value ! why did you use return inside setTimeout ??
Watched so many js promise videos, finally got it from here!
Was getting bored reading javascript.info articles , decided to see a video instead , loved it 🙃
Nobody: " "
Me: Tool is one of my favorite music bands xD
yep
The explanation is too simple but superb MashAllah!
That intro made me LOL! I almost spit my water out--you have a really good sense of humor Ed XD
It is a very good learning JavaScript information!
Worst video I've seen so far about this topic
Hello again! Loved the video. I'm thinking about trying the course too!
Thank you for explaining it in the smoothest way possible. Finally, someone who DESERVES a subscribe :)
Well, I have a question...If I use promise.all on two promises that have a setTimeOut of 2000ms and 5000ms respectively, then will we not get both the output after 5000ms? Cuz in the video setTimeOut having 2000ms logged into the console first, which I wasn't expecting.
My code 'miraculously' worked after watching your video. Thanks Ed!
Nice way to slip some awesome Tool into a programming tutorial!!!
8:28 - 2000 seconds? Wait, what?! lol
15:34 - 1500 seconds. Same. 😂
okay he forgot to say milli before second...
It should be called AJAJ....
My boy Ed likes Tool. How do I subscribe twice
18:16 18:22 brackets around callback (user) =>
disappear?
vscode thee name please.
Great video. Isn't it that the best approach should have been executing a query filtering user then videos then details instead if the data is coming from a DB? This example is just for the sake of understanding async right?
Isn't this perfect?
Who else gets headache after learning some JS?
no problem if you wrote code in assembly or other advanced languages before ;) ..but what was key was the explanation in the first 5 mins.. for me it was just.. why does the function disappear from the stack... haha
Seeing Sweet Anita in your recommendations definitely caught me off guard lmao
i was just about to write "Are we just gonna ignore the fact that Anita's in his recommended videos?" lmao
Thank you so much! I had a hard time understanding how async works...
Excellent and sufficiently detailed information for beginners. I have been used to sync programming yet and this nodejs async way was giving me headache. The way you have explained is perfect for me to understand all these basics of asyncs in very much short amount of time.
Thanks a lot, Ed!
Subscribed :)
you freaking just gave me a headache with your screen switching.. It doesn't help if you keep showing two screen during one topic..
Finally I have found a developer that uses Windows on his device. By the way I was hypnotized by the manner in which you explain everything really to the point. I thought that nobody can compete with Brad Traversy but it seems like some people can.
'Nobody likes them..''' 🤣🤣🤣
Thank you for the tutorial. Good one!
Can anyone please give me link for the next video. I couldn't find it in his videos list. Thanks
This is probably the best and clearest video explanation i have ever watched on youtube !! handsdown
What is the theme you use in the video?
anyone knows ? 🙋♂🙋♂
I really enjoyed this video. Even though I thought I knew async well, I still learned a lot and it refreshed my understanding of basic JS for me.
at 11:45 , you should have mentioned about message queue and event loop stuff. That's an important thing too, isn't it?
why cant i see your face????? its so much easier when i see you/.. AAHAAHHA
Your beginning explanation and examples are much better than traversy media's
Please Ed I have a question , It will take only fiew seconds to answer me :
Should I learn ES6 , ES7 , ES8 , ES9 , and ES10 ???
Learn any javascript that you like, in the end everything will be transpiled by babel
Yes.
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Hi first')
}, 2000);
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Hi second')
}, 1000);
})
async function getFunc() {
await promise1;
await promise2;
}
getFunc()
In the above example, why it is printing "Hi second" first and "Hi first" next? It has to wait for First one to print first right, irrespective of the time given in settimeout
I need help with what is probably asynchronous problems with appendChild: stackoverflow.com/questions/64533564/all-recommended-async-management-methods-cannot-make-my-code-append
Hello Ed, can you help me out with this:
I add an event to a button: when the button is clicked, a trash icon is generated. So while we're in JS, the button obviously isn't clicked, and if I let x = document.getElementById(id of the trash icon), it results "Null".
The code will be sth like:
addBtn.addEventListener("click", function() {
HTML.innertext+= ``
})
So how should I apply the async/await here to get the id of the Trash icon?
Eres el primero que explica PERFECTAMENTE todo el proceso necesario para entender cada concepto. Felicidades y GRACIAS!!! 👏👏👏👌
Even i am korean who can't speak english well but i can understand what you say all
You are genius also i am sure this video is most well understandable tutorial in the world.
I don't know if I'm an idiot, but, setting up callbacks and wrapping my head around how 'callback hell' actually works/reads, totally fucks with my mind. It's been 36 hours and my mind is scrambled.
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.'); can you help me about this? Iam stack now on my JavaScript coding. Please
This is the only video where I actually understood the use of callbacks... In most of the other videos, they just explain with the example where they pass the function as a parameter. Typically add, sub example which DOESN'T explain the real use of callbacks.
"What is XML?, WE DONT CARE because nobody uses XML anymore" 😂
Just a quick question. Could I create links(buttons) to inject text into an using JS and hash tags; wouldn't that suffice or should I be using AJAX to make that request for optimization? Thankyou much.
XML is not used anymore? Holly mother of God! The document in which your video is being played is using a XML format, more specifically called HTML. HTML documents are a specific implementation of XML.
I don't understand asynchronous JS... Everywhere i read that asynchronous JS is about running code parallel and independent from each other but then they go on explaining how to perfectly synchronize code so that it is running in a normal synchronized way. In the case of callback functions, promises and Async/Await everything is relying on the code before. If some code needs a lot of processing time, the whole code after it is beeing blocked. I thought asynchronous JS was intended to solve exactly that problem. Can anyone explain?
At 16:20 , I'm confused what you are trying to communicate.
At 9th line invoking loginUser() function were you expecting the return value(userEmail) of the function passed as argument in setTimeout()?
i was reading the async programming chapter in "eloquent javascript" book and i got your notification .. thank you :)
I'm a picky subscriber, and now you have me for life! Thanks for sharing your knowledge and expertise 🙂
Great video, great explanation, love your style of explanation, it helped me understand it better :) AJAX ... what is XML ? We dont care, because nobody uses it anymore ;)
So, good.... , that such a nicely explained tutorial
8.32 .. anybody noticed dev ed saying "when the data come backs" 🤣🤣🤣,
instead of saying "when the data comes back"🤣🤣
Wait wait, in refactoring to async/await, all the functions for loginUser, getUserVideos, and videoDetails remain the same? Each functions return new Promise with resolve/reject doesn't change? The only thing that changes are .then and .catch - we use await/async and try/catch instead??
Contracted with a major Food company. XML is a backbone for IPC. I love your videos, just making a note...plus assumed it was more of a joke
Hey buddy why did you comment console.log('finish') statement at the end when you used Async function ? I mean if you had included console.log('finish') statement then the result would have been start,finish,data so dont you think it's the same behaviour as the one with using WebApi that you explained in the beginning of your video ?
Hey Juniors!!!! Here ... come here! I just found the best async JS explanation ever! Thank you a lot! Nice Job!
What if one promise among array of promises (in Promise.all([])) is gonna fail? I assume, the whole Promise.all() is gonna fail? So that, we should put .catch() in this case?
i find it unclear how you are linking the callbacks together. I mean, if you already have the user's email, why ask the function for the email? Likewise, you act as though you are using information from the previous function to run the subsequent functions, but you are not. The subsequent functions return the same information regardless of what the previous functions have run. maybe you are just skipping over how the functions would actually work together, but it is very confusing for learners.
I've been learning JS for a year or so. and no matter how many times I try to learn async code I don't completely grasp the concept.
once I follow the code I think, oh yeah, I got it. but I always come back to follow some tutorials cuz I forget how it works.
async code is so fucking shit. it's the most difficult concept in JS!
41:50 I liked the video. By the way, did you do that pratical video? I think that would be useful to me. Looking forward to that one. I'm also subscribing.
@Dev Ed
We have seen that not all calbacks we use are asynchronous in nature.
I have the curiosity to implement such a callback manually where in the callback runs in an asynchronous way. Without using any builtin functions, such as setTimeout, or setTimeinterval etc.
Can we write our own js code where in no external functions are used just the bare bone language and implement asynchronous code?
Thank you for pointing out the behind the scenes of running JavaScript codes. The execution context really confused me alot and visualize the codes one bye one really solve my confusion.
Oh ... oh wow, this is one of the better tutorials I've seen. However it kinda became a bit less beginner-friendly at the end of promises xD ... u kinda sorta at that point sped the things up and unlike at the beginning, it got faster, your speech became less comprehensible, not perhaps taking into the account actual beginner level of the listener. But again, this is one of the better tutorials out there. ^^ thanks!
Thanks. very useful video. do y have video where y build any real useful app/project using Promises, Async Await?
very good video. GJ with this stack and API model i didn't know about that and no one was explaining it in videos that i watched. Finally explained properly Thank You.
Why you are giving videoDetails(videos[0]), videoDetails are about "title of the video" but you are giving video[0] array inside it and at my vs code I got error! pls help
thank you so much so happy with your explanation
What is this man thinking, giving me a tutorial on a sink.
What's next, a tutorial on a bathtub?
OOHHH wait ASYNC.