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.traversymed...
BECOME A PATRON: Show support & get perks!
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/t...
COURSES & MORE INFO:
www.traversymed...
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

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

[@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!😂👍

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

[@Oleg-pt7nh]

Did succeed?

[@davidjustice2323]

Your voice just heals the pain out of me Brad!

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

[@easterling9489]

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

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

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

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

[@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.)

[@abhijitbiswas573]

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

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

[@judonomi]

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

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

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

[@zainwasem]

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

[@User_Unknown_Anonymous]

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

[@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👍👍👍

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

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

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

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

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

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

[@natetolbert3671]

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

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

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

[@rauldeandrade]

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

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

[@oluwayomibalogun]

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

[@byedwardleung]

do you like this or axios more?

[@oluwayomibalogun]

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

[@miroslavspirkoski5623]

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

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

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

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

[@Socko973]

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

[@sherlyhartono8024]

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

[@aliizzetmetin6382]

Dude I am on a Traversy binge rn

[@Barnardrab]

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

[@AshishKumar-wh6dw]

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

[@eduardorpg64]

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

[@arshamazami159]

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

[@firstignitor]

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

[@mareksamofal3929]

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

[@siyabhatt2090]

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

[@cr00l83]

Nice tutorial, Tip: U don't need to write same key two times like that: JSON.stringify({title:title, body:body}), u can write just one JSON.stringify({title, body})

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

[@hebertnogueira762]

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

[@alexannder15]

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

[@elliot-chagu294]

Dude I would pay for your teaching. Great stuff.

[@psychicopus]

Just became a $1/m Patreon to your channel. You are awesome. Please continue the great work! I have worked as a software engineer for 12 years but I still find your content useful and of high quality! Bless you!

[@enogael]

Those freaking seagulls :p Thanks for your videos, makes all this new ES6 and APIs less intimidating for a designer like me.

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

[@Sasa-qb6zw]

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

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

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

[@rodrigogasp]

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

[@freddycordova8934]

Excelente tutorial, muy bien explicado y me encantó el acabado final que le diste con Bootstrap. 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

[@culturapoliticaycomputador9999]

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

[@BobAg_]

Love your videos. Amongst the best on YT.

[@TheLollercaster]

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

[@hasgotech380]

True, I opine with brad that its good to learn old stuff then new one.

[@sektor187]

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

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

[@jordirhoden300]

Amazing video, I'm just wodering, on minute 8:49 how does Javascript knows that the argument data is referring to res.text() ?

[@Programming-Fun-With-Hima]

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

[@RickyGarcia_Learning]

My man! You always come through.

[@chaitanyadokara6654]

how to fetch every time when a value is changed Ex:- Username

[@AlphaFrog1021]

what if you put fetch in separate function and then use setInterval() to call that function every x seconds

[@belinhobeli9569]

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

[@ajazmiah]

There is a youtuber who lets his viewer send him their web portfolio website and he makes a video and reviews the sites and make suggestions and says if it is good enough to get a junior level jobs. IT would be really nice if you start doing the same. THUMBS UP IF YOU AGREE

[@10YardCricket]

22:38 why added 2nd parameter in fetch and didn't get what you used in *headers* as well

[@stewartwilson943]

It bothers me that youtube does not give me the ability to give you 2 thumbs up so I'll do that here 👍👍

[@СергейГолубев-л5п]

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!

[@haileeko1952]

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

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

[@אביבפרידמן-ז1ש]

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

[@romimaximus]

hey greetings from Brazil....quick question... how did comment all the lines at once on 9:14min ? and thankx for all the tuts videos... your video tuts always helps me a lot thankx you..!!

[@JimKernix]

At 6:00 you have a console.log inside getText but mine isn't outputting to the console - same exact code. Why would that be?

[@JimKernix]

Still not getting anythinf when I cobsole.log inside the Fx, after fetch() buut I do when I call getText(); later in the code - WTF?

[@ebukapeter7106]

Great tutorial, but my post request didn't go through, I had cors-issue, was it from their backend, i also tried the zip file you provided, same thing..

[@maxdurbin3033]

same here, almost no other comments about this issue. I was hoping to find a solution on here. Fetch API cannot load file:///C:/Users/Max%20MM9K/classes/act311/hmwk/hmwk06/csmp.json. URL scheme must be "http" or "https" for CORS request.

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

[@orifl6653]

what extension makes a line break when you reach the end of the window? (for exmp 5:42)

[@techlead...]

It's happened due to word wrap. Just press ALT+ Z

[@xklusiv15]

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

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

[@drewlomax7837]

I got a notification yesterday that you uploaded a CSS dropdown navbar video but it was gone by time I clicked on it. Why did it get taken down?

[@TraversyMedia]

I wasnt happy with it. Ill be using it in a full project

[@cesarlara3974]

Hello Sir! I am done with your html and css course. Great course! But I am still a little confused on how you can make an actual website with css grids?

[@prateek4524]

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

[@MohammedAhmed-js2ur]

Thank you so much for this great tutorial. I have a question please, what does the headers object do? Is it necessary for a post request?

[@mrchedda]

Thanks , sir! Are you able to show how to add authorization for either GET or POST?

[@RickyGarcia_Learning]

My subscribers were just talking about you! Dang man, your stuff is on point!

[@abrieljohngabriel8686]

Thanks for this Brad. Just a quick question.. Can be fetch used with somewhat live fetch where you do not have to click a button see all the searched results? I know it can be done by popular frameworks but searching a more native way by using vanilla js. Thanks!

[@coffeeandvapes1308]

LMAO! At 11:36 I was about to go look out my back window to check my chickens were ok, when thankfully you said 'sorry about those frickin seagulls out there'! Also, Rick seriously needs to come back into The Walking Dead - crap is getting a bit stale without him!

[@tjbuan1363]

I have a problem on my data.foreach function, it says "Uncaught (in promise) TypeError: data.forEach is not a function". :(

[@gunner6967]

see if you wrote .then(res => res.text()) instead .then(res => res.json())

[@leeroyjfpv8820]

I had the same problem, for me the array was deeper inside the JSON code so I had to target that part of the array 'data.items.forEach'

[@ivantarnyagin]

Damn Traversy. Your tutorials are amazing. Thanks

[@kavon9748]

Hello and thanks for another great video. Just a quick queston, please. I don't understand why we parsed and stringify JSON with xhr object and not with the fetch get method? Why only with fetch post method? Thanks

[@DanielWeikert]

If I want to post to another api how do I know what to put into headers{ } and body in the fetch method? Thanks

[@cervantes01]

Brilliant as always brad, thank you :)