This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.
Transcript from the "Fetch Requests" Lesson
[00:00:00]
>> Steve: Here's an example and we're purposely not using AJAX in this case. We'll go ahead and fetch some file called beatles.jpg. And when that happens, we do need to decode this response. Because fetch can handle more than just text, we do need to tell it how to do that.
[00:00:17] What were you expecting, right? Okay, how we handle an image is different than how we handle a string of text and we need to be aware of that and tell fetch. Under the hood, fetch actually streams the data through. So you can kinda get it as it comes in rather than waiting for all of it with the exception of JSON, because you need to have the entire object to see where it ends, and stuff along those lines.
[00:00:41] And you could write your own streaming decoder, right? You can write something as bytes come in, you wanna do stuff with it. And if you have a very specialized use case, I think. So a SendGrid, a user can upload a CSV of all of their contacts the first time they start out, right?
[00:00:59] We might want to be able to like parse those rows as they come in. That's a special use case that we could write a decoder for that, but like the thing with making promises versus receiving them. 99.99% of the time, you're usually dealing with some kind of text that's just a normal sized amount of text, some kind of image.
[00:01:18] So I'm kinda JSON, right? You can get down in the weeds if you want, but there are these helpers in here that will help you which I'll actually take a look at the rest of them in a second. So yeah, we get, in this case, the blob w hich is the image.
[00:01:32] We decode it and then it's available for us. Now you could be like hey, why can't I just take a string and put it in there? Well, we do have the full response object and we're able to do that separately from putting one of the widgets. We've loaded it outside of making an image.
[00:01:48] If you were to put the string in, then the browser would begin to load it. In this case, we have the full response object and this URL, createObjectURL will create what we would need to set into an image tag.
>> Steve: Mike, do you have any questions?
>> Mike: Yeah, well, it's not a question.
[00:02:08] I wanna be the non question person. I just wanna be clear that like for those browsers that have implemented fetch, all requests for external resources go through the same pathway that fetch uses. So when we're talking about, you can use this function called fetch and you pass an URL, that same exact pathway is used when you have a source attribute on an image tag or a script tag for downloading JavaScript.
[00:02:39] Everything kind of goes through that same pathway. So think of it like once a browser has gotten through that point, fetches go one path for getting stuff. And that is by the way, why there is this reverse Polyfield to like allow Ajax to keep working. But ultimately, it's going through the same path as fetch.
[00:02:58]
>> Steve: Put a mental bookmark on that, cuz it's gonna become useful later.