Fetch API Explained - Working with Data & APIs in JavaScript

The Fetch API was introduced around the same time as JavaScript ES6. It is a much cleaner promised-based API as opposed the the old XMLHttpRequest (XHR). Fetch is easy to use and does not require any third-party libraries.

Do you want to learn how to work with data in web applications? How do you retrieve, collect, and store data?

In this video we'll cover the basics of the Fetch API and learn to perform HTTP GET and POST requests with the API by demonstrating real world practical examples. You'll learn how to work with APIs and parse it's JSON or image data.

_____________________________________

📚 Learn to CODE in just a FEW months here:
_____________________________________

🛠️ Tools I use:

_____________________________________

💖 Show support!
_____________________________________

Watch Next:
_____________________________________

Connect With Me:
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #JavaScript #learntocode

[codeSTACKr]

Correction: I misspoke that fetch is part of JavaScript ES6. It is an API that was introduced about the same time as ES6 by WHATWG. Comparability is currently at 92% across browsers.

Thanks for all the support!!
Next up watch: Async JavaScript - Callbacks, Promises, Async/Await - (2019)

📚 My Favorite Web Design Books 📚
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link)

[alibarznji]

your channel is outrageously underrated.
Thank you for these amazing contents

[rafaelcalderon]

Simple, but not basic. This kind of tutorial are the best. Thank you

[Webnoob]

Amazing hand-on tutorial, straight to the point. Really enjoyed watching that. We can learn something about the Fetch API, Promises and Async and Await. Keep it going. 🙂👍

[tanercoder]

This was a very easy to understand tut. Thanks!

[DuyTran-sslu]

Great teaching method and professional approach

[emredemirel]

That's a perfect explanation of how to do API calls. Can you make a video about how to use private APIs with fetch and promises? For example how can I get and post stuff to my Firebase.

[Hunter-eujg]

Great Video. You should try to fold this into a full fledged app or blog tutorial built from the ground up.

[turnerkirk]

Love your Tutorials! I'm curious why you manually created the "i" variable and incremented it with "i++" to start at 1 instead of using the index that is given to you as the second argument in the forEach() method? (i.e. posts.forEach( (post, i) => { if (i < 9) //code block }); Is it better to do it manually for some reason? Or just personal preference? (at timestamp 6:04)

[kenturnbull]

If I am understanding what I just watched correctly, does fetch replaces the need for PHP and PDO, as well as AJAX, for moving data to and from a mySQL database.

[taiwodamilola]

how do i use what was returned from fetch (body) outside the fetch block..?

[navdeepdhamu]

God! This guy must be from web dev heaven!! Explained nicely. Please make a video on the This key word in real world usage?? I still don't understand that sh*t?

[giancarloandrebravoabanto]

what do they mean when they say: get latest updates from the server using fetch ?

[ProgrammingwithPeter]

Great video, still like to use something like axios over this because fetch with internet explorer and safari doesn't get too well.

[shubhamgupta]

how could we make each post clickable and when clicked it should fetch using id of that post and return further details of that post, plz help i despertly need that in one of my project

[pjmclenon]

hello for me the catch block for errors is useless because it doesnt tell which actual line the error is; how are you suppose to find the error? Lisa

[andresramirez]

i am trying to figure code to write for using fetch api on a json file and form validation

[kenturnbull]

This is great. The sort of stuff I need. How about a more advanced version of the template example with multiple templates and fetching.

[pratiksuryawanshi]

How to return the data ??
I am getting the undefined value

[EyeIn_The_Sky]

How the hell did you manage to call a local file using the "fetch" API? Apparently it is not supported "yet", I tried for ages and kept getting "ERR_INVALID_URL"? Did you somehow host it on port 5500 on a live web server?