Fetch API - JavaScript Tutorial for beginners

JavaScript Fetch API, how to use in with Promises, how it is different from XHR, and why use it?! This is episode 14 of 20 things Javascript Developers Should Know But Probably Don't.
00:00:00 Intro
00:00:45 What is Fetch?
00:01:51 Request()
00:02:52 Response()
00:04:09 🔴 Demo: Simple GET
00:08:12 🔴 Demo: Simple GET with Parameters
00:10:58 Request Parameters
00:12:10 Headers
00:12:49 🔴 Demo: Headers
00:17:12 Error Handling
00:17:41 🔴 Demo: Error Handling
00:26:24 History of Fetch and XHR
00:25:40 POST Request
00:28:00 Why Fetch?
00:22:59 Outro
Links mentioned in the video:
List of Free APIs:
free-apis.github.io/
publicapis.dev/
rapidapi.com/collection/list-...
ColorCode Etsy Merchandise store:
www.etsy.com/shop/ColorCodeStore
Episode 11: Asynchronous JavaScript:
• Async JavaScript & Cal...
Episode 12: JavaScript Promises:
• JavaScript Promises -...
Episode 13: Async Await
• Async Await vs. Promis...
Using Fetch (MDN):
developer.mozilla.org/en-US/d...
Full playlist here: • 20 Things JavaScript D...
JavaScript Promises from the series "20 Things JS Developers Should Know but Probably Don't"
by ColorCode.io, Sina Jazayeri
** Announcement **
Full JavaScript Mastery course is coming! Details at the end of the video. Sign up for Early Access here:
www.colorcode.io/js-mastery

[@ColorCodeio]

Fetch API 🕺🏻👨🏻‍💻🎉 from the series 20 Things JavaScript Developers Should Know but Probably Don’t’.

[@munnakhandakar1724]

make video on event loop 🔁

[@abrorkhanabdurakhimov2461]

are try and catch methods common used than .then and ,catch methods ?

[@ClashRoyale-pt9zj]

Sooner or later you'll get even more audience, that's for sure. Your quality is kinda unique here about JS (not boring, completely understandable even for foreigners and showing a great depth of knowledge at the same time).

[@ColorCodeio]

Thank you 🙏🏼

[@d.minkov]

@@ColorCodeioWhy no videos anymore 😢

[@mohammadabbas1623]

man, i can listen to you for the whole day, so calm..

[@aboveandleon4267]

Just started my coding journey about 3 months ago. I'm so glad I found your channel, just by watching this one video I can tell that you are a phenomenal teacher that not only explains things really well, but you just make it super fun to listen to. Thank you!!

[@ColorCodeio]

Great to hear! Good luck in your journey.

[@orrodrigez5051]

I'm so happy to see you continuing with the series :D Whenever someone is stuck on one of these topics i send them right to your videos!

[@ColorCodeio]

I appreciate that

[@Poprostuoskar359]

was waiting ages for .this vid :), great work!

[@UFO_808]

Dude, I love your style of teaching and sense of humor

[@bsrat4395]

i love how sarcastic he is and i've only watched his video for like 2seconds...wow!! keep it up man

[@akashkadam2741]

I'm currently learning js and this series is a game changer, thank you ColorCode

[@dylanrh]

it's always so entertaining to watch one of your classes! thank youu

[@ColorCodeio]

Thank you!

[@jayteecollins1279]

bro im impressed how you deliver this tutorial! just subscribed

[@harikrishnanpandyan5684]

Waiting for it 🔥🔥🔥🔥

[@arthurbulat9532]

Awesome just as usual! You got the most stylish and informative tutorials

[@ColorCodeio]

🙏

[@12345678uygfcxdrtghn]

I enjoy watching your tutorials alot! Keep up the good work!

[@ColorCodeio]

🙏

[@kooroshirani]

you are the best teacher i have ever seen thank you please go on and create a lot of programming videos درود بهت آقا سینا

[@daniillitvinenko4348]

Thank you man. Excellent edition.

[@matts9063]

Really great video! Love the style, music, pacing. Awesome work and thank you for the help!

[@ColorCodeio]

Thank you!

[@nike_fake]

the best video on fetch api i have found on youtube

[@ColorCodeio]

Awesome!

[@erfanlatifi5342]

salam sina jan merci az khodet va qoli babate video hat sabke tozih dadanet va energy e ke dari kheili khafane hamishe movafagh bashi .

[@scottldn]

Consistently some of the best explained videos on these more advanced JS topics, really appreciate the time and effort being put into these!

[@ColorCodeio]

Much appreciated!

[@thebunsenburner]

Your videos are literally giving me the willpower to continue with my current assignment. Thank you! Excellent work, honestly.

[@ColorCodeio]

Don't give up. You got this 👊

[@namankeshari7332]

Your videos are soo freaking good!! Just love it!

[@awaismohsin345]

Wellcome back Boss, I was waiting ❤

[@ColorCodeio]

🤘

[@Reeko571]

I've been really liking all your videos lately! keep it up :D

[@ColorCodeio]

Thanks, will do!

[@eumm11]

awesome like always, can't wait for the dom api!

[@ColorCodeio]

Coming soon!

[@spooki6637]

I can’t believe this is free. You can charge thousands of dollars for this series truly high quality

[@johnforeverrules]

glad that you are back sensei

[@ColorCodeio]

🙏🥷

[@asmaakhalidy3775]

i loved the way you break down things and your positive energy 😊. Thank you 🙏!

[@user-mj2xg8qj5g]

the intro cracks me everytime :D

[@ugaasxnaz6926]

Please don't give up! Your videos are incredible!

[@ColorCodeio]

Thank you :)

[@khouloudbenromdhane1524]

Oh my god, i LOVE your intros and i am enjoying them, specially this one, keep it up!

[@ColorCodeio]

Thank you :)

[@user-lc9sk4em5b]

Great work, awesome explanations

[@jaygarricktheflash]

Fetch betta have my data!!! You have probably the most confortable learning enviornments. I appreciate the effort creating wonderful atmosphere and visual effects.

[@th3ja]

New to your awesome channel! Been enjoying the Js series! Btw, your teaching is top notch. Explanation and examples are crystal clear! Excellent for learning fundamentals. Keep up the great work!

[@ColorCodeio]

Awesome, thank you!

[@clash1469]

This is the best tutorial series I've seen yet. The production quality is excellent, the information is delivered in a straight-forward, understandable manner and I don't even hate all the puns. Very, very nicely done. Thank you for all the work that obviously went into this.

[@ColorCodeio]

Thank you for taking the time to tell me that :)

[@user-hc9yz8jz7d]

Please just keep uploading, you are giving your knowledge on a so special way, fun and easy, the way that nobody else does. I see you as an idol for myself👍❤

[@ColorCodeio]

Thanks! Glad to hear

[@moneyfr]

Your work is so clean. Thank you

[@ColorCodeio]

Ty!

[@vinception777]

Actually love the fact that you went to search for some TOOL with your request, I definetly did great subscribing to this channel, thanks for all the knowledge sharing in this serie, it was of great help to me :)

[@AustroPower]

Much love for the effort you put in bro, great tutorials! Keep it up! Subbed of course :)

[@ColorCodeio]

Glad it was helpful and thanks for the sub.

[@bernardsamapoh3619]

Really enjoy this episode. Thanks a lot.

[@ColorCodeio]

Glad to hear it!

[@sleepysapphire2349]

The best series on Javascript Intermediate and Advance concepts!

[@ColorCodeio]

Glad you like it!

[@AtmaniChouaib]

You content quality is just perfect, unlike other boring coding tuts, thank you this was really helpful

[@ColorCodeio]

Glad it helped!

[@solide_ahmed7907]

thank you so much i watched all the 14 series and what an awesome explanations !!

[@ColorCodeio]

Glad it was helpful! More coming soon.

[@user-uv6wv7xz4q]

need more content like this from you, a course on react will be awesome

[@kamrulislam3841]

Raw knowledges are the backbone of a great developer. Thank you for great teaching

[@sudiptasaha8905]

Finally my request for DOM API has been accepted. Really looking forward to the next episode for another great content.

[@ColorCodeio]

Coming soon!

[@vishtronium]

the best explanation for promises ,async await and fetch till date...ur channel is really underrated ...i would say its the gold standard of adv js tutorials...thanks for the 20 part series

[@ColorCodeio]

Much appreciated!

[@toms3903]

Fantastic lessons and professionally done! I stumbled over your lessons while searching on the topic of API calls. It's the best explanatoin of async vs sync, callbacks and promises related to JS I have seen so far. I took several JS courses, but haven't heard or read anyone explaining it as well as you do. And now I will start from lesson 1. Thank you for this amazing information!

[@ColorCodeio]

Thank you for very much for the comment! Glad these have been helpful for you.

[@iyegeremeriton6793]

I really, I mean really love how you explain concepts, just a minute into this video and I subscribed ✌️

[@ColorCodeio]

Fantastic. Thanks for the sub.

[@atsgames807]

i love your explining style

[@michi19935]

That was a really good and also fun tutorial - keep it up

[@ColorCodeio]

👍

[@trueWordss.]

I wish you could upload whole js course from basic to pro. The way of your explanation is just amazing.

[@maximusquietus]

I've been going through this series the past few days. Each time I went back to your channel it would play the beginning of this video. It was funny every time. 😄

[@ColorCodeio]

Welcome back! 😀

[@adamhmid]

Best js series by far. Thank you!

[@ColorCodeio]

🙏♥

[@sabu4539]

love your vids. would love to see recursion, hoisting, pure/impure functions, shallow/deep copy and memoization

[@vinaykumarkharwar177]

Great series sir, I would love if you do a video over cookies and their uses too. Thanks in advance.

[@luckydude2231]

Sina! I really have enjoyed your videos, very helpful and engaging. I love the way you present the information and your personality!

[@ColorCodeio]

Thanks lucky dude!

[@freak7053]

Hello thank you for the explanation, it was smooth and I didn't even need to go back

[@ColorCodeio]

Great!

[@jacobwwarner]

I've been binge watching your videos over the last few days. Your natural, conversational delivery is absolutely brilliant. There are so many people doing JavaScript (React) project based tutorials, but this has been really nice series on vanilla JavaScript features. It's really helped me understand promises and async-await more clearly. I'd love to see a playlist series on Node.js and web servers. I'm not sure where your technical focus is, but understanding the more basic, core functionality and features of JavaScript on the server would be of great help to me and possibly others. So, to clarify not exactly a project based tutorial video playlist of how to use Node.js, but something like this where you're focusing on specific features of Node.js. Again, I'm not sure if that aligns with your interests and expertise, but it would be nice. Thanks for the work and commitment to these video series!!

[@ColorCodeio]

Thanks so much for your comment.

[@215Leon215]

Fantastic video as usual!

[@ColorCodeio]

Thank you

[@mirjalol_shamsiddinov]

the best the best the best. this was so needed to me, tomorrow i gotta do lecture about Fetch, this video is the best. i know i used the word best a lot, cos this person deserves that

[@ColorCodeio]

Thank you, good luck with your lecture!

[@manemanoj3068]

amazing explanation bhai waiting for more ...

[@christhornham]

Excellent video! Thank you.

[@ColorCodeio]

Thanks

[@edhead76]

you're the trendiest youTube developer, man. your style is sick and your tutorials easy to follow; they make the user feel at ease. thank you for all these awesome series you've put together. I feel much more competent as a developer because of your wisdom.

[@ColorCodeio]

That's awesome, thank you!

[@Mcbaguette714]

Thank you so much for this!

[@ColorCodeio]

♥️

[@ComputerScience-pd7nd]

Great video. Thank you so much for this.

[@ColorCodeio]

You are so welcome!

[@ShubhamPatil-di1nx]

very informative and helpful

[@siddharth8911]

Best video on fetch i have ever seen. You nailed it bro 🤜🤜🤜

[@ColorCodeio]

Thanks!

[@jardagalvao]

Amazing content man. Thanks 👌

[@ColorCodeio]

♥️

[@Parhoom]

awesome! keep up the great work

[@user-kn4oi9oh4i]

You're an awesome and amazing teacher! The topics that you teach are the hardest to understand and yet you managed to explain it so well! Thank you for creating this chamnel! I shall send this series to some of my programmer friends ❤

[@user-kn4oi9oh4i]

Omg, while I'm watching the tutorial, I can't help but to be happy because Im starting to understand API which I wasn't able to understand in some other courses and tutorial that I watched months ago. You are truly an angel good sir.

[@ColorCodeio]

Awesome! Glad to hear

[@ivonnebenites3308]

Thank you, this video about the 'fetch' method helped me understand more about how to retrieve and send data from APIs using 'fetch' 🙏🏿⭐

[@imranmani2036]

I started watching your episode 3 months ago and I really learn a lot from your videos super quality content I've found with amazing explanation. I was waiting for upcoming videos and the day is come. Thanks 🙏 love from Pakistan

[@ColorCodeio]

That's great. Thank you for sharing.

[@MarcosDemian]

Really outstanding explanation. This is my first exposure to this channel and I will definitely subscribe

[@ColorCodeio]

Welcome aboard!

[@DennisMinard]

As a Test Automation Engineer, about a year ago I switched my C# brain over to JavaScript because I was building my test framework with Cypress. I've been stumbling along the whole year with no formal training, just getting by in making my tests to work even though I knew that I really didn't understand why sometimes the way I wrote the code worked, and sometimes not. Most of the tests start off calling many level nested promise-then blocks because to get the website up takes a lot of steps. Your series has been absolutely what I've needed and given me lots of ideas on how to refactor my code! Thanks so much for your series! Keep it up.

[@ColorCodeio]

Want to make sure I reply to your comment before it gets lost in the shuffle. First, I appreciate your kind words and the fact that the videos have helped you. But also this is something I personally deal with on a daily basis in my day job as an engineering manager. I’m a big advocate of Cypress and automated testing. We use it in my organization, it’s such an underrated tool for building resilient software. The unfortunate thing about it is what you mentioned: most JS developers don’t actually know how the language works without significant help of modern frameworks, or even sometimes with them. So, I feel your pain, I’m glad you’re making progress, and I wish you a ton of success. Don’t give up.

[@AurelioPita]

Great quality. i need these videos to send to junior developers. Many thanks.

[@ColorCodeio]

Thank you

[@user-di1pl3yy6o]

wow. This is so helpful and in same time so amusing that I can't even decide for myself whether it was an entertaining or educational video. Many thanks for great time ❤

[@ColorCodeio]

I'm so glad!

[@caiovidinha]

Cheers from Brazil (First text in the news API response was in portuguese, but refering to an accident that happened in Italy) Your content is saving me in my journey to become a full stack developer

[@ColorCodeio]

Glad to hear it!

[@tylerdrummond91]

You are a great teacher! Very clear examples, well paced and best of all, delivered with fantastic humour. I’m subscribed for life and looking forward to learning more from you. (Though hopefully it doesn’t take me all life to learn this language 😂).

[@ColorCodeio]

Thank you

[@jabulaniusen6329]

The starting of the video is 🔥

[@ColorCodeio]

🕺🏻🔥

[@wzt9376]

I rarely comment to be honest but hands down you are really the best teacher I have found to explain all of this. Sad we dont get as much videos as I would hope but I also get that such quality content takes time. I had so much fun learning with you I hope we see the masterclass soon. 😊

[@ColorCodeio]

Thanks for saying that. A lot more videos coming soon. I promise :)

[@endfine9230]

Thanks for such Qolity content, I finally started to understand the topic of asynchrony🥳

[@KV-gz4vr]

your content is good and well explained, thanks bro

[@voxmor]

Very well explained, thanks!

[@ColorCodeio]

🙏

[@harvard004]

Need you back Sina! How about a short on using Fetch with CURL? Jest testing/mocking videos? Time/Space complexity? Git/github? React? Love your content - has helped me tremedously.

[@Noahmetix]

Your videos are amazing, I watched a lot of videos trying to understand and this was the only one that helped me understand, Thank you for creating theses contents.

[@ColorCodeio]

Great to hear!

[@alex_blue5802]

Oh no I reached the end. I'm an experienced developer but I've learned so much about the underlying logic of JavaScript by watching this course. I hope the new one comes out soon.

[@ColorCodeio]

Glad you like the videos. They're not purely made for beginners. More coming soon.

[@aleksazlatkovic4663]

Damn, this video is superb. You are the most entertaining and charismatic person I've ever seen on the internet. I truly love your energy. Before I watched the video, I was kinda sleepy and didn't feel like studying at all. However, after the first 10 seconds of the video, you didn't only make me laugh but also made me deeply interested in the matter. Please, do keep making these videos man. You will hit 100.000 in no time. This quality of teaching, editing, and explaining, left me speechless. 😁😁😁😁😁😁😁😁

[@quent_8082]

u are the greatest teacher ever. keep up the good work.

[@ColorCodeio]

Thank you!

[@Programming162]

very nice tutorial; we love it. Please explain what a blob object and a file object are in javascript in the next tutorial.

[@lydiabylicka4175]

You and your explanations are amazing! I really enjoy your fun attitude and your being so concentrated on what you are trying to explain to us, without getting off topic! I like the fact that you're mindful of us - beginners audience - and that you don't use all professional IT jargon, but down-to-earth vocabulary, really appreciated :)

[@ColorCodeio]

Thank you

[@aftalavera]

Quality is impressive!

[@ColorCodeio]

Ty!

[@tiagdvideo]

This is the best tutprial on this topic by a huge margin. Going to look back through your other videos and I hope you do more Thanks

[@ColorCodeio]

Thanks, will do!

[@cholo2605]

Amazing video !!!! thanks chief

[@ColorCodeio]

🙏

[@techbro3085]

Another Nice Video. Very well explained. Thank You :)

[@ColorCodeio]

🤘Thank you

[@alexsokolov4537]

Brother, you are the best out there!!! Thank you!!!

[@ColorCodeio]

Appreciate that

[@bendanielspercussion]

I love your videos!! Keep it up!!

[@ColorCodeio]

Thanks Ben

[@elielberra2867]

Amazing video!!

[@TahaTopal]

It was a great series of videos I'll be waiting for DOM fundamentals. However, I like to see you covering particularly JavaScript classes (syntactic sugar) as well with its topics such as access modifiers, get-set methods and inheritance capabilities.

[@ColorCodeio]

Good ideas

[@respectableandserious]

It's Just Amazing!