Requesting from an API

[00:00:00]
>> Brian Holt: So let's go ahead and do that, so I'm just gonna copy this HTML here that I have in the page. I'm gonna make a new folder here. New folder, this is gonna be the doggos project, and I'm gonna open that with VS Code.
>> Brian Holt: Get rid of this other one.

[00:00:26]
>> Brian Holt: Okay, doggos, I gonna go ready on Firefox, okay. So now I have my doggos project, I'm gonna create a new index.html, so save index.html, paste all that business in there
>> Brian Holt: Okay, and I'm going to go create a doggos.js.
>> Brian Holt: But let's do this as well.
>> Brian Holt: So, I just added this thing right here.

[00:00:56]
I think the important part here is the charset=UTF-8.
>> Brian Holt: Okay, once you have that going, I want you to go ahead and create a doggos.js, which we have linked down here.
>> Brian Holt: Okay, so save that as doggos.js.
>> Brian Holt: And we're gonna write some JavaScript.
>> Brian Holt: So I'm gonna go ahead and I'll close a bunch of this other stuff, and I'm going to open, in my browser here, from the desktop, doggosindex.html, okay?

[00:01:46]
I have doggos showing up there.
>> Brian Holt: And now, we're gonna write some code that's actually gonna go out, grab that information from that API, this information.
>> Brian Holt: This one? This one. It's gonna grab this from the API and it's gonna use that data, okay?
>> Brian Holt: So the first thing I'm gonna do here is I'm gonna put that URL in there, so I'm gonna say const BREEDS_URL.

[00:02:14]
So I'm gonna put this in screaming caps like we talked about earlier because this is never gonna change, right? BREEDS_URL = "https://dog.ceo/api/breeds/image/random". This is literally just a URL that your JavaScript is going to go request and get the data back from.
>> Brian Holt: Then we're gonna do something called fetch, which has nothing to do with dogs [LAUGH]

[00:02:55]
>> Brian Holt: But is appropriate in the context, so I'm gonna say fetch
>> Brian Holt: BREEDS_URL. So this is gonna go out and actually request this from the dogs.ceo server, right?
>> Brian Holt: Now as you might imagine, this is not instant, right? It takes a second to go out, connect to the internet, then go and find the server, make a request for the server.

[00:03:25]
The server then has to do something, process it and then give it back to right? That takes time, or it's the asynchronous part of Ajax, right? So you have to say, hey, go do this. Then once you get it back, .then.
>> Brian Holt: You're gonna get back some sort of response from the server.

[00:03:50]
>> Brian Holt: And actually lets just do it this way. We're gonna say run this function whenever you get back the data from the server, so your gonna get some sort of response back from the server. Okay, good so far?
>> Brian Holt: We then we have to process that information. We have to let the,

[00:04:14]
>> Brian Holt: Because if we are gonna fetch something from breeds.URL. This doesn't actually know what is gonna get back. We know what it's gonna get back. But we have to let it know what it's going to get back, right? It could be an image, it could be more JavaScript, it could be CSS, it could be a zip file.

[00:04:28]
This makes no assumption about what it's gonna get back, okay? So what I'm gonna do here is I'm gonna go into return response.json(), cuz we know this is gonna come back as JSON, right? So this is going to process this response into something that we can use.
>> Brian Holt: Okay?

[00:04:53]
With me so far?
>> Brian Holt: After it processes it, we're gonna say, .then again.
>> Brian Holt: We're gonna have our data, so we're gonna say function data. Now this data is whatever the server gave back to us, so for now I'm gonna say console.log(data), so we can see what that data looks like coming back from the server.

[00:05:23]
Just save that. I'm gonna open my console here, and dock to the bottom.
>> Brian Holt: Put in console. There we go, so I'm going to refresh this, and notice I'm getting this down here at the bottom.
>> Brian Holt: So notice this object that we're getting back from the server looks remarkably similar to what this is, right?

[00:05:51]
Spoiler, that's exactly what it is. So this is how we go out and get more information from a different server, right? Now, I'm showing you how to get it from the dogs.CEO API. This could be your own API, right? Maybe you have some sort of image service that you store all your images on.

[00:06:09]
You can just go keep requesting more images from, or this might come from the Twitter API, or the Facebook API, or there's 10 million other things. One of my favorite one is the Dark Sky API, which will give you current weather data for wherever you request it from.

[00:06:21]
That's pretty cool, right? Or dog pictures. Is there anything better? I submit maybe not.