Тёмный

async / await in JavaScript - What, Why and How - Fun Fun Function 

Fun Fun Function
Подписаться 263 тыс.
Просмотров 253 тыс.
50% 1

Наука

Опубликовано:

 

5 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 761   
@alexongg
@alexongg 7 лет назад
Jo Mat, where's the link to become a patreon?
@funfunfunction
@funfunfunction 7 лет назад
+Alejandro Corredor the patreon launches on Friday morning, 0800 GMT!
@alexongg
@alexongg 7 лет назад
Fun Fun Function awesome, looking forward to it man.
@teo_sk
@teo_sk 7 лет назад
Can't wait for my BADJE
@junkgrave
@junkgrave 7 лет назад
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!
@funfunfunction
@funfunfunction 7 лет назад
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!
@lastnamefirstname2390
@lastnamefirstname2390 7 лет назад
"It will absolutely positively not be worth your money." I'm sold. I need that badge.
@funfunfunction
@funfunfunction 7 лет назад
Yes! I was betting that other peoples brain works like mine when writing that part of the script.
@jnfsmile
@jnfsmile 7 лет назад
What takes longer - editing the video, or cleaning up the coffee?
@funfunfunction
@funfunfunction 7 лет назад
haha, the cleanup doesn't take too much time actually, perhaps 20 minutes. Editing this one took over 8 hours. :)
@MaxDavydov-r2k
@MaxDavydov-r2k 7 лет назад
That sh1t scared me.
@bensisakht7076
@bensisakht7076 7 лет назад
I wonder how much papers you go through for those pop ups lol ; awesome & funny , thanks
@rafadydkiemmacha7543
@rafadydkiemmacha7543 4 года назад
Fun Fun Function if editing a video like this one takes you 8 hours, you do something wrong, bro.
@kirsanov2008
@kirsanov2008 7 лет назад
What I like about FFFn is that MPJ not only talking about stuff, he also explaining it using opposite examples! Hell yeah man!
@funfunfunction
@funfunfunction 7 лет назад
Thanks! I really like when people call out specifics about what they like, really helps when improving the show.
@artemsh6853
@artemsh6853 7 лет назад
Hi MPJ! I'm FE developer from Kyiv. Your videos are amazing, thanks for all your educational efforts!
@funfunfunction
@funfunfunction 7 лет назад
Thank you so much for your kind words, Artem! гарного тижня!
@robertomunoz9745
@robertomunoz9745 5 лет назад
4:32 after 2 days trying to understand, 10 seconds of explanation finally openned my mind... thanks bro
@lgong2667
@lgong2667 6 лет назад
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".
@sachindraragul1094
@sachindraragul1094 2 года назад
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.
@AmanGupta_Dev
@AmanGupta_Dev 7 лет назад
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 :)
@PaoloTamburini
@PaoloTamburini 4 года назад
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!
@JamesDHarrington
@JamesDHarrington 7 лет назад
I was right there with you for a while. "Why not just use promises?" but you have enlightened me. Thanks!
@qwarlockz8017
@qwarlockz8017 7 лет назад
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!
@qwarlockz8017
@qwarlockz8017 7 лет назад
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!
@maronov
@maronov 7 лет назад
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 :-)
@sergiov1828
@sergiov1828 7 лет назад
Loved the reference to FF6's victory music, I gained a programming level watching this video!
@Shambo271
@Shambo271 6 лет назад
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!
@kendowney6009
@kendowney6009 7 лет назад
Love these videos, MPJ. Your humor and animation make dry subjects fun to learn.
@exis8
@exis8 5 лет назад
when i see dry, the first thought come into mind was like 'DRY '...
@badselection94
@badselection94 4 года назад
Without a doubt one of the best, nay, THE best introduction to a tutorial I have ever had the pleasure of viewing.
@johnstarich
@johnstarich 6 лет назад
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!
@ЕвгенийСвиридов-ь1е
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.
@JB-ux3ri
@JB-ux3ri 4 года назад
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.
@richardnorris9030
@richardnorris9030 7 лет назад
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...
@SayuStrife
@SayuStrife 7 лет назад
Production quality keeps improving keep apon week. Nice job!
@funfunfunction
@funfunfunction 7 лет назад
Thank you so much for noticing!
@MartinPultz
@MartinPultz 7 лет назад
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); } }
@selbeezy
@selbeezy 7 лет назад
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 =)
@funfunfunction
@funfunfunction 7 лет назад
Good luck on your talk!!
@AndreBradshaw
@AndreBradshaw 6 лет назад
I stopped at 7:43 as recommended, but the first 7 minutes was great! Thanks! Best explanation of async await I have seen.
@baltaza
@baltaza 3 года назад
You are one of the greatest teachers ever. Thank you
@michaeljenis8707
@michaeljenis8707 5 лет назад
Very well done! Thank you for clearing this up and showing me how to mix vanilla Promises + async await!
@nathand8401
@nathand8401 6 лет назад
Learning code from an Erik Karlsson lookalike really brings together both of my hobbies. Thanks for the great video!
@dasnoo6020
@dasnoo6020 7 лет назад
- Will the badge gain value as time pass ? - Will the badge assess superiority on other human beings and alike ? - Can the badge be used as virtual bottle opener ? - What other functionalities / power does the badge possess ?
@funfunfunction
@funfunfunction 7 лет назад
yes also yes
@elioriba711
@elioriba711 4 года назад
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?
@VladAlive
@VladAlive 7 лет назад
12:46 For-For-Forum!
@ludovicloridan7898
@ludovicloridan7898 7 лет назад
I'm so glad cardboards are back ! They were missed !
@funfunfunction
@funfunfunction 7 лет назад
Thanks! Yeah, I've decided that I really like them, so they are back with a vengeance.
@rindiainvestments9878
@rindiainvestments9878 7 лет назад
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.
@funfunfunction
@funfunfunction 7 лет назад
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.
@rindiainvestments9878
@rindiainvestments9878 7 лет назад
Ah, my mistake. Hadn't thought of that :)
@docmars
@docmars 7 лет назад
Good on you for making this a paid gig! Always been a fan, and I wish you the best success MPJ :)
@sweeball
@sweeball 7 лет назад
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!
@wachidmudiwaluyo182
@wachidmudiwaluyo182 6 лет назад
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
@MarcTaylorWebGeek
@MarcTaylorWebGeek 6 лет назад
im going to have to watch this a few more times for it to sink in.
@gregory.bluvshteyn
@gregory.bluvshteyn 6 лет назад
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.
@ryanmagoon
@ryanmagoon 3 года назад
late AF to this but it messed w/ my head a lot that the result was resolving to an array of cats until I realized that Quokka is doing that automagically and result is still indeed a promise
@bensisakht7076
@bensisakht7076 7 лет назад
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!
@denisangelov4629
@denisangelov4629 6 лет назад
This is probably the best of all your videos that I have seen so far. Good job
@laurenbuxton2145
@laurenbuxton2145 6 лет назад
love the high quality of your videos and the speed you talk
@javajoint
@javajoint 7 лет назад
I'm glad that the flying visual aids (cards) are back!
@EduardoRFS
@EduardoRFS 7 лет назад
best part "quokka is the inline evaluation" thx man, i love u
@libry-toolbox3674
@libry-toolbox3674 4 года назад
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_*
@ToniLiem
@ToniLiem 5 лет назад
you are not doing it like everyones else dude. and it AWESOMEEEEE....!!!
@robertomunoz9745
@robertomunoz9745 5 лет назад
so 20:57 requieres me to make a second comments..... for me... that's the basic example of why we need await.... great man, just great
@joshr9703
@joshr9703 7 лет назад
10/10 on the intro
@BlackSagres
@BlackSagres 7 лет назад
Bold move, dude. Wish you all the luck, and keep awesome content flowing!
@funfunfunction
@funfunfunction 7 лет назад
I will!
@asterixcode
@asterixcode Год назад
you are great, amazing teacher and a funny dude! Thanks for all your videos, I've learned so much from it.
@reristavi
@reristavi 7 лет назад
You're such a good teacher and Entertainer. Thank you.. And yeah... Gosh... promises took hell out of my life...
@josemarin359
@josemarin359 Год назад
If promises seems complicated give it a tray to "plan" in js-awe library. You programatically define in one place the control flow to free from side effects the rest of your code.
@caiolins2495
@caiolins2495 4 года назад
this made me pass a technical interview, mpj god
@funfunfunction
@funfunfunction 4 года назад
Glad to have helped!!
@NdaJret
@NdaJret 7 лет назад
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!
@Mephistel
@Mephistel 4 года назад
Final Fantasy fanfare in my lesson keeps me interested :D
@donfrolic
@donfrolic 7 лет назад
Congrats to your new job :) Very well deserved. Excellent episode. Your videos are consistently getting better and better! Also looooove the intro !!!
@ghusse
@ghusse 7 лет назад
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.
@funfunfunction
@funfunfunction 7 лет назад
Yep, many people want to know about error handling, might be a great follow up.
@bundyfx
@bundyfx 7 лет назад
Man, these new MPJ intro's are on point!
@BabyBalla3score
@BabyBalla3score 5 лет назад
Was a tad stuck until I went to mdn's site and saw that .json() returns a promise. Not sure if you mentioned that in the video but it would have been a lot more helpful to know the return type
@mazyvan
@mazyvan 7 лет назад
Love it! Please more videos like this. I was starting to miss them
@wmhilton-old
@wmhilton-old 7 лет назад
Best coffee scene yet!
@thomasyates1630
@thomasyates1630 4 года назад
your teaching style is so good. A+++++
@ramakrishnanvairavasamy
@ramakrishnanvairavasamy 4 года назад
Really nice your facial expression with clear explanation....Thanks for your course
@liamsutton6202
@liamsutton6202 7 лет назад
The cleanup for that intro would give me nightmares!, brilliant as always :D
@MomoBG2
@MomoBG2 7 лет назад
Dude, that Patron Announcement was the best announcement I've seen on RU-vid :D The density of info/sec is also pretty nice as well :) Hope it keeps fulfilling you for the future :)
@MomoBG2
@MomoBG2 7 лет назад
Not to mention laughing out loud at places and smiling throughout :)
@agustinortiz4743
@agustinortiz4743 6 лет назад
The nesting async await calls was super helpful! Thanks!
@sergiov1828
@sergiov1828 6 лет назад
At 20:15 on line 7, I think it’s pointless to write “return await [anyPromise]”, because you are waiting for the promise to resolve before returning its value, though the async function will return a promise anyway, so it would be the same as writing “return [anyPromise]”.
@Davidlavieri
@Davidlavieri 7 лет назад
Papers are back, wild electro swing musics appears. You are doing great MPJ
@claudesveganchannel910
@claudesveganchannel910 7 лет назад
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 :)
@mosmoszis6836
@mosmoszis6836 7 лет назад
@19:42 for da win.. thank you. Thats the only thing that was tripping me up and not allowing for everything to be clear in my mind.
@juanbarman
@juanbarman 7 лет назад
Final Fantasy song celebrating !! amazing video !! keep on making more !! by the way , which editor do you use ??
@funfunfunction
@funfunfunction 7 лет назад
+John Nash check out the video "what editor do I use" :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dIjKJjzRX_E.html
@funfunfunction
@funfunfunction 7 лет назад
+John Nash do note that in this particular video it's vscode and quokka as only plugin for the video, but the principle is the same.
@LLGPrinting
@LLGPrinting 5 лет назад
@@funfunfunction great!
@chrisivens
@chrisivens 7 лет назад
Excellent post as usual. I think you got the gist of async/await over pretty well. More importantly the though, is that Tales from the Loop on the bookshelf on the left? That's been on my wish list for too long.
@funfunfunction
@funfunfunction 7 лет назад
+Chris Ivens it is! I have not played it yet, but read through it - feels very promising. Then again, I'm a huge Stålenhag fan.
@busyrand
@busyrand 5 лет назад
Great video! That 'Quokka' tool looks very useful. It allows you to troubleshoot through console.logs in real-time on the fly.
@bigbox8992
@bigbox8992 5 лет назад
One sip of that stuff and you achieve speedforce and a cardiac arrest in half a minute.
@nabilmediouni5069
@nabilmediouni5069 4 года назад
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?
@Mrdisaster09
@Mrdisaster09 6 лет назад
subscribed... *as i was watching 'man this guy is amazing'.... the video was super fun and educational, ill be coming back for more :)
@Xinube
@Xinube 7 лет назад
Actually, one of the biggest pros I see with async/await over plain promises is that you can use resolved values naturally, as you can have multiple async functions sharing the same scope. On the other hand, with promises, if you have a promise chain (ordered execution) and you need to somehow reuse some resolved values in different steps of the chain, then it gets a bit ugly. Because every resolved value has it's own function scope, you would have to rely on an upper scope variable or injecting the values in an array or object to carry them down the promise chain.
@georgesaeid7231
@georgesaeid7231 6 лет назад
Thank you, this is the best explanation ever on the web for async/await.
@youtweek
@youtweek 7 лет назад
Best coding channel on RU-vid. Thanks for your excelent work ;)
@alessandro-desimone
@alessandro-desimone 7 лет назад
This is one of the best episodes you've made. thanks!
@uhl7792
@uhl7792 7 лет назад
YAY paper and markers are back!
@theothecookie
@theothecookie 7 лет назад
Hi MPJ. Thanks for your сontagious cheerfulness. But you didn't mentioned about error handling patterns. Try/catch in case of async/await.
@funfunfunction
@funfunfunction 7 лет назад
Thanks! Yeah, there are lots of interesting aspects I could talk about. Error handling is really nice with async / await but in the end I decided to focus on a core concept, the videos becomes both disjointed and very very long otherwise.
@piq-dg3vz
@piq-dg3vz 7 лет назад
You should also discuss the non A+ promise implementation like fluture.
@daggawagga
@daggawagga 7 лет назад
That intro caught me by surprise! I think it was a nice touch
@funfunfunction
@funfunfunction 7 лет назад
glad you like it!
@PhuNguyen-bi7pi
@PhuNguyen-bi7pi 5 лет назад
haha, I couldn't imagine learning programming can be fun like this. Thanks!
@NABZ028
@NABZ028 7 лет назад
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 :-)
@funfunfunction
@funfunfunction 7 лет назад
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.
@subota23
@subota23 7 лет назад
Great explanation! Also like for inline evaluation plugin.
@x-lightsfs5681
@x-lightsfs5681 5 лет назад
Idk what is the inline evaluation pmuggin. Can u explain me please?
@MiguelMartinez-xx2zy
@MiguelMartinez-xx2zy 7 лет назад
What a really good video, thank you so much!
@i_youtube_
@i_youtube_ 6 лет назад
PLEASE share your experience about Spotify job and what JavaScript skills we need to work in a company like Spotify.
@sagarmunjal
@sagarmunjal 6 лет назад
One of the best videos on this topic
@radu1337
@radu1337 6 лет назад
These videos are gold. I just got a new job with better pay, I'll be able to afford supporting a few people in Patreon, I hope you have an account.
@livarion
@livarion 6 лет назад
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 : )
@JDJ1213
@JDJ1213 5 лет назад
amazing quality, entertaining and an excellent presentation. Well done.
@hrvooje
@hrvooje 4 года назад
Learning is the best way to learn :)
@ishandiablo
@ishandiablo 6 лет назад
Hi MPJ, thanks for explaining this convoluted concept in such simple manner. Just a small suggestion regarding your videos, kindly keep them short, for example you could've broken this video into 2 parts -> part 1: Intro to async await; part 2: Real life examples of async await. What happens is most of the time a person searching for a particular concept tries to always find tldr; version of video, or shorter video in general. If I am looking at video of length 24 mins in RU-vid search I would be reluctant to watch it. It's a common human tendency I suppose. You can see many other youtubers like TheNewBoston, LearnCode etc follow this technique. Just a friendly suggestion keep up the good work brother!
@funfunfunction
@funfunfunction 6 лет назад
Yeah, in theory this is good advice but it is REALLY hard to do. I always aim for but it's about 4000% harder than it sounds like to create write scripts with atomic segments for videos - you might notice that they don't really cleanly separate, but are kind of a gray area and it wouldn't be very natural to split it. I've also not found out a way to release them in a way that isn't terribly annoying. If I release them simultaneously, they get random order in the yt interface. If I wait and release them weekly, then they become too short for a weekly episode (we did this for the devtips series and people got really annoyed by vids being just talking, and some video just being just installing things). If I release daily for some days the schedule becomes unpredictable. Making bite-sized content that is also not bullshit demo content is really hard. Also, TBH, this video has 52k views as of writing and has done better than most of my videos so perhaps we're both overthinking it. A complicated programming concept explained in 24 minutes might not be all that bad.
@ishandiablo
@ishandiablo 6 лет назад
Fun Fun Function considering your unique approach for meticulously explaining every nitty gritty bits whilst making the content enjoyable, I also think this approach suits you more. Thanks for taking your precious time to reply back. Last request if possible can you do a video on react fiber if possible :)
@ablanchi
@ablanchi 7 лет назад
That intro, you didnt use any eggs!?!?!
@Rashomon69
@Rashomon69 6 лет назад
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. :)
@ChrislyBear
@ChrislyBear 7 лет назад
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
@funfunfunction
@funfunfunction 7 лет назад
+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.
@ChrislyBear
@ChrislyBear 7 лет назад
Makes sense. Thanks!
@victorb9503
@victorb9503 7 лет назад
well, this was interesting and it was certainly explained very well. what I think was sort of missing though and it's not a really big thing would be the negative case (when the async function failed, => .catch). I just thought I said this because on a lot of the other async things examples that I got to see over the years only the positive case was treated, and that thing would sometimes be copy pasted by js starters into actual code
@funfunfunction
@funfunfunction 7 лет назад
Yeah, error handling would definitely be a good followup.
Далее
Advanced Async and Concurrency Patterns in JavaScript
39:43
ВЫЖИЛ В ДРЕВНЕМ ЕГИПТЕ!
13:09
Просмотров 191 тыс.
Tips For Using Async/Await in JavaScript
16:26
Просмотров 396 тыс.
The Story of Asynchronous JavaScript
10:20
Просмотров 155 тыс.
Async + Await in JavaScript, talk from Wes Bos
15:52
Просмотров 117 тыс.
Declarative programming - Fun Fun Function
14:24
Просмотров 58 тыс.
The Async Await Episode I Promised
12:04
Просмотров 1,1 млн