Check out a free preview of the full Progressive Web Applications and Offline course:
The "Fetch API" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

Steve introduces Fetch API, a modern interface for accessing and manipulating resources that has a more flexible feature set than XMLHttpRequest.

Get Unlimited Access Now

Transcript from the "Fetch API" Lesson

[00:00:00]
>> Steve Kinney: So we have a new way of fetching data in modern browsers, and it's called fetch, right? So we don't have to actually mention XML anymore, and it's a new way of handling network requests, and it's actually really interesting. You'll be like, is this some fancy API over XML HTTP requests?

[00:00:17] It's actually not, it's actually lower level in a lot of ways, and in browsers that support fetch, XHR send actually uses fetch now. So it's like an inverted obsolescence thing, right? Now XHR actually is an abstraction over fetch, but fetch, first thing we might notice, one, I didn't have to put nine different events, open stuff and send it in some weird order.

[00:00:40] It has a promised based API, which is pretty cool, we're gonna talk about that middle line in there in a second, but it looks a lot like that dollar sign, ajax or dollar sign get json, right? That case we wouldn't have that center line with the then response json, I will talk about that we're just gonna hand over for a second.

[00:00:59] But then we get the result and we can do stuff with it, and that's really all we wanted to do with it is stuff, right? It's supported in almost all the major browsers and can be polyfilled in the ones that are not. A polyfill is basically checks to see if there's a fetch, if not, writes it in JavaScript so guess what you have now?

[00:01:16] Fetch, and it's also Node.js friendly, XMLHttpRequest doesn't exist a node, and as my kind of eluded to earlier, doesn't exist in workers, right? And a thing that we're gonna use today is workers, so this is a way to send ajax request or send network request at this point, from any of our workers and we can use it in the browser as well, cool.

[00:01:43]
>> Steve Kinney: Also, if you wanna think about the future, there is a syntax in JavaScript now called async await that I kind of briefly mentioned when we talked about promises. What async await does is you just say async before a function, and then anything that would return a promise, you prefix with the await keyword.

[00:01:59] And what will happen is normally functions run to completion in JavaScript which means, once you start a function, you're going until you either, A, return, B, throwing error, or C, hit the end of the function. This uses generators so you can pause a function come back to it later, so, in this case we look at this get data async function.

[00:02:18] All that makes this async functions putting the word async before it, boom, you're using async functions now. We will try it cuz there is the issue that the network could come back poorly and we do need to handle that error. But where it says const response, what we're gonna do is we will go ahead and make the network request.

[00:02:35] As we said before we don't know when it's coming back if it's coming back so we'll put this function on pause for a second and we'll wait. When we hear back from the network, we'll pick back up where we dropped off, and you can see that it has a very synchronous looking model to it.

[00:02:51] It goes line by line, there's none of this callbacks, or promise chaining, or anything along those lines one by one. Under the hood it is promises, but you can pretend that you don't know about promises anymore. Which now you're all yeah, just learned about promises, it's fine. So it looks like Ajax, and it's got some subtle differences right?

[00:03:13] One dollar sign Ajax or any of the other XHR based ways of doing that will reject the promise, if you get a 400 or a 500 error, which is, we got to the server and the server said go away, all right? Or the server like blew up and like nothing happened, we'll say, reject the promise, it didn't work out, fetch won't do that.

[00:03:37] You can check to see if everything okay, if you got told by the server 400, 404, 500, whatever, you can find that out, but we're still gonna count that as success. We got to the server and we made it back alive, success, right? So it'll only reject on a network failure, again we're in a workshop about building offline apps.

[00:03:59] Seems like this is annoying that it doesn't reject on a network request that was successful with the answer you didn't like, but that is for us, qualitatively different than one that didn't make it there at all, in how we handle these things. And by default Fetch does not send or receive your cookies, and we'll kind of talk a little about that later.

[00:04:21] So, Fetch can do a few more things though, one, it can get more than just XML and JSON, we can also get all sorts of other data types, we can get images, we can get other script files. We can get videos, stuff along those lines, right? Things that we, especially if you wanted to pull a script you might try something like Json p or something along those lines which is like a clever hack to try to pull this off, fetch is like no this can just be like a thing we can handle it and you can do it for real.

[00:04:52] Basically anything that you would put into like an image source attribute or script source, or anything along those lines you can also fetch and put into those tags as well and we'll see how that works. All right the three major things that you need to know, one, how the actual fetch method works.

[00:05:11] Fetch it's both the method that you can call fetch parentheses, as well as the fetch API. One has like a capital F, one has a lowercase f with some parentheses next to it. It's okay to think of them at the same thing but let's actually talk about the syntax as well as the conceptual framework around it.

[00:05:29] Two is we'll talk a little bit about configuring request objects and then working with the response objects that we get back. In a normal XHR HTTP request, you would've gotten back the JSON, the XML, really what you would have gotten was a string that you would've turned in to JSON or XML, right?

[00:05:45] This way we're actually going to get a full object that is all the parts of the response, what are the headers, so on and so forth.