async / await in JavaScript - What, Why and How - Fun Fun Function
HTML-код
- Опубликовано: 19 июн 2024
- 💖 Support the show by becoming a Patreon
/ funfunfunction
async and await in JavaScript allows us to pause the execution of functions, and that allows us to write asynchronous code that reads like synchronous code.
🔗 Code snippets from the episode
gist.github.com/mpj/3f8bc0c6e...
🔗 Promises video
• Promises - Part 8 of F...
🔗 Map video
• Map - Part 2 of Functi...
🔗 Inline evaluation plugin
quokka.funfunfunction.com
🔗 mpj on Twitter
/ mpjme
🔗 Help translate the show to your language
ruclips.net/user/timedtext_cs_p...
Inside a function marked as async in JavaScript, you are allowed to place the await keyword in front of an expression that returns a Promise. When you do, the execution of the async function is paused until that Promise is resolved.
The idea with async / await in JavaScript is to be able to write asynchronous code that flows like synchronous code.
💛 Follow on Twitch
We record the show live Mondays 7 AM PT
/ funfunfunction
💛 Fun Fun Forum
Private discussion forum with other viewers in between shows. www.funfunforum.com. Available to patron members, become one at / funfunfunction
💛 mpj on Twitter
/ mpjme
💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:
circleci.funfunfunction.com
💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:
quokka.funfunfunction.com
💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly RUclips shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.
🤦♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.
Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.
📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.
⏯ On Fridays, an edited version of the show is adapted for and published on RUclips.
Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Software Development, Project Management 
Наука
Jo Mat, where's the link to become a patreon?
+Alejandro Corredor the patreon launches on Friday morning, 0800 GMT!
Fun Fun Function awesome, looking forward to it man.
Can't wait for my BADJE
This episode had everything I love about FunFunFunction - COFFEE, antics, and the usage of refactoring the same function multiple ways to illustrate concepts. I'm excited that you're going to be investing more time in your channel!
Hey J! Thanks a lot for the praise! I really appreciate comments like this that are specific about what you like, it's both so nice and helpful!
"It will absolutely positively not be worth your money." I'm sold. I need that badge.
Yes! I was betting that other peoples brain works like mine when writing that part of the script.
This was probably my favorite episode of FunFunFunction to date! The content was presented very well, the pace was on point, and the antics were excellent comedic relief. I've watched many of your videos, but this one stood out to me as being especially well-made. To me, it had just the right amount of explanation paired with just the right amount of "stream of consciousness" programming.
Thank you for your great work and I can't wait to watch more!
4:32 after 2 days trying to understand, 10 seconds of explanation finally openned my mind... thanks bro
You are so funny :D.. I have never seen any developer of this humour ! Thanks for teaching us WITH such as great sense of humour :)
I'm continually impressed that you can make me laugh while educating me on programming! Your presentation and editing communicate why programming is NOT boring, which is a difficult thing to communicate to non-programmers. Well done!
What takes longer - editing the video, or cleaning up the coffee?
haha, the cleanup doesn't take too much time actually, perhaps 20 minutes. Editing this one took over 8 hours. :)
That sh1t scared me.
I wonder how much papers you go through for those pop ups lol ; awesome & funny , thanks
Fun Fun Function if editing a video like this one takes you 8 hours, you do something wrong, bro.
Thank you, I just watched all 10 of your functional programming videos, they were very good. You make it a lot more interesting/bearable than other teachers I've listened to.
Without a doubt one of the best, nay, THE best introduction to a tutorial I have ever had the pleasure of viewing.
Love it! Please more videos like this. I was starting to miss them
Was waiting for a youtube channel like this, almost did it myself but no way was going to do it like this, been watching a while, you are doing it so right! Awesome stuff...
Hi MPJ, awesome stuff! I had a similar feeling about async/await up to the moment when I had to use recursion, this is where it really shines.
Very well done! Thank you for clearing this up and showing me how to mix vanilla Promises + async await!
I missed this format of your video. Thank you for you work. I remember last summer when I was learning ES6 from your videos and then I got the job. Thank you. You probably made a big influence on my life and this is awesome.
Production quality keeps improving keep apon week. Nice job!
Thank you so much for noticing!
Loved the reference to FF6's victory music, I gained a programming level watching this video!
Hey MPJ, love your videos. Very absorbing, concise, and entertaining. I've been coding JS professionally since 2012, and watching this series is helping renew my passion for the language. Keep up the great work! FYI I hit the Subscribe button right around when I heard the FFV victory music at 6:53 :-)
Man!!. I'm using async await for about an year but still your video gives me a stronger understanding of async await. Would love to see you again in this channel.
Hi MPJ! I'm FE developer from Kyiv. Your videos are amazing, thanks for all your educational efforts!
Thank you so much for your kind words, Artem! гарного тижня!
Hi, you’re very nice and funny, but I found you extremely clear and easy to follow. Moreover learning smiling is the best way! You’re unique! Very good job!
MPJ!!!! You Rock! Glad you are back! We ALL missed you! I go back and watch your old vids as refreshers on different topics. You make code fun! Keep up the great work and you know... I LOVED the opening! (and I am way high on the OCD spectrum! ) Cant WAIT to see the next installment!
Oh and by the way.. yes I will DEF be keeping a sharp eye out on Friday! Best of luck in making this a full time gig! I totally think this is a worth while cause. Again, Dude, you make code fun!
I stopped at 7:43 as recommended, but the first 7 minutes was great! Thanks! Best explanation of async await I have seen.
Love these videos, MPJ. Your humor and animation make dry subjects fun to learn.
when i see dry, the first thought come into mind was like 'DRY '...
Congrats to your new job :) Very well deserved.
Excellent episode. Your videos are consistently getting better and better!
Also looooove the intro !!!
What I like about FFFn is that MPJ not only talking about stuff, he also explaining it using opposite examples! Hell yeah man!
Thanks! I really like when people call out specifics about what they like, really helps when improving the show.
High-quality content as usual, MPJ. Thank You!
Great job explaining! I'm having a talk in two weeks about refactoring stuff into using async / await, and found the way you presented stuff hugely helpful =)
Good luck on your talk!!
Hey Npj! I think the most important think you glossed over was how async await makes error handling much more sane now. You can wrap your awaits in it's own try catch which is a super win!
I'm glad that the flying visual aids (cards) are back!
Good on you for making this a paid gig! Always been a fan, and I wish you the best success MPJ :)
This is probably the best of all your videos that I have seen so far. Good job
amazing quality, entertaining and an excellent presentation. Well done.
Excellent as usual mpj. Thanks for teaching me Async/Await. I think the Patreon scheme is also a great way to help to sustain these quality shows. So I'm in!
This is one of the best episodes you've made. thanks!
11:47 "result" is not an array of urls. it is a promise that will resolve to an array of urls.
20:13 the "await" before "Promise.all" seems unnecessary since "await Promise.all" resolves to the url array, but the "fetchCatAvatars" async function will wrap the url array with a new promise after return. Instead, without the await, the "fetchCatAvatars" async function will just return a promise that mirrors the promise returned by "Promise.all".
Great explanation! Also like for inline evaluation plugin.
Idk what is the inline evaluation pmuggin. Can u explain me please?
The best video about async in js so far. Thanks man!
love the high quality of your videos and the speed you talk
I was right there with you for a while. "Why not just use promises?" but you have enlightened me. Thanks!
Thank you, this is the best explanation ever on the web for async/await.
Absolutely wonderful video. Great explanation of async and await. The insanity makes it astoundingly fun super entertaining. I love that *_Teaching is the best way to learn_*
The cleanup for that intro would give me nightmares!, brilliant as always :D
Wow MPJ, really proud about you, I'm glad that you are working more on your own things, you truly deserve it. You put out really great content mate, keep it going and congrats on the new projects :)
You're such a good teacher and Entertainer. Thank you.. And yeah... Gosh... promises took hell out of my life...
Best coding channel on RUclips. Thanks for your excelent work ;)
best part "quokka is the inline evaluation" thx man, i love u
The nesting async await calls was super helpful! Thanks!
Great Job MPJ! Wish my early exposure to programming were made by someone like you ; had a dead boring start many years ago which caused me years of resistance to joine this boat .. though am enjoying it now .. Cheers!
Man, these new MPJ intro's are on point!
This if f*ng amazing. I love this video. It's explanatory, engaging, full of energy and enthusiasm, presenting the topic in a clear way - well done. I wish for more videos like this in the future : )
Bold move, dude. Wish you all the luck, and keep awesome content flowing!
I will!
Best coffee scene yet!
Another excellent video MPJ, I've been meaning to watch this for a while... Glad I did. I had the same feeling as you about async/await initially (ie. something like "what's the use?") but actually, this can be interesting indeed eventually! Thanks a lot.
Thank you, kind sir, you make me more understand about this stuff. I hope you have a good day :)
That was a great explanations about async await functions. Thanks
Hello, thanks so much for the video. I wanted to ask about the extension that you're using to preview the log directly in VS Code?
Great video. Thanks for teaching me something new!
you are great, amazing teacher and a funny dude! Thanks for all your videos, I've learned so much from it.
haha, I couldn't imagine learning programming can be fun like this. Thanks!
I'd never heard of Quokka before. It looked awesome in your video, so I looked it up. I'm going to install and use it. I'm stoked! Thanks for teaching me something new... yet again. :)
Intro is great! lol
As usual, your videos help me a lot learning javascript. (Yeah, that means I might be willing to become a patron. =P)
To me, seems like async wait is more like an easy way to write nested promises, which appears to be pretty commom and hard to read (at least in my study projects).
What a really good video, thank you so much!
Also worth pointing out the use of try/catch so errors can be handled if the await fails. You can still use then/catch so best to choose, which you prefer.
public async getSomething() {
try {
const data = await this.restCall();
console.log('success', data);
} catch (error) {
console.log('whoops', error);
}
}
Learning code from an Erik Karlsson lookalike really brings together both of my hobbies. Thanks for the great video!
You are one of the greatest teachers ever. Thank you
Mate! This video is gold! Thank you so so much! I finally get it :D
Congrats ! You won a big fan !
Your work is amazing, where have you been all my life ?
Great video! That 'Quokka' tool looks very useful. It allows you to troubleshoot through console.logs in real-time on the fly.
Another funny video fully worth it's viewing time. I like your energetic style. I am greedy to get more informations about your further plans with "fun fun *".
OMG that was the most hilarious introduction on a programming tutorial :))
Quick question, which snippet or library are you gonna use to display live the variable result on the right hand side like shown in the video?
Wow, thanks for such a great video and for showing Quokka in action ;)
Great video! I'm glad you pointed out the logical non-equivalence; else I was gearing up to leave an angry comment.
Pro tip: to comment a section of code, select them (doesn't have to be perfect end-to-end selection, just the selected text has to span over those lines) with mouse, and hit Cmd + /. This is pretty standard across VSCode, Atom, Sublime etc.
In fact, it works both ways - it also uncomments a selected portion, if it was previously commented like this.
That's a great tip for coding on your own. I do, however, intentionally avoid editor trickery in the videos - partly because I don't want things to go too fast, and partly because it distracts from the main topic in the sense that people wonder how I did things, and I have to do a segueway to explain the hotkey every time I use it.
Ah, my mistake. Hadn't thought of that :)
Papers are back, wild electro swing musics appears. You are doing great MPJ
Nice way to introduce to async/await... Thanks for share the knowledge
Very clear, thank you for the video !
subscribed... *as i was watching 'man this guy is amazing'.... the video was super fun and educational, ill be coming back for more :)
you are not doing it like everyones else dude. and it AWESOMEEEEE....!!!
your teaching style is so good. A+++++
Thanks for sharing this, Really nice explanation
Perfect explanation!! Thank you!
Just became a patron. Keeping up with the good work! :) ... And can't wait to see my special badge.
dude when u doing coffee , i immediately click the liked button - thx for the humour, u made my day ! haha
Very great and intereating video, especially the part when you said "Why are you watching this video, go out and look at nature" 😂, this is why the channel name is Fun Fun Function
Looking forward to know more about your FunFunForum ;) Keep doing the great work!
I'm really looking forward to it too! It's going te be great. And thanks, I will!
Lol, Petyr Baelish has switched into programming! though, he's AWESOME at it!
thanks buddy! your explanation is one of the best i've ever seen! crystal clear!
Hey MPJ,
Why do we need to call await a second time after we await the response? The function already has paused and waited for the result of fetch. Why is there the need for a second await to get the data object?
Chris
+Chrisly3ear you get the response object when you get the headers. Ie you're not guaranteed to have the body at that time. That is why response.json() returns a promise that resolves to the body instead of the actual body.
Makes sense. Thanks!
Really nice your facial expression with clear explanation....Thanks for your course
Awesome explanation.. Thanks for sharing this.
Thanks for this great episode on async await. One thing I would like to know is best practices of error handling with async await. My intuition is that it is easier to catch at the end of a promise than using try/catch blocks. But I'm interested by feedbacks on this subject.
Yep, many people want to know about error handling, might be a great follow up.
One of the best videos on this topic
Thank you for all you do. 💜💜💜
Hi mmpj. Another great video. I was confused with async/await vs promises and now it's clear. Thanks and cannot wait for friday morning to get the special badge :-)
Hi Johnny! So glad that I've managed to explain it well enough, and thank you so much for your support, it really means a ton, especially at this early stage.
YES! MORE FFF! Always love the coffee breaks :)
Very good video, man! Really helped me out!!!!
Very nice video! I started using Quokka but it's not showing the inline outputs. Is there any additional config?
Thanks!
That is so brave. I ll keep watching you! :)
Hi, Thanks for your videos !
Just one thing, I think you should consider handling rejection, the code with `await / async` will be a little bit less elegant with a `try{} catch{}`
Good continuation
Wonderful explanation, Thanks