Asynchronous JavaScript in ~10 Minutes - Callbacks, Promises, and Async/Await

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 พ.ย. 2024

ความคิดเห็น • 401

  • @cameronthompson1275
    @cameronthompson1275 4 ปีที่แล้ว +186

    Promises are still a struggle for me. This has helped a ton. Thanks, James!

    • @JamesQQuick
      @JamesQQuick  4 ปีที่แล้ว +7

      So glad to hear that. Yes they are very tricky

    • @_rachid
      @_rachid 3 ปีที่แล้ว +7

      Just keep repeating using them, after a while you'll find them so easy to grasp.

    • @sazaraki
      @sazaraki 3 ปีที่แล้ว +5

      @@operationskunkworks5914 That's a very interesting point: the difference between creating and consuming a promise. Of all the tutorials I've seen on the subject, nobody has talked about that.

    • @ZhouJi
      @ZhouJi 3 ปีที่แล้ว +6

      @@sazaraki not just interesting, but very fundamental. many tutorials talk about the the syntax difference between callback, promise, and async/await, but neglect the more important question about which part of your code is intended to be async (going to background in parallel) and which part is intended to block

    • @marcom6370
      @marcom6370 3 ปีที่แล้ว

      @@sazaraki I found this video about the difference between consuming and writing a promise th-cam.com/video/RvYYCGs45L4/w-d-xo.html

  • @everay1846
    @everay1846 3 ปีที่แล้ว +36

    I'm so glad to hear that asynch js is not only for me difficult to learn, because it's just not sinking in, yet. I'm grateful to learn from your videos, you can explain complex things simple.

    • @ramyattalla7168
      @ramyattalla7168 2 ปีที่แล้ว +16

      its not SYNCING in yet* lmao i'll see myself out- I promise...

    • @tigana
      @tigana 2 ปีที่แล้ว

      @@ramyattalla7168 Lol

    • @kinstar
      @kinstar ปีที่แล้ว +1

      you really have to get lost in it a few times before something asynchronously clicks in your head

  • @TheYusuf10
    @TheYusuf10 3 ปีที่แล้ว +91

    I am not a native English speaker but ur accent is most suitable for me! Thank you for ur content

    • @JamesQQuick
      @JamesQQuick  3 ปีที่แล้ว +5

      Glad to hear that!

    • @joshhoffer
      @joshhoffer 2 ปีที่แล้ว +1

      Hes got that standard American dialect. Not too Boston not too Texas

    • @rajanchawla1285
      @rajanchawla1285 2 ปีที่แล้ว

      @@JamesQQuick y

    • @rajanchawla1285
      @rajanchawla1285 2 ปีที่แล้ว

      55ttttttmtattu tattu tattu mm mm mmm mm mmm mm mmm mm mmm mm mmm mm@@JamesQQuickm mmmmmmm mm ttttttt mmmtmmit?mtmtttm

    • @rajanchawla1285
      @rajanchawla1285 2 ปีที่แล้ว +2

      @@JamesQQuick mntmmmmmmmm

  • @jonibs90
    @jonibs90 3 ปีที่แล้ว +28

    My teacher taught us Asynchronous JavaScript at the end of a class in 15 minutes and I got 0% of it. Thank you for this video

  • @yangwilliam3137
    @yangwilliam3137 ปีที่แล้ว +1

    Spent 3 hours trying to figure these topics out. This explained it perfectly. Thanks James!

  • @soniablanche5672
    @soniablanche5672 3 ปีที่แล้ว +48

    If you're using the fetch api I recommand checking the value of "response.ok" because code 404 (or whatever code error the pokemon api sends back) is not an error for the fetch api because the server successfully sent back a response.

    • @paulokehie4792
      @paulokehie4792 3 ปีที่แล้ว

      hello sonia. do you have the link to the fetch api?

    • @YamilGonzales
      @YamilGonzales 2 ปีที่แล้ว +1

      good suggestion, thank you. I just read about it, it makes sense

    • @EddieOlivas
      @EddieOlivas 2 ปีที่แล้ว +2

      If you have this issue and it's a node or react project, try axios

    • @alang.2054
      @alang.2054 ปีที่แล้ว +1

      @@paulokehie4792 You can just literally google it

  • @nikolaoskonstantinidis3505
    @nikolaoskonstantinidis3505 ปีที่แล้ว +9

    I understood these concepts better in your 10 min video than in many others 20+ min videos. Thank you.

  • @oliviaseymour3237
    @oliviaseymour3237 2 ปีที่แล้ว +15

    Hey! I watched a lot of videos, read a lot of articles, but only YOU explained these topics in a clear way! thank you!

    • @JamesQQuick
      @JamesQQuick  2 ปีที่แล้ว +2

      Yesssss! Glad to hear it :)

  • @luxs3
    @luxs3 ปีที่แล้ว +5

    What I love about your video is that you don't just explain the code based on the syntax, but you give conrete examples in which it can actually be used.
    This also results in a very natural example for chaining promises (getting json from a response), which makes this super easy to grasp.
    Thank you very much for making this!
    Maybe you could take a look at using async await for concurrent callbacks as well?

    • @Flayer.14
      @Flayer.14 ปีที่แล้ว

      I agree, the chaining promises example was top notch, loved it

  • @nikivyu
    @nikivyu หลายเดือนก่อน

    For the first time, I came across a helpful and well-organized tutorial on Asynchronous. Thank you, James!

  • @ChikereEzeh
    @ChikereEzeh 2 ปีที่แล้ว +1

    Best tutorial on async I have come across. I am 'new' to JS and will jump straight into async/await.

  • @jazy3091
    @jazy3091 3 ปีที่แล้ว +17

    Thaaaaaaaaank you! This is such a beautifully simple explanation of the whole thing, starting from callbacks to async! Please keep on doing great job.

  • @FromRootsToRadicals_INTP
    @FromRootsToRadicals_INTP ปีที่แล้ว

    Senior dev here and browsing around. Good clean clear vids.

  • @antonk2157
    @antonk2157 2 ปีที่แล้ว +2

    This seems like a good syntax and concept introduction, what it lacks is actual explanation on how exactly these calls are executed, in what queue, order over time etc.

  • @DesignfulDev
    @DesignfulDev 4 ปีที่แล้ว +3

    Asynchronous Javascript was definetly the most challenging topic for me to wrap my head around. Wish I had that explanation when I was learning!

    • @JamesQQuick
      @JamesQQuick  4 ปีที่แล้ว +2

      Maybe we can make it easier for the future generations lol

    • @chris94kennedy
      @chris94kennedy 3 ปีที่แล้ว

      @@JamesQQuick For me it's OOP. I use instructive or functional programming and shy away from class based oop. Async JS is ok if you watch a few good explanations of the event loop

  • @nemanjastankovic941
    @nemanjastankovic941 3 ปีที่แล้ว +7

    This is one of the best programming tutorials I've seen for quite some time. Awesome 🤓

    • @bazileus123
      @bazileus123 2 ปีที่แล้ว +1

      Srbija do tokija

  • @moeinsamani1467
    @moeinsamani1467 ปีที่แล้ว

    The best video I have ever seen. You know what , I have found students need to know all the basics and fundamentals in programming, then they will be prepared for digesting more complex concept. the problem is the jump right into hell and it caused them to get burn out and give up. anyway, your video was fabulous.

  • @debhasish
    @debhasish ปีที่แล้ว

    Thank you for the video, This is much much better than the 2h video on youtube about Callbacks, Promises, and Async/Await.

  • @Balaji_Devadoss
    @Balaji_Devadoss 3 ปีที่แล้ว +6

    thats how you explain programming.. with examples ... great :)

  • @goodwish1543
    @goodwish1543 3 ปีที่แล้ว +2

    Best one on Async/Await I've seen so far. Excellent!

  • @amventures1
    @amventures1 3 ปีที่แล้ว

    I watched 5+ videos on the same topic, didn't understand the idea till I watched yours.
    Thank you!!!

  • @To-mos
    @To-mos 2 ปีที่แล้ว

    Man the web has changed so much since I started in '02. It's all so so much better now!

  • @sokoyaadedolapo5321
    @sokoyaadedolapo5321 4 ปีที่แล้ว +3

    I also like using async and await, when I first started it was promises then I started working with this developer who told me to always use async and await since then have been hooked if am writing any JS async and await will surely appear

  • @phoenix888media9
    @phoenix888media9 ปีที่แล้ว

    You are the best teacher so far me! very easy to understand and very good examples and explanation.

  • @Riyaz__
    @Riyaz__ ปีที่แล้ว

    This is the best explanation about the topic. Every other video only post setTimeout example. So i always wondered "what about other scenarios?". Now i understand this concept. Thank you very much.

    • @JamesQQuick
      @JamesQQuick  ปีที่แล้ว +1

      That's amazing to hear!!

  • @mattmjlg5053
    @mattmjlg5053 2 ปีที่แล้ว

    I have to subscribe your content is invaluable. This is like the 5th video I’ve watched from you this week

  • @ammarhassan_
    @ammarhassan_ 3 ปีที่แล้ว

    Recently came across your channel via Twitter, Love ur videos.,It took me 2 yrs to understand callbacks (give and back) but it was worth it, I can now know it is working and how to create HOF.

  • @enterflux
    @enterflux 2 ปีที่แล้ว

    This was super helpful. All these asynchronous functions are so confusing and this was a great quick guide.

  • @Hyuts
    @Hyuts 2 ปีที่แล้ว

    Second most confusing to Neural Nets to me. Thank you so much for the succinct explanation!

  • @im2godly750
    @im2godly750 2 ปีที่แล้ว +2

    Hi,
    I am new to JS but out of all the syntaxes I have learned from traditional to es6 and above, await async seems like easiest one to manage. In terms of updating the code and maintenance, async await is the way to go. It is more concise which makes it less prone to human error … You are a great teacher, the only thing I wasn’t familiar with in your video was the fs read only stuff… I get the gist of it, but I would like to learn more details. If you already made a vid on it I will find it your library. I am one of your newest subscribers. Thanks for the content❤

  • @Remiisola
    @Remiisola ปีที่แล้ว

    Gold mine for me.
    Thanks for making it easy to understand, thanks to all other videos that prepared my understanding to some level too .

  • @alibaba888
    @alibaba888 3 ปีที่แล้ว

    I watched a couple of videos but only this one worked for me. Thank you for the amazing explanation.

  • @arnerademacker
    @arnerademacker 3 ปีที่แล้ว +3

    Important distinction if you're starting out with Promises:
    promise.then() always returns the original promise for convenience, meaning you can chain .then().then() together as many times as you want.
    If the callback you pass to .then() returns nothing, the original promise will be resolved with 'undefined'.
    If the callback you pass to .then() returns a non-promise value, the original promise will be resolved with that new value.
    If the callback you pass to .then() returns a promise, then that promise will be returned by .then() instead of the original promise, meaning any further .then() or .catch() chains are being attached to that new promise from now on.
    Edit: For completeness sake, if .then() returns a promise technically that promise's state is used to inform the original's state instead of being returned, but for the sake of simplicity I usually like to think of it as a replacement. There is very few situations in which it matters that it's technically still the original promise object.

    • @jaromanda
      @jaromanda 2 ปีที่แล้ว

      "always returns the original promise" - no, .then returns a new promise that resolves to the value "return"ed by the function passed to .then

    • @arnerademacker
      @arnerademacker 2 ปีที่แล้ว

      @@jaromanda I am a fool and you are right.

    • @jaromanda
      @jaromanda 2 ปีที่แล้ว

      @@arnerademacker not a fool, you've learned something 😆

  • @anandakumarthangaraju3438
    @anandakumarthangaraju3438 3 ปีที่แล้ว +4

    One of the best clear cut explanation.👍❤️

  • @NivBarchechet
    @NivBarchechet ปีที่แล้ว

    the best explanation i found. thanks alot, had been struggling with this for a while..

  • @fad9981
    @fad9981 ปีที่แล้ว

    Best video on JavaScript I’ve ever watched ❤

  • @DmitriGoncharov
    @DmitriGoncharov 3 ปีที่แล้ว

    You, sir, are a gentleman and a scholar! Thanks for posting!

  • @Noone-bb5qh
    @Noone-bb5qh 8 หลายเดือนก่อน

    Thank you my man. This is going to help me a lot for my interview prep.

  • @theresasecore9372
    @theresasecore9372 3 ปีที่แล้ว

    Thank you so much for this explanation - I had a lightbulb moment while watching this video and I finally get it - Thank you!

  • @innocentniyonzima8278
    @innocentniyonzima8278 2 ปีที่แล้ว +1

    in just few minutes I got inspired! , the way you confidently explain things is super. like you🤩my sub is added already. keep helping us sir

  • @shonendumm
    @shonendumm 2 ปีที่แล้ว

    This was a very clear explanation, I finally understand it now after 5 years. Thank you!
    I wish to learn require and import next. :)

  • @pranavmahajan4190
    @pranavmahajan4190 2 ปีที่แล้ว +1

    This helped my all doubts. thanks a ton.

  • @shahzadahmad-vg2ou
    @shahzadahmad-vg2ou 11 หลายเดือนก่อน

    I have been struggling with this concept while learning, This has helped, Thanks James😊

    • @JamesQQuick
      @JamesQQuick  11 หลายเดือนก่อน

      YAS! Love to hear it!

  • @artabramov2254
    @artabramov2254 3 ปีที่แล้ว

    the best explanation of asynchronous abstractions ever. Thank you!

  • @abo1428
    @abo1428 2 ปีที่แล้ว +1

    When it comes to performance and optimization, try-catch blocks require more resources than simple "if x==null" blocks.
    It also makes the code more readable if you check for null first, and in this case you exit directly from the method.

  • @joebazooks
    @joebazooks 3 ปีที่แล้ว +1

    `async` `await` is by far the most intuitive. i have struggled with async JS in the past. prolly the hardest part of JS for me too. i wish you wouldve went more in depth on async/await

  • @Diegps
    @Diegps 3 ปีที่แล้ว

    This video finally helped me to understand how async works. Thank you so much!

  • @RobbyNeale
    @RobbyNeale 3 ปีที่แล้ว

    Fantastic video. Well prepared. Succinct. Everything I could have asked for.

  • @rembautimes8808
    @rembautimes8808 3 ปีที่แล้ว

    Great video series, as a Pythonist, I'm watching this while painfully debugging a block of Typescript code.

  • @andredejesus7427
    @andredejesus7427 2 ปีที่แล้ว

    Watched this as a refresher and it went better than I expected! Thank you for this

  • @aaqib_aj
    @aaqib_aj 2 ปีที่แล้ว

    Arguably the toughest concept of JS, explained so well!

    • @JamesQQuick
      @JamesQQuick  2 ปีที่แล้ว +1

      So glad to hear that!!

  • @jonathanhammond5563
    @jonathanhammond5563 3 ปีที่แล้ว

    I just finished a homework that imports inquire object then latches a prompt and a then(). I wanted to learn about async await and am going to use this video to try and rewrite the code (am learning node so may try to write parts of the code into modules as well). Thank you!

  • @hamzahmd_
    @hamzahmd_ 3 ปีที่แล้ว

    What a comprehensive explanation of asyn javascript. Great!

  • @baay81
    @baay81 2 ปีที่แล้ว

    Great summary. Thanks a lot!! The last version is more readable for me too. I will adopt that.

  • @karennason6593
    @karennason6593 2 ปีที่แล้ว

    This was so helpful! Thanks James, you demystified this topic for me.

  • @hakanus1
    @hakanus1 3 ปีที่แล้ว +1

    Hi James, this is one of the best concise video I have ever seen on some of the most difficult concepts in JS. Thank you very much for this.

    • @JamesQQuick
      @JamesQQuick  3 ปีที่แล้ว

      So glad you enjoyed it!

  • @apresthus87
    @apresthus87 3 ปีที่แล้ว +2

    Maybe I'm just weird, but I tend to prefer Promises over async await. I personally find it more readable and intuitive, but both of them are much better than regular callbacks :) Great video!

    • @JamesQQuick
      @JamesQQuick  3 ปีที่แล้ว

      Nothing wrong with having a preference!

  • @SumoCumLoudly
    @SumoCumLoudly 3 ปีที่แล้ว

    Good video, like the pace as someone who doesnt use JavaScript but knows programming. Its basically just like threads.

  • @alimbolar609
    @alimbolar609 2 ปีที่แล้ว

    After many many many manyyyyyy attempts promises finally became clear.. thanks the video!..:-)..

  • @joecolas
    @joecolas 3 ปีที่แล้ว

    thank you James for letting me understand better the JS Callbacks and Promises

  • @rsdbolso8003
    @rsdbolso8003 2 ปีที่แล้ว

    Async / Await all the way!
    Amazing video, very well explained!

  • @yashpawar9585
    @yashpawar9585 3 ปีที่แล้ว

    Hey I’m new to JavaScript and I saw the use of async await and later came to know about the legacy callbacks and promises methods which kinda confused me.
    Your video really helped me understanding the concept well. Thankyou and keep doing the great work!🙌🏻✨

    • @vinayr6232
      @vinayr6232 2 ปีที่แล้ว

      Hey Yash!!
      Glad you found the video interesting.....would you be interested in opportunities in web development?

  • @germain1984
    @germain1984 3 ปีที่แล้ว +4

    Do you find it harder to write tests for async/await as opposed to mocking promises? Have you've encountered any other testing challenges?

  • @nemtomism
    @nemtomism 3 ปีที่แล้ว

    Good job! Thank you from Hungary!

  • @CodyCleggMusic
    @CodyCleggMusic 3 ปีที่แล้ว

    Personal favorite video on the subject. Thank you!

  • @divababy2974
    @divababy2974 2 ปีที่แล้ว

    Thank you so much for this video! Finally somebody put them all together!

  • @elaizaespanola9652
    @elaizaespanola9652 2 ปีที่แล้ว

    You explain this so quickly and so easily. Thank you for your videos. Subscribed already!

  • @Toolie-u9w
    @Toolie-u9w 2 ปีที่แล้ว

    Information is given in super comprehensible way. Really like tutorials like this🖥

  • @joelinman6455
    @joelinman6455 ปีที่แล้ว

    Thank you for this. Helped me to properly understand promises and asynchronous functions …I’ve been able to refactor a bunch methods in my project today too 😂

  • @davidolaboye5549
    @davidolaboye5549 2 ปีที่แล้ว +1

    1M likes for this video. I love the way you implement the code using different approaches. Thanks @James.

  • @fredguth1315
    @fredguth1315 2 ปีที่แล้ว

    I like to watch your videos even when I already know the subject. I differ on you on the fact that I use callbacks a lot and I am always worried that by using await I am making my code slower, but the truth is that code readability is for most of the time much more important than a few imperceptible milliseconds here and there.

  • @TheCodingOdyssey
    @TheCodingOdyssey 4 ปีที่แล้ว

    Asynchronous behaviour was the hardest to understand for me as well. This is a very good explanation.

  • @indraxios
    @indraxios ปีที่แล้ว

    examples were practical, easy to understand tutorial

  • @alexkaufmann2923
    @alexkaufmann2923 ปีที่แล้ว

    This video was phenomenal

  • @ЄвгенійБабенко
    @ЄвгенійБабенко 3 ปีที่แล้ว

    Hi! James, thank you for these video. I appreciate you describe with good examples there.

  • @tortingseloc1810
    @tortingseloc1810 3 ปีที่แล้ว +1

    It was difficult to understand but with this video I get it! thanks

  • @headlights-go-up
    @headlights-go-up 3 ปีที่แล้ว

    You explained this so well, even has a noob I was able to follow along and understand.
    If you could just take all of your knowledge and put it inside of my brain via osmosis, that would be great.

  • @heyyyyyworld
    @heyyyyyworld 3 ปีที่แล้ว +1

    Great explanation! Thank you!

  • @JohnDoe-kw3qu
    @JohnDoe-kw3qu 3 ปีที่แล้ว

    very straight forward, thank you!

  • @VishalJangid1
    @VishalJangid1 2 ปีที่แล้ว

    Loved the video! As a java developer, even I prefer async await way!

  • @anishjoshi1999
    @anishjoshi1999 2 ปีที่แล้ว

    Thank you so much. You have no idea what this means to me.

  • @pouyajavadi1751
    @pouyajavadi1751 3 ปีที่แล้ว

    Well described..i will have this as a reference to implement and practice on my projects. Thank you

  • @Pareshbpatel
    @Pareshbpatel 3 ปีที่แล้ว

    Excellent Tutorial on Asynchronous Programming in JavaScript. Thanks, James
    {2021-07-26}, {2023-01-25}, {2023-06-13}

  • @abderahmaneaoufi
    @abderahmaneaoufi 3 ปีที่แล้ว

    Thanks this is was simple and comprehensive thank you so much i'm going to love async and await just like you ..

  • @Ostriiiich
    @Ostriiiich 3 ปีที่แล้ว

    Thank you!!!! I now understand the concept of what you've discussed.

  • @FacundoTroitero
    @FacundoTroitero 3 ปีที่แล้ว +2

    Thanks, I understand Asynchronous JavaScript better after watching your vid for a 2nd time (you go very fast so I didn't get much on the firs watch)
    11:43 "it should safely handle this response". What is the point of the error handling in all the examples? Aren't the errors always logged in the console anyway?
    12:20 why would you await res.json? what happens if you take the await keyword out in line 78?

  • @adadaprout
    @adadaprout 3 ปีที่แล้ว

    This video is so awesome than I named a variable jamesQQuick that is completely & beautifully useless in my project. And I set it to 1.

  • @AmaroAmaral
    @AmaroAmaral 2 ปีที่แล้ว

    You are the BEST! Thank you!

  • @oleksandrploskovytskyy1520
    @oleksandrploskovytskyy1520 3 ปีที่แล้ว

    Big big thanks to you James! Awesome channel!

  • @nonesomeone5357
    @nonesomeone5357 2 ปีที่แล้ว

    I really like your videos James, so keep doing what you're doing. Thanks for your time and effort.⌨🖥💻

  • @kuldeeps1ngh
    @kuldeeps1ngh 3 ปีที่แล้ว

    Excellent explaination of async await. Thanks

  • @iiWolff
    @iiWolff 2 ปีที่แล้ว

    What a vídeo! Well done mate.

  • @NicoHeinrich
    @NicoHeinrich 3 ปีที่แล้ว +2

    Thank you, this video really helped! You did a great job at explaining everything 👍

  • @jsonchicas
    @jsonchicas 3 ปีที่แล้ว +4

    Thanks for the good content :), I just have a question, in your opinion what is the benefit to use Async await instead of promises? is it just readability?
    Thanks again :)

  • @multihrab
    @multihrab 3 ปีที่แล้ว

    Great video, really helped me undertand asynchronous js.

  • @amroabdulvahit9517
    @amroabdulvahit9517 2 ปีที่แล้ว

    Thanks a lot, it helped me understand very well though I still have some struggle with promises

  • @eric55099
    @eric55099 ปีที่แล้ว

    Thanks Man, Great Content i can now wrap my head around async await..What vs theme extension are you using?

  • @michaelreynoso2289
    @michaelreynoso2289 2 ปีที่แล้ว

    Great explanation, thanks man!

  • @casualSimRacer3312
    @casualSimRacer3312 9 หลายเดือนก่อน

    Which IDE are you using? I love the way the cursor blinks.

  • @andrezanlorensi
    @andrezanlorensi 2 หลายเดือนก่อน

    Your video helped me a lot