1.1: fetch() - Working With Data & APIs in JavaScript

Welcome to Working with Data and APIs in Javascript!

This course is for aspiring developers who want to learn how to work with data in web applications. How do you retrieve, collect, and store data? The course will be taught through a series of creating three data projects. This is the first video of the series!

1.1 This video is client-side only and covers the web fetch() API, loading image data and focusing on handling asynchronous events with Promises (async / await),

[erichreinholtz]

dude ur like the only person in this entire bloody internet who actually explained this properly

[jrichalot]

As a teacher, I can say this is mindblowingly brilliant! Oh man the effort that gets in producing a seamless and well constructed lesson like this is enormous. A massive thank you from me.

[beron_the_colossus]

Ahh, it's finally here! Thank you Mr. Shiffman for everything that you do!

[jamesa.]

Just in case you confused like I was- "rainbow.jpg" is a file on his computer, so you just navigate to an image on your computer too.

[sankai]

if only you'd have started this series about 4 years ago, it would have made my life back then so much easier!
Finally got to understand it properly :)

[brikimbran]

Due to your pavlovian training with the bell, I now smile every time I your videos start Shiff. Excellent as always.

[JoSh-yujt]

You are the god of programming tutorials. Your excitement and joy is contagious. If there was a person who could give birth to webDevs it's you. 😁👍🏻

[pablovillaverde]

I am finally able and happy to report that I was able to write code to fetch an array of images and put them in a web page. I was also succesful to fetch the text in a .txt file. I have a good understanding of HTML and CSS and a few weeks of learning Javascript, so my next goal is to construct a web page to display analytic and historic information of Formula 1. There are a couple of API's available that I can use, so wish me luck!

[landtechjobs]

This is the type of content that pushes humanity forward. Thank you for empowering others.

[joshsinger]

Such a great teacher, not even fully into the series and I can already tell I'm in good hands 👍

[axeljorgensen]

After like 5 other walkthroughs that left me feeling stupid I'm realizing how poorly almost everyone else explains this stuff. Props to you for being a good teacher. Thank you.

[softmerit]

Seriously man. This is the best tutorial training I have ever seen in YouTube so far. I'd love the way you teach, explain and illustrate. You're really doing great stuff. Thanks a lot.

[christopherburke]

I am massively appreciative for everything that you are bringing to the table in this course, as well as by way of all the other resources you provide. God bless you man.

[brysontai]

As I am new in Javascript, but this guy could deliver precise explanation about it. Subscribe is a must !

[onurbamaro]

Wow! Amazing the way you explain how the code actually works behind the scene instead of just showing it. That is real teaching!

Respect from Brazil!

[bgb]

the magic of FETCH-ing starts from 11:18 ASYNC & AWAIT --- awesome

[GazaFamilyHope]

I like how he made everything fun, even a person with no programming background can understand his explanation... I wish they taught me this way from the start

[nikolebianchini]

I just love how he reminds me of my 6th grade teacher, like he literally has that same enthusiasm! Makes me really want to learn JS. Such an awesome job at keeping your viewers attention. I kinda wander off when learning on my own lol

[clapynick]

Nice video Dan :). One thing people often forget to do with fetch is to also look at the response! HTTP-level errors (eg: 404) are still considered resolutions, and so we're assuming that the response we get is fine to work with even though we may have ran into a HTTP-level error. A fix for this is to add a quick if-statement in the first _.then()_ callback:

.then(response => {
if(!response.ok) { // check for HTTP level errors, throw if error occurred
throw new Error("Failed with HTTP code " +response.status); // reject
}
return response;
}).then(result => result.blob()).then(...

This way, any proceeding code/logic can assume that the response received is okay to work with.

Thanks again for the videos, can't wait to see more :)

[thomaswilliams]

I absolutely love your tutorials. I'm astounded by how quickly you cover the information, jumping into code, error fixing, and rambling over so much territory with joy and humor. Math homework has never been this much fun!