Learn Fetch API In 6 Minutes

Sdílet
Vložit
  • čas přidán 14. 10. 2019
  • Accessing data from an API is one of the most common things you will do in web development, and the way to access APIs is with fetch. Fetch is function built into JavaScript that allows you to query any URL/API to get back data. The most important part is that fetch is asynchronous so it will run in the background and let you know when it finishes using promises. In this video I will show you exactly how to use fetch, and all of the common mistakes people make using fetch so you can get up and running in just six minutes.
    📚 Materials/References:
    Fetch Article: blog.webdevsimplified.com/202...
    Learn Promises In 10 Minutes Video: • JavaScript Promises In...
    Async Await Tutorial: • JavaScript Async Await
    🧠 Concepts Covered:
    - What the fetch API is
    - How to use the fetch API
    - How to handle API response errors
    - How to use JSON data with fetch
    🌎 Find Me Here:
    My Courses: courses.webdevsimplified.com
    Patreon: / webdevsimplified
    Twitter: / devsimplified
    Discord: / discord
    GitHub: github.com/WebDevSimplified
    CodePen: codepen.io/WebDevSimplified
    #Fetch #WDS #JavaScript

Komentáře • 660

  • @sergiearruda443
    @sergiearruda443 Před 3 lety +1725

    Be like Fetch, always succeed even when you fail

  • @ProgrammingwithPeter
    @ProgrammingwithPeter Před 4 lety +436

    Best 6 mins of CZcams that I watched today

  • @plaguegames3556
    @plaguegames3556 Před 3 lety +325

    At last someone who explains the reason behind every action. Most of the instructors just want us to copy paste and do not explain why we need to do sth, and what is the meaning of the action. Great Job 👍

  • @digigoliath
    @digigoliath Před 4 lety +60

    If you have 6 mins to spend, spend it on this video!

  •  Před 4 lety +17

    Man! This is really web dev simplified! I enjoyed this video so much and it clarifies everything!

  • @marlish6235
    @marlish6235 Před 2 lety +10

    Simple, clear and straight to the point. Excellent video.

  • @alexzimmerman3447
    @alexzimmerman3447 Před rokem +1

    100% the best JS videos I've found on CZcams. You got me hooked with the Promise video, and now here we are! Thank you!!

  • @bmac-cz6rk
    @bmac-cz6rk Před 3 lety +5

    Its so amazing that I have been struggling with promises and the fetch api all week, reading docs and trying to grasp it, then this video shows up and clears all my problems away. Forever grateful to you Kyle! You gained my support today!

  • @kvncnls
    @kvncnls Před 3 lety +50

    Took 6 minutes and now I can use Fetch for all of my JavaScript projects. Thank you!

  • @noveltechmedia
    @noveltechmedia Před 4 lety +32

    Great video, much better than reading the documentation. One thing that would also be interesting is if you showed how to use async and await with fetch. Keep up the good work :)

  • @abdelazizelshrkawy5193
    @abdelazizelshrkawy5193 Před rokem +7

    the mighty solution for every problem you are actually one of the best people who explain the problem or teach others in fantastic way which make the listener not only know the answer but to understand the details thank you I wish the best to you

  • @petertester915
    @petertester915 Před 4 lety +33

    Your videos are invaluable, the direct effect you are having is bringing novice developers up the notches to an intermediate / advanced level. I have been using the fetch() method for a while now, but the in depth analasyis lets me connect the dots, enables me to become a better developer. Keep on going!

    • @WebDevSimplified
      @WebDevSimplified  Před 4 lety +24

      That is awesome! The goal with my channel is to help people understand new technology and tools better than they already do and I am so glad I am able to do that for you.

  • @Ipdxcreative
    @Ipdxcreative Před 3 lety +3

    I just wanted to say thank you so much for helping me understand these concepts in such a simple manner!

  • @rishabbhattachaya6676
    @rishabbhattachaya6676 Před 6 měsíci

    recently got into this channel and watching your recent videos compared to something older its amazing how far you've come. thank you for everything sensei

  • @haseebpavaratty6249
    @haseebpavaratty6249 Před 4 lety +1

    Glad I found you. Never stop making these. Thanks :)

  • @alexlindgren1
    @alexlindgren1 Před 3 lety +6

    Really appreciate your videos man, so thankful for you giving them away for free. I'm already enrolled in another course, but if I'm not satisfied with what I'm going to learn about react I'll check out your course on that - I like the way you describe things so it's easy to understand of how it all comes together.

  • @sajaljaiswal1659
    @sajaljaiswal1659 Před 2 lety +38

    This channel is really helpful for people like me who had studied some web stuff before but didn't keep in touch with it. I really don't want to go over hours of lectures studying what I already know but have forgotten. Great resource.

  • @SuperQuwertz
    @SuperQuwertz Před 3 lety +1

    Dude, youre a life saver. Best Channel for Webdevelopment on CZcams.

  • @scyfox.
    @scyfox. Před 2 lety +1

    Man, I lost hours today following a tutorial that has a mistake (or lack of explaining) but this was awsome to understand and follow along.
    I made a post in my personal blog linking back to you.
    Great content!!

  • @StefanVanderVyver
    @StefanVanderVyver Před rokem +24

    Sometimes it takes someone to use slightly different words in order for the explanation to land. I think you have a gift. Well done on this video, and step by step explaining the double promise in fetch. Also, simply by saying "you can use asynce/await OR then" you put so much clarity into my mind. Keep going.

  • @ghanashrim2839
    @ghanashrim2839 Před 3 lety +1

    I have been following your videos for a long time now, your voice is very soothing to hear man!

  • @cacho71982
    @cacho71982 Před 4 lety

    I love your videos! They are short, very well explained and really helpful!!!

  • @mikeshilovski1512
    @mikeshilovski1512 Před 4 lety +5

    Jesus, You're a genius! Thank you so much for the video!! Finally understood it all

  • @manasnagelia
    @manasnagelia Před 2 lety +1

    Absolute legend, banged my head on the keyboard for hours, until I found out I had to set the headers as application/json. Thank you.

  • @taylorgraham2906
    @taylorgraham2906 Před 4 lety

    The links to other videos were SUPER helpful. Thanks, man!

  • @thomasviles8158
    @thomasviles8158 Před 3 lety

    Everything I search for as I learn Javascript,, this guy has the best videos. Thanks for all of the help man!!!

  • @uulecrocodile8437
    @uulecrocodile8437 Před rokem

    the best and most informative 6 minutes ever spent on CZcams

  • @jgwilk
    @jgwilk Před 4 lety +11

    the most simple, easy to understand explanation of fetch I've seen! Nice job 👏

  • @mactavish7287
    @mactavish7287 Před 4 lety

    Bravo!
    My first ever video of your channel. Well explained in actually 6 mins. No bullshit.
    PS: This is the first time I came across fetch. I have been using axios but NOW I think fetch is also nice!

  • @SuboptimalEng
    @SuboptimalEng Před 4 lety +3

    Short and sweet, nice!

  • @ricardoaguiar616
    @ricardoaguiar616 Před 2 lety

    You have the gift of making things understandable! Thank you for your help!

  • @Andy-fs4bb
    @Andy-fs4bb Před rokem

    Clear, concise, and accurate - another great video - thanks!

  • @SJY11
    @SJY11 Před 7 měsíci

    Kyle, you're also one of the few youtubers who actually includes the materials referenced in the video in the description! I know it's an easy thing to forget, but I appreciate the attention to detail :)

  • @lidestudios5094
    @lidestudios5094 Před rokem +3

    since I have college and programming is something I do on the side, I never really have enough time to learn about this stuff. But this 6-minute video was just what I needed, short and straight to the point while also managing to explain what everything does. Thanks so much!

  • @martini9388
    @martini9388 Před 5 měsíci

    Thx Kyle! As always, wonderful content!

  • @lititiakorau9487
    @lititiakorau9487 Před 2 lety

    Kyle you are such a great teacher
    bless you!!

  • @SnappyScience
    @SnappyScience Před rokem

    Great video and thank you for going through the potential bugs rather than just showing working code. Learnt a lot.

  • @jumboliah13
    @jumboliah13 Před 5 měsíci

    Your style of teaching is fantastic. I hope somebody gave you some kind of award, you deserve it.

  • @yasirtahirkheli74
    @yasirtahirkheli74 Před rokem

    The perfect explanation. long live mate. you are probably the best and the most thorough professional who has the ability to explain in accurate details.

  • @yeshwanthtoluva4278
    @yeshwanthtoluva4278 Před rokem

    simple and to the point!
    Thanks, man!

  • @arashaadd
    @arashaadd Před 3 lety

    bro im watching many of your videos and im loving you more every time. Thank you so much.

  • @debopamgupta9505
    @debopamgupta9505 Před 4 lety

    Best video that made me understand every thing about fetch because every time after watching a lot of projects when I write something it doesn't work as because I mess up the fetch statement....

  • @bintoucisse2415
    @bintoucisse2415 Před rokem

    Thank Kyle! You were very helpful as always! You're very pedagogue

  • @kerimtim
    @kerimtim Před 2 lety

    Kyle makes everything so easy to learn

  • @cllhicqani9678
    @cllhicqani9678 Před rokem

    i have never seen a motivated helper like you. may god bless you. You made me understand what I was confused about it. the best video i've ever seen.

  • @pysof
    @pysof Před 3 lety

    Bro your videos are absolutely awsome! I hope your channel keeps growing up! Keep it up.

  • @ameyajoshi5673
    @ameyajoshi5673 Před rokem

    OMG I quickly wanted to revise JS Fetch very quickly and this helped a lot. Awesome Video thanks!

  • @ranamuzamal9655
    @ranamuzamal9655 Před 3 lety +1

    One of the best tutorial of Fetching datta from API , i hhave searchout many here on google and youtube ,Really you are the best one

  • @timucintarakc2281
    @timucintarakc2281 Před rokem

    best java script channel in youtube. thank you very much. i actually wathed multiple videos on this before. you were the only one who expalined it very well.

  • @negoy100
    @negoy100 Před 3 lety

    Excellent videos. Love the conceptual depth and fluid presentation style.

  • @rylan_mcmullan
    @rylan_mcmullan Před 3 lety +2

    This was super helpful, thank you!

  • @danyleveque892
    @danyleveque892 Před 3 lety +1

    Clear and concise. It would be great if you can explain how to send form data using the FormData object too and any alternate ways of sending form data to an endpoint

  • @keronwilliams5392
    @keronwilliams5392 Před 2 lety

    Dudeeeeeee straight to the point, love it!

  • @davidspot191
    @davidspot191 Před 2 měsíci

    Oh my, I really love this simplication 😍😍I've been trying to understand this from more than 3 videos but I was just watching and not even understanding it. Loved how you really break this down from the start. Thanks sooo much Dev 😄😄

  • @vidumini23
    @vidumini23 Před 4 lety

    Simple and clear explanation. Thank you.

  • @pvsagar92
    @pvsagar92 Před 4 lety

    Clear and straight forward. Thanks

  • @anollipian
    @anollipian Před 2 lety

    Your explanation is absolutely amazing, thank you!

  • @ayMillmusic
    @ayMillmusic Před 6 měsíci

    Such a great video man! Hair is looking super dope too!

  • @paulmcok
    @paulmcok Před 3 lety +1

    Great tutorial and very clear!... Turns out it's not what I needed in this instance (so good job I watched it) but definitely useful for future road blocks. I've subscribed.

  • @mutley11
    @mutley11 Před 2 lety

    That was a very skillful demonstration; you are a wonderful teacher. Thank you.

  • @user-yo2xf3jc3f
    @user-yo2xf3jc3f Před 6 měsíci

    Straight on point tutorial! Great Job!

  • @fabiofreitas9304
    @fabiofreitas9304 Před 3 lety

    Simple and efficient. The best explanation about fetch i've ever seen...

  • @MrStuartp
    @MrStuartp Před 2 lety

    Great work actually explaining the reason for the syntax and process in using APIs, this video saved me hours.

  • @nomanmajeed1807
    @nomanmajeed1807 Před 4 lety

    Great tutorial. It helped me to understand how actually fetch works. Thank you

  • @pale-face
    @pale-face Před 2 lety

    The best video on Fetch I have ever watched.

  • @EvertvanIngen
    @EvertvanIngen Před 3 lety +12

    Looks right into my soul, "I'm gonna steal that" TT

  • @andrewday7799
    @andrewday7799 Před 4 lety

    I love that you are sensitive to developers time

  • @cristi8997
    @cristi8997 Před 10 měsíci

    thanks man, I was so confused why api error would return a success case, now I get it

  • @chrisryu2179
    @chrisryu2179 Před 3 lety

    Very concise and right on point! Nice video.

  • @FaLkraydz
    @FaLkraydz Před 4 lety

    Simple and direct. Thank you, bro.

  • @phamtienthinh1795
    @phamtienthinh1795 Před 9 měsíci

    Thank you, I was struggling at header and body, this video is like my life savior

  • @CarlosHasAIdea
    @CarlosHasAIdea Před 4 lety

    This content should get you more views. Thank you brother. Great reviewing content too.

  • @aabid3375
    @aabid3375 Před 4 lety +1

    How did u maintain that delivery speed with so much clarity.Simply amazing.

  • @the_yugandharr
    @the_yugandharr Před rokem

    Insane stuff dude! Thank you so mucn Kyle

  • @kurtheimerman8267
    @kurtheimerman8267 Před 2 lety

    Another great video. Thank you!

  • @davidjustice2323
    @davidjustice2323 Před 4 lety

    Extremely informative. Thanks!

  • @SJY11
    @SJY11 Před 7 měsíci +3

    In 6 minutes you covered basically everything you need to know about fetch! I love how explained the corner cases for every line (like why we use JSON.stringify or how .catch() only catches fetch-related errors) potentially saving us from many unexplained bugs and sleepless nights! Thank you so much, Kyle! You're the GOAT!

  • @fodecissokho9918
    @fodecissokho9918 Před rokem

    This is by far the best tuto I've ever seen
    Eveything is detailed under just 6 minutes,
    Keep it up G👌👌👌👌

  • @jaimearriola1495
    @jaimearriola1495 Před 3 lety

    Awesome!!! Thanks for this clear explanation! :)

  • @evanoffhandson7067
    @evanoffhandson7067 Před 8 měsíci

    This guy's channel is awesome. Taking a $14,000 course right now and I still come to his videos for clarification.

  • @faisalmehmood5375
    @faisalmehmood5375 Před 3 lety

    Super useful. Helped me on my path to learning how to query a database through a server.

  • @omarpervez5657
    @omarpervez5657 Před 2 lety

    Hi Kyle, My name is Omar. I have been following you for 1.5 years.I knew lots of things from you. Thank you so much for your all Videos 😍😍

  • @michaelcarnevale5620
    @michaelcarnevale5620 Před 3 lety

    srs this is the best channel if i need to just learn a quick specific thing

  • @AnyThingCreativex
    @AnyThingCreativex Před 4 lety

    This was very helpful, thank you very much!

  • @jeroenplayak2433
    @jeroenplayak2433 Před 2 lety

    super helpful and easy to follow again, thanks.

  • @gearzanimation
    @gearzanimation Před 2 lety

    Literally the best code tutorials on the internet from this guy. SO GOOD!

    • @dharshan5309
      @dharshan5309 Před 2 lety

      Anyone tellme, we are checking if the response is ok in then but we are removing the res.Json. at 4:24 the data is undefined even when we are getting the successful fetch. How to get the data in json format

  • @MattJohnson604
    @MattJohnson604 Před 3 lety

    Great tutorial! Thanks so much!

  • @darryl8349
    @darryl8349 Před 11 měsíci

    Thank you so much you have helped me solve a problem ive been stuck on for like an hour

  • @FireHazardz101
    @FireHazardz101 Před rokem

    I love love love your content. Thank you for what you do ❤

  • @johangomez6676
    @johangomez6676 Před 2 lety

    Thank you, This was extremelly helpful :)

  • @rebeccawambui8143
    @rebeccawambui8143 Před 4 lety +1

    This is awesome 👍 content summarized in 6 min 👏🔥🔥

  • @surajdutta5730
    @surajdutta5730 Před 4 lety

    thanks Kyle. your explanations are the best

  • @mobigeek666
    @mobigeek666 Před 2 lety

    Thank you so much bro!!! I asked this guy to help me with the .then() method and he made a whole video!!! thank you so much. now i understand what goes on behind the scenes.

  • @CaptWindShear
    @CaptWindShear Před rokem

    Thank you, sir, for not trying to blind me with science. It is convoluted enough as it is, but you made it make sense.

  • @arifsaleem-7377
    @arifsaleem-7377 Před 9 měsíci

    concise and clear ... thank you

  • @ArtVandelayInc
    @ArtVandelayInc Před 3 lety

    I enjoyed this video indeed. Great job at simplifying it

  • @herbert_M
    @herbert_M Před 3 lety

    simplified for me, thanks Kyle

  • @waynezeeman8948
    @waynezeeman8948 Před 9 měsíci

    Many thanks for explaining this topic so well. It has just solved my 2 week struggle with Fetch👍

  • @mewarrick
    @mewarrick Před 2 lety +2

    So simple and clear, exactly what I needed. Thank you!!

  • @rickysahani1258
    @rickysahani1258 Před 3 lety

    Not exactly what I was looking for, but this is a great Video indeed.