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

[@easterling9489]

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

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

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

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

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

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

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

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

[@bilaltariq50]

Made so much projects using ajax, and never heard about fetch. This is so nice and clean. Thank you, 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.

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

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

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

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

[@abhijitbiswas573]

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

[@rauldeandrade]

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

[@davidjustice2323]

Your voice just heals the pain out of me Brad!

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

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

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

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

[@User_Unknown_Anonymous]

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

[@hebertnogueira762]

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

[@judonomi]

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

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

[@zainwasem]

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

[@sherlyhartono8024]

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

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

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

[@Socko973]

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

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

[@natetolbert3671]

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

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

[@Sasa-qb6zw]

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

[@eduardorpg64]

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

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

[@freddycordova8934]

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

[@TheLollercaster]

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

[@mareksamofal3929]

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

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

[@siyabhatt2090]

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

[@AshishKumar-wh6dw]

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

[@rodrigogasp]

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

[@elliot-chagu294]

Dude I would pay for your teaching. Great stuff.

[@Barnardrab]

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

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

[@sektor187]

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

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

[@arshamazami159]

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

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

[@user-kw3vv6gy3y]

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

[@BobAg_]

Love your videos. Amongst the best on YT.

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

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

[@culturapoliticaycomputador9999]

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

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

[@belinhobeli9569]

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

[@Programming-Fun-With-Hima]

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

[@RickyGarcia_Learning]

My man! You always come through.

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

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

[@prateek4524]

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

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

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

[@siemen_subbaiah]

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

[@haileeko1952]

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

[@alexisdauli8537]

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

[@ivantarnyagin9731]

Damn Traversy. Your tutorials are amazing. Thanks

[@ivangajic8129]

Best teacher, no doubt.

[@TraversyMedia]

Thanks :)

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

[@firstignitor]

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

[@RickyGarcia_Learning]

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

[@soultouchingsongs]

Excellent! Thanks for this awesome video. 👍

[@itai0800]

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

[@xklusiv15]

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

[@kevinurielfonseca]

Just what I needed, thanks Brad!

[@carolineho603]

Hi Brad and Thank You for all your quality videos! May I ask you which UI theme / syntax theme you are using on this video?

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

[@nickwust5095]

Man, you helped me greatly! Thank you!

[@aliizzetmetin6382]

Dude I am on a Traversy binge rn

[@Daamilola]

This takes away the stress, Thank 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.

[@alphacode5]

I actually learned a lot from this, thanks

[@MrStuartp]

brilliant tutorial, thanks so much!

[@ahmedashraf-cf9lt]

the only channel i stop adBlock thanks brad,

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

[@hongwi2945]

Thank you so much for your explanation !

[@CarlosMartinezTech]

Thank you so much, for this amazing Content

[@PetrChlada]

Amazing study material! Thank you

[@kamaboko1]

Very solid overview. Thanks.

[@_.sunnyraj._]

Thanks For The Extra Bootstrap Knowledge

[@TANISHQJAIN1002]

Waited for this from so long ;)

[@adrianpop8086]

You are a legend!!! Keep it up man.

[@nero1563]

Very helpful video! Thank you sir!

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

[@fusehenry]

Thank you, Brad. Very helpful.