Fetch API Introduction

In this video we are going to take a look at the fetch API for making requests and fetching resources. This is an introductory based tutorial. We will create a fetch API sandbox to get data from local resources as well as a remote API
CODE: Code for this video
www.traversymedia.com/download...
BECOME A PATRON: Show support & get perks!
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/traversymedia
COURSES & MORE INFO:
www.traversymedia.com
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia
NEW DISCORD CHAT SERVER:
/ discord

[@shaheryarmahmood247]

Best thing about you is you go from A to Z in single video mostly. Thanks to u

[@TraversyMedia]

I really try and start from scratch in every video. I see a lot of people with pre made code in the beginning and I think that really confuses people and throws them off

[@vugore143]

Thanks Sir

[@AuthorReviews]

Traversy Media Brad, where is your "drop menu with pure css" video?

[@tedspens]

Shaheryar, you should check out his playlists here at youtube, and his courses on Udemy. You won't be disappointed. ;-)

[@SoumyojitSen]

​@@TraversyMedia DISCORD CHAT SERVER says the invite - discord.gg/traversymedia is "invalid or expired ". Pls provide a new link

[@anold6575]

Six years down the line the video is still super helpful. I was struggling to fetch data, not knowing it's super easy. Thank you so much.

[@BAMFponcho]

2 years later, and this video helped me so much. You do a very good job of explaining things we need to know. THank you

[@misterjaypeasmith]

This was so helpful! So many articles give really abstract explanations. You always show how to actually use the data and get it into the DOM! Styling was a bonus too! Thanks Brad!

[@CallV]

Still relevant in 2021, LOVE your videos Brad! I'm becoming a web developer only by following your videos and then creating my own projects from them.

[@eduardopassero47]

Thank you very much! At first I avoided watching this video because it would take so long. But then, watching...every single minute is useful. And everything is well explained. That's how every tutorial should be. Thank you again!

[@1kebastuz]

Made so much projects using ajax, and never heard about fetch. This is so nice and clean. Thank you, Brad!

[@jay-rathod-01]

Bro I know Russians are intelligent no need to prove ok!😂👍

[@anvarsaidov8964]

Thank you, watched it in one go, combination of a good pace and a moderate amount of info, that doesn't give you a headache.

[@KelvinMutugi-ey5xf]

I can't believe this is 6 years old!! Super helpful, I've been struggling with fetch, but now u just made it easier. Also, I know now I have to learn Bootstrap, too, after tasting it in the video. Thanks

[@matthewbert9988]

Brad, thank you for sharing this. I was having some trouble really understanding how to use an API, but you explained it so simply. I also figured out how to create my own components with this, which is going to come in handy for my next project. Thanks again!

[@TheHouseofMouse]

Thanks so much Brad! I have watched several of your videos while taking a full stack course and you do a much better job of explaining things a lot of the time! This video is a huge help :D

[@ahmadqasim6077]

Thanks a lot. You have no idea how simple you make things look and how easy it becomes for us to learn something new. Thank you for all these awesome tutorials.

[@tom_sd3466]

I've learned a lot more from you in the past few weeks then I did in school lol. Great tutorials Brad!! Keep it up

[@rauldeandrade]

I love your videos! You're always so clear and practical. You're a great teacher. I really appreciate your content!

[@thySerge]

Brad awesome videos! There will always be a need to learn/know older methods of doing things. People were saying that PHP was outdated years ago, and its still alive and well. It would be great to see a more advanced video connecting to a beefier API such as UPS, QuickBooks, or something similar. Great work dude!

[@miroslavspirkoski5623]

These tutorials are the most helpful i've found on the internet. Thanks a lot Brad!

[@fllo9992]

You're great man. So cool you build up everything from scratch. Participating in a Udacity course and viewing your videos simultaneously. Really calms me down that this channel is up, since it's so much better than the course I am participating in and totally helps me really understanding every complex stuff. It's even kind of relaxing stuff, viewing your vids. Pls cont

[@borisbosnjak9772]

This is it?!? This looks so easy, man! You are explaining like a GOD! Few hours earlier I thought that I will never be able to understand this, but now, oh boy, I have some crazy ideas I think I can do with this! THANK YOU!

[@dazelmann6589]

So what's up? Did you actually did anything or kinda just mopped your brain with this knowledge

[@abhijitbiswas573]

very crisp content Brad. Thanks for all your support in the tech community.

[@joshuauduak4909]

Good Morning Brad, I want to say a very big thank you to you, you have made learning web development fun and easy for me. You are a great mentor and coach and again i want to say thank you for the videos.

[@User_Unknown_Anonymous]

Thank you for showing all three examples of integrating APIs: Text API, JSON API, and Web API.

[@davidjustice2323]

Your voice just heals the pain out of me Brad!

[@hebertnogueira762]

Thank you so much for this in depth explanation! Your content brings much value, I am glad to have found this channel!

[@savavuckovic9340]

I love you man, please keep making awesome vids and have a great day! I went from being complete noob to fullstack web developer thanks to your Eduonix courses and KZbin videos

[@judonomi]

I'm here from your Udemy course - 20 Web Projects with Vanilla JS. This is exactly what I needed today. Thanks again, Brad.

[@NERO-ez1mn]

BASICS will always be BASICS nothing is OUTDATED, something is just UPDATED

[@TraversyMedia]

Agreed

[@NERO-ez1mn]

senpai more graphql please or CRUD templates based on angular? like what you did in the mean stack but a graphql not mongodb as database?

[@DB-dk2mj]

@@TraversyMedia I'm back to your lessons, my friend! Spend 1,5 year on Flutter (New oil shit!) - and now I'm back to Web because of money! I need job, man!))))

[@mlasib]

​@@DB-dk2mjdid u get the job ?

[@romanroman9638]

Believe me or not, but finally, I've understood the fetch whole thing. Thank you, Brad! So glad to be your student at Udemy

[@sherlyhartono8024]

Very clear explanation. Better than my bootcamp lecture! Thank you!

[@eduardorpg64]

This helped me a lot in a homework assignment. You're the bomb, Brad! Keep up the good work!

[@Socko973]

I've been trying to learn how fetch works and this really helped solidify it for me. Thank you!!!!

[@zainwasem]

Your videos never get old. The simple material always Metters.

[@tuckertucker1]

Thank you! So, I'm watching your new 2022 video on Laravel, and it's great. Suddenly I decide that I need to do a javascript Fetch call to my Laravel api, and script the response into my HTML. Only it doesn't work right. I spend the next 12 hours combing the internet for a solution, nothing is working, until... Here comes the cavalry, Brad Traversy with a 2017 video that saves me. Well done again. (btw, it was the "double" .then that saved me. No one else was pointing that out.)

[@AshishKumar-wh6dw]

Just visit on your channel and became a fan. Amazing content and easily understood. Thanks and keep it up. Watching continously...!!

[@natetolbert3671]

This is the first I've heard of JSONPlaceholder. That is a seriously good idea. Super simple yet super effective!

[@Sasa-qb6zw]

Clear explanation and such a great tutorial! Thanks for this and AJAX crach course! I learned a lot!!!

[@mareksamofal3929]

Thank you for the material 💚very helpful and easy to digest. May there be more such teachers 🙏

[@charisalackrone3361]

Thank you so much for this video! I've been really struggling with learning APIs and this was a really helpful overview on interacting with them.

[@bobotoole2257]

how u doin nowe ? employed? or nah lol

[@easterling9489]

Rick, Glenn and Negan are names from the Walking Dead :) Sir, you are a man of culture!

[@noelemmanuel5715]

I've learnt alot from you and I made a WhatsApp group for teaching others how to code and I always refer my students to you,I would be highly grateful if you grant my request,just 16 and It took me 4 months to learn HTML,CSS and JavaScript,love you Traversy, you're my boss👍👍👍

[@siyabhatt2090]

after searching long this video made my day........thanks for this level of knowledge

[@Barnardrab]

Thanks. You've solved a problem I've been struggling with in the first 9 minutes

[@rahsaanpringle3583]

You and these other dev on KZbin courses have added more value to the economy than you'll ever know. Thanks for what you do, I hope you're getting fat pockets from it. Let me know if you can show me how to fix my Jeep.

[@BrianDriscoll]

Thank you, thank you, thank you. The fetch tutorial from my paid program got way too complicated, way too fast, I couldn't even use a simple dog api! Now I can because of this tutorial. And, I love that you don't have this "extra code" that "really doesn't matter to understand this cocnept" because that makes the whole thing confusing.

[@TheLollercaster]

Something what I've been actually looking for!!! Thank you!

[@arshamazami159]

The best video about fetch api You explained this concept very well And thaks for sharing your knowledge 👍

[@sektor187]

Awesome video! Keep up the great work man, love your videos!

[@freddycordova8934]

Excelente tutorial, muy bien explicado y me encantó el acabado final que le diste con Bootstrap. Muchas gracias.

[@rodrigogasp]

Man, you just saved my life. What a great content!

[@oluwayomibalogun]

I appreciate this a lot. I've been confused by the fetch API until watching your videos.

[@00el04]

do you like this or axios more?

[@oluwayomibalogun]

@@00el04 I don't know about axios. This is my first point of contact with this field

[@elliot-chagu294]

Dude I would pay for your teaching. Great stuff.

[@user-kw3vv6gy3y]

best video so far on this subject, thanks very much!

[@BobAg_]

Love your videos. Amongst the best on YT.

[@culturapoliticaycomputador9999]

Thank you mr. For these great videos, you are a good teacher.👍🙏

[@67Keldar]

Awesome... This video just unblocked a couple of things that I've been struggling with over past videos I've watched. The Asynchronous stuff has had me scratching my head over dozens of videos but it just fell into place... Great examples \o/ Thanks

[@belinhobeli9569]

So good, and yet so easy to understand. thumbs up

[@lardosian]

Hi Brad, I have a request for you for a small video. Basically a video where you list what a JS/web developer should know related to his/her stage of learning. EG - beginner should know xyz and how strong...Intermediate should know xyz and how strong...Senior Developer should know xzy and how strong. I'm sure I'm not the only one who sometimes feels overwhelmed by so many different aspects of web development, and job specs can seem so intimidating, that would be great, thanks.

[@haileeko1952]

Great videos. I'm learning a lot from each one. Thanks.

[@Programming-Fun-With-Hima]

Well done hero, thank you so much (from Algeria)

[@prateek4524]

Thankyou so much for this video broo.. Was looking for this. You made my day.🙏👌👌🤩🤩

[@siemen_subbaiah]

THANK YOU SO MUCH FOR THIS! You deserve a lot for sure!

[@alexannder15]

Excelente, se nota la diferencia entre xhr API y fetch API. definitivamente te entendí todo, muchas gracias!

[@arxaa4422]

Wow, amazing video. I like the new standards in es6. I love the new way to concatenate using backticks.

[@AntonnifoGaming]

I was unable to concanate with the backticks I don't know what I did wrong

[@cervantes01]

Brilliant as always brad, thank you :)

[@vladosononame6376]

Hey man, you inspired me to try this proxy method, my fetches from frontend finaly works with backend! Thank you for this video! im subscribing on you

[@alexisdauli8537]

Thanks a lot bro for always making things easier!!!

[@terrycox829]

Outstanding coding walk-thru on several, realistic Fetch API scenarios. I learned some valuable things that went beyond the Fetch API, too -- such as the use of backticks; Bootstrap; Live Server; Jsonplaceholder, etc. Well done.

[@robscherer]

I may not agree with everything you say on Twitter, but damn you are good at what you do and I really appreciate you!

[@TheNerdyDev]

Great video sir. A video on how to make axios request in vuejs will be highly appreciated sir.... I have learnt a lot from you..

[@nickwust5095]

Man, you helped me greatly! Thank you!

[@soultouchingsongs]

Excellent! Thanks for this awesome video. 👍

[@RickyGarcia_Learning]

My man! You always come through.

[@itai0800]

Thank You! very good & helpful video, I really enjoyed it

[@MrStuartp]

brilliant tutorial, thanks so much!

[@xklusiv15]

Still amazing content bro. Very helpful and easy to understand.

[@kevinurielfonseca]

Just what I needed, thanks Brad!

[@PetrChlada]

Amazing study material! Thank you

[@alphacode5]

I actually learned a lot from this, thanks

[@kaankara1101]

I agree with you. old technologies are interconnected with new technologies and I think they are a building block for learning new technologies. there is no harm in learning

[@Daamilola]

This takes away the stress, Thank Brad.

[@hongwi2945]

Thank you so much for your explanation !

[@kamaboko1]

Very solid overview. Thanks.

[@TANISHQJAIN1002]

Waited for this from so long ;)

[@ivantarnyagin9731]

Damn Traversy. Your tutorials are amazing. Thanks

[@firstignitor]

you're the right guy who deserves a drink. that's for the efforts

[@CarlosMartinezTech]

Thank you so much, for this amazing Content

[@ahmedashraf-cf9lt]

the only channel i stop adBlock thanks brad,

[@user-vq6pe5px9k]

It was great video, probably best on youtube but I demand the second part of it where your dive into fetch deeper. It would be great! Or make something practical and even difficult using Promises. That's a very interesting topic in JS. Thanks to ES6. But anyway, I want to say u a great thank for all that videos that you create. You've contributed a lot personaly for me, and I think for a lot of guys of ur subscribers. I wish you to accomplish everything about what you dream and have a good Bellgium on Munich beer. Thank u again!

[@ukaszpochron4263]

Very good explanation!

[@fusehenry]

Thank you, Brad. Very helpful.

[@ivangajic8129]

Best teacher, no doubt.

[@TraversyMedia]

Thanks :)

[@nero1563]

Very helpful video! Thank you sir!

[@paayalshah5172]

Thank you. Learnt a lot from this vdo.

[@BusinessWolf1]

This was the first time seeing how bootstrap works, up until now I've only heard of it. That looks like god's gift to earth. Just.. wow.

[@DanielWeikert]

Thanks a lot Brad. Great video. Could you go into more detail on your best practices to learn these things fast? Learning by doing is certainly the best thing but maybe you use certain techniques which might help as well? Thx.

[@mahsam7975]

thanks for your great tutorials

[@anirln8530]

why are we making a request to the json file every time the input changes, can we make it just once and every time the input changes we filter the states array ?

Thank you for tutorials.

[@Super_Cool_Guy]

HI Brad, we are just curious to know what kind of hardware computers you are using to make and write your videos ?

[@brianlewis3225]

Really enjoyed this. Thanks!

[@prathapkasi7739]

Thank you so much for your valuable information