Callbacks, Promises, Async Await | JavaScript Fetch API Explained

Поділитися
Вставка
  • Опубліковано 17 січ 2025

КОМЕНТАРІ • 275

  • @danielgolden90
    @danielgolden90 2 роки тому +45

    You make some of the most clear, well planned, well organized tutorials on JS on all of UA-cam. Truly one of the most underrated JS tutorial channels.
    I've received so much benefit from your videos over the past few weeks that I can't not say thanks in some way.

  • @pranavkastury9610
    @pranavkastury9610 2 роки тому +28

    This is a criminally underrated tutorial. The way all of this is explained is so good! I've taken so much out of this video and I'll be revisiting individual sections for reference down the line. Thank you so much, Dave!

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

      You're very welcome, Pranav!

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

      Amem to that! I'm able to listen to him and follow without subtitles! Great teaching capacity. Totally underrated!!!!❤

  • @coderjag8828
    @coderjag8828 3 роки тому +9

    I've watched about 4-5 different videos on promises and sync/await, but this one really tied it all together for me and helped me understand these concepts. I like how you go in depth about the little things (etc. explaining how the parameters put into functions don't have to have the same name as the actual parameter that you're going to insert when calling the function). That makes your videos easy to follow by even absolute beginners. Don't change your teaching style! Keep it up!

  • @johnmcaulay4348
    @johnmcaulay4348 3 роки тому +20

    another top class video mate, well done. I like two things about your videos:
    1) The way your videos are so clearly explained.
    2) The fact you go a little deeper into most topics than the other UA-camrs out there.

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

      Thank you John. I sincerely appreciate the detailed feedback you just provided. I will make efforts to continue to do both of these! 🙏🚀

  • @weizhang2389
    @weizhang2389 4 роки тому +28

    Most underrated channel

  • @chryst9876
    @chryst9876 Місяць тому

    There's a lot of people teaching on UA-cam but not everyone knows how to teach. You are one of the people who know how to teach. Thank you for this tutorial

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

    I've seen a lot of tutorials about promises and async/await. But this one is probably the best one i've ever seen so far, because you used examples with actual data instead of using setTimeout, since this is what we future programmers will see in the wild. Thank you for the video, Dave! Greetings from Brazil.

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

    This is the perfect amount of "in-depth", covers almost all aspects/use cases, without branching too far out of scope

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

    I have watched so many videos and never understood these topics the way you explain it. Now I completely understand how all these works. It is still so much worth Tutorials. ThankYou so much, Dave.

  • @necipyayla639
    @necipyayla639 9 місяців тому +1

    This tutorial series has been changed my software life, ı have couldn't understand from other javascript teacher's, until I find you, Thank you so much Dave :)

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

    Brilliant Dave - a lot of of tutorials only explain what works, but never what doesn't work and why. You offered such a comprehensive understanding of the principles of promises and async/await, and when and where to use them.
    Thank you immensely!

  • @Anbaraen
    @Anbaraen 3 роки тому +3

    Late to the party but I've watched a lot of people explain promises and async/await and this is the first one that took the time to explain some of the common pitfalls when working asynchronously. You've got my follow!

  • @CynthiaSotoCaballerolYEAHl
    @CynthiaSotoCaballerolYEAHl 4 роки тому +11

    Best explanation on this topic on UA-cam. Thanks Dave

  • @iDreamOfOkra
    @iDreamOfOkra 2 роки тому +8

    I've decided to only learn languages that Dave has tutorials for! Thanks for yet another amazing and clear tutorial!

  • @jomamma269
    @jomamma269 2 роки тому +4

    Just wanted to say thank you for posting this tutorial. I'd been stuck on understanding promises and the whole sync/asynchronous concept for around 4 months. This had been a major roadblock for me in learning node for backend, so this has really helped a lot. I'm still not 100% clear, but this vid has really helped me progress my understanding. Thanks again.

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

      Glad it helped! 💯🚀

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

      @@DaveGrayTeachesCode how do you use the console within VS Code? is it a plugin?

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

    Finally understand async/await. Every tutorial on YT just shows how to console log everything. This was very helpful to see how to actually DO SOMETHING with the stuff we get back.

  • @a_maxed_out_handle_of_30_chars

    wow, simply mind blowing
    dave, you're amazing
    the video is 2 years old so only the aesthetics(colorscheme, font, etc) differ compared to today but the quality content is still the same
    also, another thing popped while watching the video was you explained the then and catch methods for resolve and reject but in async await you can catch resolve and reject using try catch block
    I had no idea about the Accept header type and never seen text/plain type either, thank you once again dave :)

  • @GG-hl4zp
    @GG-hl4zp 2 роки тому

    I've been a full stack dev for over 3 years and your course helped me a lot. Thank you Dave.

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

    2 years down the line and your tutorials are saving the day... I really your videos man...

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

    awesome video. the section on promises... thank you! i finally get it! ive watched several videos on the topic, but still just didn't quite have the right mental model! but the way you constructed the promise with resolve and reject, THAT made it click for me!!!! thanks again!!! very well done!

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

    Bar none the creme de la creme Asynchronous Javascript video I've ever seen on youtube. U definitely deserve more subs. Thanks heaps!

  • @jipeejoce1353
    @jipeejoce1353 4 роки тому +14

    Great tutorial Dave ! Hope you can teach us some JS frameworks or some back-end with node in the near future. Anyway, thanks to deliver your knowlegde to the world and stay safe.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  4 роки тому +6

      Thanks! More stuff in the works. I appreciate your suggestions!

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

    This video is an absolute treasure! Great explanation and examples! I am now comfortable with apis. Thank you so much Dave

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

    Thanks for the very thorough explanation. You've earned a subscriber.

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

    A lot of information today. It branches out into many other subjects:
    - APIs, the importance of reading documentation, and of course the backend, etc...
    Thank you again Dave for all your work, so that we may learn.
    Until the next one.

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

    Revisting this and I am glad I now understand everything said in this video to appreciate how wonderful this tutorial is. Thanks Dave 🤓

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

    I don't usually hit like in 99% of the videos I watch... You totally deserve to be on my 1%. Subscribed to the channel AND all your videos are getting a like.
    Thank you very much!
    Now to the 8h js video to learn what i missed since DHTML was a thing 😂😂😂

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

    The best teacher on the youtube, hands down!!!.

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

    Awesome tutorial! The explanations were very clear and the examples were incredibly helpful in understanding the concepts. Thank you so much for sharing your expertise, Dave! 💛

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

    Hope you get more views and subscribers! Your content is priceless!

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

    Just got to know your channel. Nicely explained and good content! Subscribed

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

    Keep it up man .....your way of explaining things is awesome .... you're gonna go very far...Thanks For the video !

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

    You've got amazing tutorials, you're making a change in the community. Thank you Dave!!

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

    Im watching other videos over and over but i understand only your explanations :) , well maybe others helped a little bit too, but only with your channel i understand truly, thank you

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

    Thanks a lot man, best explanation on whole youtube, if not on internet!

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

    Absolutely phenomenal tutorial

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

    This is most clearly explained video about promise,async and await in JavaScript keep making such clear tutorial
    Thank you so much

  • @georgeouma3836
    @georgeouma3836 5 місяців тому

    Thank you so much Dave. this tutorial is a master class.

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

    I love the way you take your time to explain. God bless you.

  • @pingandpawns
    @pingandpawns 4 роки тому +2

    Great Content! Watched your video on Traversy Media too. Beautifully explained. Subscribed.

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

    Great tutorial! Understandable, interesting and really good explanation! Thank you!

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

    God bless you Mr. Dave. You are the best.

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

    Amazing tutorial about JavaScript Fetch API and Async Await .

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

    Amazing tutorial, Dave! You explained the topic very thoroughly. The pace was also very easy to follow, and the practical examples and insights into workflow really bring it all together. 10 / 10, Thank you!

  • @dennismutemi7991
    @dennismutemi7991 11 місяців тому +1

    well explained,,thanks

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

    This tutorial is so good that at the end I was expecting something like: aha now you have to pay this is not for free.
    Thank you so much!!!

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

      Now that you mention it: www.buymeacoffee.com/davegray ☕☕☕
      😆 Seriously though, I'm just glad it helped you out. (...but I do like coffee)

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

    This is some good stuff. You've really helped my coding journey. Thanks a lot maestro

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

    Dude...once again you come through on crushing the course I bought on Udemy....I'm finishing it because I started it (As the words of Van Halen taught us) but the wrong course/instructor can make you wonder if you can hack it and make that big switch. Then I come to your videos to understand the concepts better, feel much better and get my confidence back. It's nothing against them...they're very knowledgeable but some know how to convey it better. Lets just say I know who's getting my money next time. Thanks man.

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

      Thank you! I am working towards a premium course of my own. I won't put it on Udemy though. Stay tuned here: courses.davegray.codes/

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

    Learnt a lot of things from your tutorials Dave ✨. You're a magnificent teacher. A teacher I always wished but never had. You make things so clear and easy to understand without compromising the quality and minute details. Keep up the great work Man! We need more people like you. Have a great day Dave.

  • @AntonioSantos-ve6zv
    @AntonioSantos-ve6zv 2 роки тому

    This is thorough and to the point. Thank you!

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

    Thank you so much for all your tutorials. I've learned a ton from you.

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

    I love details

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

    Amazing and clear explanation thank you so much!

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

    Sir Dave, please keep teaching us with this dedication.

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

    I already subscribed you and also share this video to my friends. you're the best teacher. Thanks so much... Clearly explained. thanks and thanks and thanks... < 3

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

    You are really a talented teacher. God bless you sir

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

    i am glad i passed by this tutorial. you have just made dummy learn. thanks:)

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

    Most underated channel but for sure it will grow up with huge ammount of programmer.watching your video only for judge but you got my subscrobe🔥

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

    Thanks for the brilliant tutorial.

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

    Wonderful, people will get the value of this man “Dave” over time…🧠

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

    Thanks Dave for a great guide to asynchronous functions.

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

    You are very good at explaining, these topics are clear to me.

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

    Dave is saving my life

  • @shubhsagar6234
    @shubhsagar6234 4 роки тому +1

    Thanks so much... Clearly explained

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

    Thank you for another video Dave!
    Honestly this is much more complicated for me compared to all the previous lessons.. I have a feeling that I've missed some previous lessons and that's why I can't understand completely what's going on, but in fact I was following all the previous lessons. I might need to read more about thiese subjects and rewatch the video.

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

      You're welcome, Grigory! Yes, this topic is complex. We are working with outside data sources that we request data from. We need to await that data in our application before we can do something with it. May be a good one to review twice. 🚀 Keep up the good work!

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

      @@DaveGrayTeachesCode thanks a lot for your support! Surely I will watch it again (and most likely more than 1 time). I understood the first part of the video, but then at some point I just got lost and untill the end it was all just clear as mud :) (as you said in the video).

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

    Thanks for the detail explanation. Your example perfectly solved my confusion regarding with async await when it comes to the working order!

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

    Great video Sir, this playlist helped me a lot. Thank you!

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

    Great video! Keep up the good work.

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

    Great teacher. Many thanks

  • @zltg.mn0ng99
    @zltg.mn0ng99 Рік тому

    my favorite tutor 😁😁

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

    The best explanation ever!

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

    Thanks for the tutorial!

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

    Thank you so much ❤️❤️

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

    Awesome explanation Dave, just one small thing, it would be nice if you also show us how you search for the api documentation and all, so that the beginners would know how to do it.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  Рік тому +2

      I just Googled for APIs and found some different ones. Many exist. When you find them, look at the documentation for each.

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

    Yet another HQ tutorial, thank you Dave!

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

    Alot thanks, u are great 🥰

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

    thank you it is really a helpful tutorial

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

    instead of map at 35:09 could you have used optional chaining? Great tutorial.

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

      Good question. I had to go back and look as it has been months since I made the tutorial. At the 35:09 reference point, I'm not sure what you would want to attempt to chain? The higher order function map() will return a new array with the new values. I say give it a shot and watch the console to see if it works out for you! 🚀💯

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

    Nice explanation 👌

  • @9nikolov
    @9nikolov 9 місяців тому

    All code examples (after they are completed)
    39:56
    Retrieving user data
    45:57
    Retrieving dad jokes
    49:42
    Posting data
    54:46
    Retrieving data with URL parameters
    1:04:00
    Abstract it all into single responsibility functions

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

    Dave thank you 🙏🏿 🙏🏿

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

    the best explanation ever

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

    Mr. Dave sir please why didnt you use JSON.parse() but you used json() instead for the server data

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 роки тому +2

      The json() method is async which works well with requests using fetch - which are also async. JSON.parse is synchronous. In simple terms, it is not going to wait for a response. Here is a reference: teamtreehouse.com/community/what-is-the-difference-between-json-and-jsonparse

    • @obliteycommey2568
      @obliteycommey2568 2 роки тому +2

      thanks for the clarity Mr. Dave Sir

  • @taiwoojo7638
    @taiwoojo7638 4 роки тому +1

    Great teacher

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

    Thank you for the informative lesson.
    Although, it feels SO important that I wish it would have come with exercises for practicing the principles...

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

      You're welcome! I suggest practicing making some of your own requests to the APIs shown in the last half of this tutorial as well as some other public APIs.

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

      ​@@DaveGrayTeachesCode ​ ​ How can one approach any website out there to read information and once it arrived - to work with it indipendetly?
      ...Beside the fact that it seems that each request to reach other websites is responded by error messages (mostly about... CORS?)
      So... while those tools in the video works with both sites,
      And the principles themselves are crucial to get familiar with -
      I haven't been equipped yet with the knowledge of how to execute and handle with a parsing from websites...
      Do following lessons include this topic?

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

    awsome explanation bud

  • @OlehBiblyi
    @OlehBiblyi 4 роки тому +1

    Great tutorial!

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

    Great. thank you.

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

    Thank you so much Dave.. crystal clear explanation for beginners on Asynchronous topic. Is there any chance for angular tutorial just want to learn from your tutorial ❤️

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

      You're welcome and thank you for asking. Angular is not my current focus.

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

    Thanks for sharing this.

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

    Great explanation ;)

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

    Can anyone explain why we are able to call the PostToWebPage function in the getAllUserEmails function before declaring it on line 18 at min 39:32? Is this an example of hoisting? Sorry if this is a beginner question, I'm just starting out. Thank you, Dave, for this excellent tutorial. Your calm demeanor makes this material a pleasure to listen to.

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

      You're welcome! postToWebPage is called inside the getAllUserEmails function. The getAllUserEmails function is not called until the bottom. Arrow functions (anonymous functions) are not hoisted. Good questions!

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

      @@DaveGrayTeachesCode makes sense. Wow, thanks so much for the response, Dave. I'm learning so much from your videos 🙌🏻. Greetings from Canada.

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

    I just love you man

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

    man thank you for this clear, moderate tempo, explanation of everything. Im going to subscribe to your channel, and check out your other videos too

  • @veretuk114
    @veretuk114 День тому

    This is very difficult about the Callbacks and Promises. And quite easy about the async/await. Should I learn all the history of these functions in 2025? Is it enough to learn only async/await to work with modern code?

  • @_rachid
    @_rachid 4 роки тому +2

    Thank you.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  4 роки тому +1

      You're welcome!

    • @_rachid
      @_rachid 4 роки тому

      @@DaveGrayTeachesCode I am a newbie web developper and I appreciated your way of teaching. I salute you from Morocco.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  4 роки тому +1

      @@_rachid thank you. That's great!

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

    Mr Dave, can you tell where are you from?

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

    Thanks Dave, I wonder how fetch() is different from
    $.getJSON( "/details.php", function( resp ){} in Jquery?
    Or are they just the same?

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

      jQuery is definitely different from using the Fetch API although the similarity is requesting data. I avoid jQuery when possible these days, but it is definitely still out there in legacy code. You can look at the differences by comparing the MDN Fetch API details (developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to the jQuery getJSON details (api.jquery.com/jquery.getjson/).

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

      @@DaveGrayTeachesCode would you recommend using jQuery for simple interaction on the web?

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

      @@DucMinhTeaching no I avoid it when possible these days. I prefer Vanilla JavaScript for everything that jQuery used to be used for.

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

    Jesus Christe...finaly somebody explain what is going on with return in then. Thank you sir. Greath tutorial.

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

      You're welcome! 💯🙏

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

      @@DaveGrayTeachesCode I realy mean it. I spent whole week battleing with return value in async. Very, very good tutorial.

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

    Hello Dave, #54:12 in timeline When you fetch with just the URL. Then there was no CORS policy problem occurred but when i tried to fetch with just the URL that occurred. I don't have any backend server knowledge. I just complete your javascript tutorial. Is there any PROXY server to solve this problem??

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

      One of the APIs used as an example in this tutorial is no longer active. That is probably the reason you are experiencing this issue.