Introduction to Fetch

[00:00:00]
>> Mike North: Now that we have data coming from the correct place, we can start to move away from hardcoded data and using Fetch as a modern browser API that allows us to go and grab remote resources and make use of them. For those of you who may not have used it, it kinda behaves like Ajax.

[00:00:22]
But it's more powerful in several ways. For example, you can grab a video stream and start to buffer it. It's not limited to textual content. And it's not even limited to one shot request and responses. You can stream data using Fetch. Now, we're gonna be using it in a way that looks very similar to how you'd use Ajax, but if you're interested in learning more, the PWA course I teach on Frontend Masters that Steve Kenny and I did, that has a good section on Fetch.

[00:00:59]
So let's start with, let's start by looking at a file called API_EXAMPLES. And if you're using VS Code, this will be more than a text file. What you'll be able to do is click on, sorry, if you're using VS Code and the extensions that were part of this workspace and that were installed, and you clicked install all, then you should see this.

[00:01:29]
And you should be able to click Send Request, and you'll get back a list of users. So if you've ever used postman, or something like this, or curl from the command line to make a request and print the response on the screen. This is kind of like that, baked into your editor.

[00:01:48]
So we could check out the list of all teams. And there are all the headers that come back, and here are all of the teams. Couple more than what we had in our example data. So we're gonna use this as our reference, and start making requests based on these URLs.

[00:02:06]
And every URL you will need to hit is in this API_EXAMPLES file, including down here we've got a POST and a DELETE request. Keep in mind, these will alter your DB.JSON file. But don't worry, if you screw that up, you can always just revert the changes, stop your server, restart it, and you'll be good to go.

[00:02:27]
So let's think about /api/teams. Seems like we should use that in the teams ref, right? That's the list of teams. First thing I'm gonna do is blow away this thing we created in the last step, the sample array of teams. We're gonna replace this with a promise that resolves to something very similar.

[00:02:52]
Second thing I'm gonna do is import Fetch. And you may be wondering, I just told you this is a browser API, and why would I be doing this? Two reasons. Number one, IE11, which unfortunately, because it was the default browser that shipped with Windows 8, it will be continued, supported browser until Windows 8 is sunset, and that's in 2022.

[00:03:20]
So some of you may need to worry about this for a while. The second reason is, later, we're going to server render this app. We're gonna use Ember's technology called FastBoot, and there is no Fetch API in Node.js but there's a package that's already part of this project.

[00:03:43]
It was there when you started it. It's called EmberFetch, and this provides a single facade that works exactly the way that Fetch works in a browser, in a modern browser. And when you're doing server rendered stuff, it'll use Node's HTTP libraries to do exactly the same thing. So that's two reasons, legacy browsers and isomorphic code, which we'll talk about a little bit later.

[00:04:12]
So we've got Fetch and now we can, because we can either return an array or a promise that resolves to an array, and we should get a similar result. We can just do this. const response = await fetch('/api/teams');. Same origin request, makes this easy, right? And then we have to, so this is sort of a generic response, we need to decode the body of this response into JSON, which is actually another async function.

[00:04:47]
Return,
>> Mike North: Could do that. And because returning a promise is fair game, we're gonna still have to await it in this hook. So this will work.