JavaScript Async Await
ฝัง
- เผยแพร่เมื่อ 29 ก.ย. 2024
- One of the hardest things about writing good JavaScript is dealing with heavily nested asynchronous code. Promises were created to solve the problem with callback hell, but there are still plenty of nested problems related to promises. This is where async/await comes in. JavaScript added async/await to allows developers to write asynchronous code in a way that looks and feels synchronous. This helps to remove many of the problems with nesting that promises have, and as a bonus can make asynchronous code much easier to read and write. In this video I am going to explain what async/await is and how to use async/await to rewrite your existing promise based code.
Learn Promises First:
• JavaScript Promises In...
Async/Await Article:
blog.webdevsim...
Twitter:
/ devsimplified
GitHub:
github.com/Web...
CodePen:
codepen.io/Web...
#JavaScript #AsyncAwait #Promises
I showed this video to my crush and she's my wife now. I'm grateful, thanks for sharing this video with us.
I didn't realize I had so much power within my videos. I need to show this to my girlfriend :P.
@@WebDevSimplified aaaaand, now she's pregnant (o_O)
@@WebDevSimplified Perfect . :))
@@pearlsswine it is black and has ginger curly hair, what does this mean? D:
Did the same, now I'm single
I've been watching all your videos. Nobody else on youtube has coding videos so succinct and efficient to watch. Thank you for valuing the time of your viewers!
I'm in a web dev bootcamp currently and you're videos are amazingly helpful, thanks so much.
I don't comment usually but this video is on another level. Spent hell lot of time understanding promises and async-await and after watching this video I am feeling like how foolish I was not to understand this simple concept 😂
Thanks! I leaned heavily on your videos while I was in a bootcamp and now have a good paying job! Thank you so much for your help -- I've been meaning to buy you a beer for some time
Thanks! I am glad to hear you landed a good job.
This is definitely one of the best, simplest explanations I've seen of async/await. Thank you!
Thanks! I am really glad you enjoyed it.
Sure !
@@vinubox It really is. It's short but effective.
thats what everybody says in every tutorial in youtube lol I trust you and im sure this is an epic and amazing explanation but its funny to see the same comment in every tutorial.
@@latinstuff1 lol you're not wrong about that! Ppl tend to absorb information differently, so it makes sense it would be a common comment on tricky subjects.
Went through 2-3 different videos but the way you explained async await (and promises in a diff video ) is way too good. Thanks!
this is mind boggling. i am overwhelmed by how much easier this is.
thanks man!!
man I love how you explain things so clearly
You are a legend buddy :) Thank you. no intro and all like other TH-camrs.. directly to the point
This is by far the best explanation/example about async/await.
Thank you so much. 👍😉
Ive been struggling to grasp async and await for a couple of days. This video made it so easy, thank you!
Well paced and not convoluted. Thanks!
I must say you great man ...really a great video easy and simple to understand Asyn await.Thank You bro
simple and straight to the point
you make one of the best videos on any topic
Hello Shweta, do you frequently learn from these videos? Would you be interested in exploring an opportunity in web development?
one of the best videos on async functions
New user of your channel, but impressed with your clarity.
I had to Subscribe you as a Thanks giving :)
Little misunderstanding: Async & Await keywords are used to simplify the "then/catch hell chain". if you have a promise inside a another promise inside another promise and on and on it might look bit confusing and this is "callback hell" for callback based API such as NodeJS and "then/catch hell" for Promise Based APIs. Async & Await is only another way to execute Promises. It's not a type of Promise/Asynchronus_Code_Executor (e.g:Callbacks) iteself. It's just an executor which let us mitigate the code complexity of traditional callback/then/catch chain and use Promises as simple as using a Synchronus variable in a Function. So comparing async/await to Promise is kind of comparing a car with its steering wheel. But Async/Await vs. Then/Catch suits...
Please Kyle, make another video about this and explain your horrible mistake & I know you know that too. Don't create misconceptions. Otherwise it will lead us too uncertainity and hence we will end up doing nothing. Even I was arguing with one of my senior and he checked your video when I referenced it to him and then explained the whole scenerio & with proves. So please fix it..
KR. Tirtho This makes more sense, I did not understand the reasoning for await in the scenario he is describing here. The code is already loading in that order, you’ve just made it easier to read now.
*edit* actually, no...no, that doesn’t explain the awaits being used in this scenario at all.
Thank you so much! I finally understand Promises, Async & Await. Glad I found your video!!!
Saving my mental state as always. Thanks bro
simplest explanation of the complicated logic!! thanks a ton!!
Thank you I always wanted to understand what all the fuss was about promises and it turned out to be pretty simple. Also tons of videos and tutorials make it seem complicated to understand.
You are making wonderful tutorials, I must say, for topics ranging from the basic to the most advanced level of JavaScript Programming. I value the simplicity and straightforwardness of topic explanation. Kudos for your hardwork and efforts.
This is a great explanation of Async/Await, but I must say that Thumbnail you used is very misleading! I got in thinking that Async/Await substituted Promises completely. The truth is it only substitutes the .then.catch section of Promises. Still great explanation, I just think that difference should be clearer :) Cheers!
Very well explained. Easy to understand.
Thanks
You are killing it man👍
You are the best. Super explanation and example buddy 👌
Incredibly simple and understandable explanation thank you!
You're welcome! I am really glad I could help.
Thank you....finally someone explain it clearly. Subscribed!
Thank You So Much BROTHER............🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻
I understand the whole thing. Keep making more tutorials like that.
ohhhhhhhhhhhhhhhhhhhhhhh
Btw, this and the previous are the best promise tutorials on youtube. Straight and to the point.
Thank you!
concise and clear. but is it mainly used in javascript?
Thanks mate, it's really helpful and easy to understand!
You're welcome. I'm glad you enjoyed the video.
Thx god for you to exist
Thanks buddy for awesome explanation
Really good explanation , time saved :)
Excellent!!! Thank you!!
The code snippet is missed, so cannot copy and try.
Do you have video on how to use these concepts in AWS Lambda? Because these concepts really helpful there.
Excellent video. Thanks for your incredibly good content and bright ideas
This is amazing. Simple and clear!
Awesome video, love the pace!
I did it with your help, thank you my boy
Good job, very clear video
Excellent video!
Ah awesome! Thanks so much you made it so easy to understand!!
Great video! Thank you so much. :)
thaks for all your videos!
I'm learning with ODIN Project. Async/await seems way easier to work with than Promises.
omg this is such a great video.
You rock dude.
dude... amazing...
I have come here after watching fetchapi and it is mindblowing
You made it easy
This was awesome
Another great tutorial, thanks again g!
You're welcome!
Great video, but I am a bit confused because around 3:45 you say the await keyword makes the async function to wait for the makeRequest to finish, but then you say around 4:10 the async function won't wait for the await function and keep on going. If you could clarify it would be helpful. Thanks
He said that because doWork() is an asynchronous function, which means doWork() function will run in the background and it will keep running (if any) more code after the doWork() function (not the doWork() content but all the code after closing the doWork() function bracket: doWork(){...} --> 'more_code'). The only code that will wait to run is the code that is inside the doWork() function, the code after the await statement since the program cannot run that code until the result is returned.
Neat!!
It really helped!
VERY NICE!
TIL you can use async await when returning promise.
How are promises and async different from normal procedural approach ?
All of this code can we done without using promises or async and it will work just the same, so what is different ? where should I be using them ?
Thanks kyle🙏🙏🙏🙏
Great! simple and clear
Thank you!
Was it changed because console.log('Making Request to ${location}') no longer replace the location with the correct variable? Replace that with console.log('Making Request to '+location) to make it work, same for the ${response} part.
Thanks Sir, I appreciate the way you've made it look it simple. Now my fears are gone.. I will use Promise and Async Await in my projects.
I'm really glad my video was able to help!
Hey how did you make it so simple? Thanks
Exactly!
Great video, Simple and easy to understand tutorial. Thanks man.
You're welcome
People like you are why I love the JavaScript community. I still hate the language, but I love this community. Thanks for posting this!
hahahaha this comment represents me a lot!
Even thou you speak fast, somehow I can completely grasp the topic. The name of the channel is right on point. Keep it up : )
I'm really glad you were able to understand the topic.
Fireship and wds channels are meant to be watched on 0.75x playback speed.
I like how you go straight to the point. Thanks
Man, I cannot tell how good you explain. The best part is that you explain the WHY of the things that happen. Really, amazing work
I dont usually write comments in youtube but.. damn..
By chaining your videos one after another explaining different concepts I now understand all this javascript spaghetti. Also your videos are very high quality and you are a very good explainer.
Dude.. async/await and promises had scared me for years.. uve made me understand them in 17 mins.. much much appreciated...
Done thanks
Promises are just JavaScript way of chaining callbacks (do this, then when its done do this etc). Instead of nested callbacks, which leads to callback hell, promises allow you to do .then(…).then(…) but each lambda in these .then should return a Promise object to be able to call .then on it.
Async await is doing the same thing but in cleaner way. Await is NOT blocking, it lets js execute other code then when the code we are awaiting finishes js can come back and continue (how? With the event loop) The awaits are wrapped in an async function (function with async keyword before it).
You await a promise. Await someFunctionThatReturnsAPromise()Can catch errors with try catch when promise you are waiting on is rejected
web dev Simplified and dev Ed this 2 guys literally taught me everything
for some reason js ignores my await and continues with the code anyway.
const inv = await getPlayerInv(message.author.id);
console.log(inv);
just like you did but a console.log in getPlayerInv(); fires off first
nice great explanations Thank You... continue... Please add one more video i have some doubt what is useLayoutEffect and why we use useLayoutEffect in react-native hooks
I watch your video everytime i'm about to start a section in Codecademy. You give the simple explaination of the concept while the Codecaemy provide the practice. Such a great combo! Thank you!
How long after starting to learn did it take you to get your first job?
@@brandonbh04 1 year
Async/await being better than promises doesn't mean anything! In fact, async/await is a syntax sugar that makes use of Promise underneath.
If I have a for loop which iterates more than 500 time inside which I am doing this kind of operation, in case of any performance issue will it cause the browser window to hang ?
I am learning JS and React and always works for me seeing your videos after some classes. Thank you.
But, if I may say, would be even better if make the code you wrote available throughout some link. That way would be even easier to make some tests based on you examples.
Thank you, again.
Thank you, by far the best and easiest to understand explanation i've found. I also watched your video on promises, very well explained!
1 followup question : Why are we consistently using const keyword everytime we are storing an object ? You could also use var or even let keywords. Is there any significance of using const keyword over other similar keywords?
Please study " scopes in JavaScript"
I was avoiding async/await for so long because I thought it was complicated and I was doing fine without it. Finally looked into it and wow it's simple and clean. Thanks for the great tutorial!
Does the variable need to be const? So many const in the codes.
this was very helpful, as well as your promises video. Much appreciated, thanks!
Kyle is my greatest master
You could be doing far better if you did not speak so fast.
why is it so easy to understand, what is happening ????
You take a concept, boil it down into its essence and explain it using the most basic and easy to understand example. Incredible videos. By far the best channel on YT for this.
i know right? the other ones end up confusing me with all sorts of seemingly unrelated and complex additions, whereas his vids just say what need to be said and are understandable without and unnecessary and difficult additions
Ok, i am lucky to have you in my life. Thanks for simplifying this!
I'm glad I could help!
Async Await with Promises and setTimeout
const photos = []
async function uploadPhoto() {
const uploadStatus = new Promise((resolve, reject) => {
setTimeout(() => {
photos.push("Profile photo uploaded")
if (!photos.length) resolve("resolved")
else reject("rejected")
}, 2000)
})
let res
try {
res = await uploadStatus
console.log(res)
}
catch (e) {
console.log(e)
}
}
uploadPhoto()
Hello Sadabrata! Looks like you were able to learn from this video. Are you a fresher and open to any opportunities in software development currently?
Nicely explained..but a little mishap..
The code written in the dowork() function is doing some aysncronous work but code execution is still syncronous within that function. Hope it helps.🙂
but wont aysncronous work will start after the call .... so its nothing wrong i guess
@@SaifUlIslam-lw3dm
It surely will...
But the point i m trying to make here is.. suppose u have 3 or more async work going around within that function...and the very first async is taking longer time to resolve e.g sending emails untill then execution context is holding up there...
@@thefireagen Yes you are right .... i also noticed that in my code...
Nice example!
But, what I always wonder with Promise examples, why are the functions that return the Promises returning immediately?
I mean this way you don’t need Promises.
I think for illustration purposes you should use setTimeout() or make an ajax call to jsonplaceholder API to simulate a function that truly does something that is async.
Still I totally love your videos :)
Just trying to help.
Thanks for the suggestion. The main reason I kept the code simple was because I didn't want people to need to know other technologies in order to understand this.
Really enjoyed the video. I already knew how to use async await in javascript, but your video explains it really well and it's much more simpler. Keep it up man ;)
Thanks! I'm really glad you enjoyed the video. There are plenty more like this coming.
i really need to learn more
Simplified solution. Thanks
32 people still loving PHP .. jaja
Thanks so much for your videos, I really love them, you are one of my best favorite channels on youtube. I usually never comment, but this time I had to do it. greetings from Costa Rica
From callbacks to promises and then to async and await. Beginners like me often confused with this three. Thanks for making this three more clear. 👏
recently I use Axios and encountered tons of async programming itching, thank you for explaining!
A-ha. Let's wrap every method with try-catch! Perhaps, better to put it built-in inside V8?
What if you want to return a rejected promise?
Seriously, don't forget - a correct error handling is 80-90% of your code!!!