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

Поділитися
Вставка
  • Опубліковано 31 гру 2024

КОМЕНТАРІ • 403

  • @TheYusuf10
    @TheYusuf10 4 роки тому +92

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

    • @JamesQQuick
      @JamesQQuick  4 роки тому +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

  • @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 ua-cam.com/video/RvYYCGs45L4/v-deo.html

  • @nikolaoskonstantinidis3505
    @nikolaoskonstantinidis3505 2 роки тому +9

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

  • @yangwilliam3137
    @yangwilliam3137 Рік тому +1

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

  • @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 роки тому +17

      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

  • @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

  • @oliviaseymour3237
    @oliviaseymour3237 3 роки тому +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!

  • @nikivyu
    @nikivyu 2 місяці тому

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

  • @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

  • @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.

  • @mattmjlg5053
    @mattmjlg5053 2 роки тому

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

  • @FromRootsToRadicals_INTP
    @FromRootsToRadicals_INTP 2 роки тому

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

  • @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

  • @debhasish
    @debhasish 2 роки тому

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

  • @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.

  • @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.

  • @eldon9012
    @eldon9012 3 роки тому +1

    12:53 what is the shortcut to move the lines into the brackets? that is so cool!!

    • @Musikur
      @Musikur 3 роки тому +1

      Alt+Up/Down arrows. If you press shift+alt+up/down arrow it will duplicate the line, and if you press ctrl+alt+up/down arrow it will extend the cursor onto multiple lines allowing you to write something several times at once

  • @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.

  • @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 .

  • @Balaji_Devadoss
    @Balaji_Devadoss 3 роки тому +6

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

  • @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

  • @Hyuts
    @Hyuts 2 роки тому

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

  • @pranavmahajan4190
    @pranavmahajan4190 2 роки тому +1

    This helped my all doubts. thanks a ton.

  • @phoenix888media9
    @phoenix888media9 Рік тому

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

  • @NivBarchechet
    @NivBarchechet 2 роки тому

    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 ❤

  • @amventures1
    @amventures1 3 роки тому

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

  • @nemanjastankovic941
    @nemanjastankovic941 3 роки тому +7

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

  • @swapnildarge1609
    @swapnildarge1609 16 днів тому

    Thank you. I finally understood it. Subscribed

  • @goodwish1543
    @goodwish1543 3 роки тому +2

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

  • @anandakumarthangaraju3438
    @anandakumarthangaraju3438 3 роки тому +4

    One of the best clear cut explanation.👍❤️

  • @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

  • @alibaba888
    @alibaba888 3 роки тому

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

  • @Noone-bb5qh
    @Noone-bb5qh 9 місяців тому

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

  • @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.

  • @nemtomism
    @nemtomism 3 роки тому

    Good job! Thank you from Hungary!

  • @shahzadahmad-vg2ou
    @shahzadahmad-vg2ou Рік тому

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

  • @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!

  • @alimbolar609
    @alimbolar609 2 роки тому

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

  • @indraxios
    @indraxios Рік тому

    examples were practical, easy to understand tutorial

  • @enterflux
    @enterflux 2 роки тому

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

  • @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!

  • @RobbyNeale
    @RobbyNeale 3 роки тому

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

  • @iiWolff
    @iiWolff 2 роки тому

    What a vídeo! Well done mate.

  • @baay81
    @baay81 2 роки тому

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

  • @artabramov2254
    @artabramov2254 3 роки тому

    the best explanation of asynchronous abstractions ever. Thank you!

  • @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. :)

  • @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❤

  • @michaelreynoso2289
    @michaelreynoso2289 2 роки тому

    Great explanation, thanks man!

  • @VishalJangid1
    @VishalJangid1 2 роки тому

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

  • @heyyyyyworld
    @heyyyyyworld 3 роки тому +1

    Great explanation! Thank you!

  • @amroabdulvahit9517
    @amroabdulvahit9517 2 роки тому

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

  • @JohnDoe-kw3qu
    @JohnDoe-kw3qu 3 роки тому

    very straight forward, thank you!

  • @karennason6593
    @karennason6593 2 роки тому

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

  • @Diegps
    @Diegps 3 роки тому

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

  • @hamzahmd_
    @hamzahmd_ 3 роки тому

    What a comprehensive explanation of asyn javascript. Great!

  • @DmitriGoncharov
    @DmitriGoncharov 3 роки тому

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

  • @aaqib_aj
    @aaqib_aj 2 роки тому

    Arguably the toughest concept of JS, explained so well!

  • @anishjoshi1999
    @anishjoshi1999 2 роки тому

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

  • @alexkaufmann2923
    @alexkaufmann2923 Рік тому

    This video was phenomenal

  • @divababy2974
    @divababy2974 3 роки тому

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

  • @andredejesus7427
    @andredejesus7427 2 роки тому

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

  • @SumoCumLoudly
    @SumoCumLoudly 3 роки тому

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

  • @tortingseloc1810
    @tortingseloc1810 3 роки тому +1

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

  • @srilekayadav8421
    @srilekayadav8421 3 роки тому

    It's is very good and informative session, tq so much james

  • @rsdbolso
    @rsdbolso 2 роки тому

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

  • @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

  • @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.

  • @CodyCleggMusic
    @CodyCleggMusic 3 роки тому

    Personal favorite video on the subject. Thank you!

  • @AmaroAmaral
    @AmaroAmaral 2 роки тому

    You are the BEST! Thank you!

  • @ЄвгенійБабенко
    @ЄвгенійБабенко 3 роки тому

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

  • @ANDREPEIXOTO1
    @ANDREPEIXOTO1 3 роки тому

    Subscribed! Great content 👏👏

  • @rembautimes8808
    @rembautimes8808 3 роки тому

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

  • @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.

  • @davidolaboye5549
    @davidolaboye5549 2 роки тому +1

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

  • @ploskovytskyy
    @ploskovytskyy 3 роки тому

    Big big thanks to you James! Awesome channel!

  • @elaizaespanola9652
    @elaizaespanola9652 2 роки тому

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

  • @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 😂

  • @Ostriiiich
    @Ostriiiich 3 роки тому

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

  • @joecolas
    @joecolas 3 роки тому

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

  • @Toolie-u9w
    @Toolie-u9w 2 роки тому

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

  • @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!

  • @kuldeeps1ngh
    @kuldeeps1ngh 3 роки тому

    Excellent explaination of async await. Thanks

  • @bencooper2753
    @bencooper2753 3 роки тому

    Wow, very well put together. Very helpful.

  • @multihrab
    @multihrab 3 роки тому

    Great video, really helped me undertand asynchronous js.

  • @Allysson635
    @Allysson635 3 роки тому

    Great video as always! I keep wondering what it the Theme that you are using haha

  • @hsiang-yehhwang2625
    @hsiang-yehhwang2625 3 роки тому

    Nice!! Thanks for sharing!!

  • @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

  • @pouyajavadi1751
    @pouyajavadi1751 3 роки тому

    Well described..i will have this as a reference to implement and practice on my projects. 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.

  • @snoopysatangore
    @snoopysatangore 2 роки тому

    Great video, clear to the cut explanation!

  • @dannydai1
    @dannydai1 2 роки тому

    thanks, async is the best one. similar with other languages

  • @casualSimRacer3312
    @casualSimRacer3312 11 місяців тому

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

  • @metropolitanomazzer4482
    @metropolitanomazzer4482 2 роки тому

    Thanks! How do you return a value from async function to use it outside the scope?

  • @dke4772
    @dke4772 3 роки тому

    Very simple explanation very good

  • @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?

  • @andrezanlorensi
    @andrezanlorensi 3 місяці тому

    Your video helped me a lot

  • @jingli9232
    @jingli9232 2 роки тому

    extremely clear, thx so much

  • @backtoGodhead0
    @backtoGodhead0 3 роки тому

    Nice video James, a clarification - await keyword do the functionality of .then we use in resolve and reject way of handling a promise but rather it gives us access to the incoming response.