Making an API Request

[00:00:00]
>> So I have coated objectively one of the greatest programs of all time here that if I click the gimme doggo button, I get a dog. This is peak programming, by the way, dog btn, dog btn is peak programming. So let's see how we made this lovely dog btn button.

[00:00:21]
I have a button here with called dog-btn. And then I have some div where I'm just gonna stick dog pictures, right? So I'm target to stick some stuff there. I'm gonna just throw this out here. I don't control Dog star CEO, by the way. It's not mine. Someone makes it, I make a donation every time I teach a class because it's awesome that there's a free dog API out there.

[00:00:47]
But if you get something back here that you don't expect I have no control of that. You have to remember that I used to work at Reddit, where it was all user generated content. I've seen what users can generate and I'm always concerned of what can come back.

[00:01:04]
Okay, so, we have the URL, which I just got from the documentation here from Dog.CEO, right? So this is a API endpoint that I can request random images from, okay? And then what I do here is I run a function called fetch. Fetch is built into your browser as part of the DOM.

[00:01:35]
And it has the ability to go out and request information from a server. This gives you back what's called a promise. This tends to be pretty difficult for people. So if this feels hard, it's okay. It took me a while to wrap my head around fully what a promise is.

[00:01:54]
But a promise is just it's an object, right? And it's an object that represents a future value that you're gonna get back from the API because you have to think about it. If I click this Gimme Doggo button, it's not instant, right? It can't be instant because the random dog is not on my computer.

[00:02:11]
This is going to Dog.CEO server. There's a delay, right? So we have to wait, this is asynchronous programming, right, it's not synchronous. If I had the dog picture already I could just instantly change it I wouldn't have to wait for anything. But because it has to go out to the Internet, ask a service like, hey, give me something and then come back.

[00:02:31]
Just takes time, right? What if the user is on really slow Internet? It takes even more time, right? So that's why we have to use promises to say, hey, I'm gonna go do something and then I have to wait for it. That's why promises are useful here. So I'm gonna call fetch here with the DOG_URL.

[00:02:55]
And what I'm going to say is, when this comes back, that's what this .then function means, do this. So you say promise .then you give it a function of something to do when it comes back. So whenever the server finally responds back, all right, here's your random dog.

[00:03:17]
I have to call response.text here. It takes a second for the browser to process this, right? So we have to do it again. Where we say return processing promise and then we'll say .then, right? So this is another promise. And then here, I finally have the finished result.

[00:03:37]
So you have to go through two promises to finally get to the information that you're looking for. It's a strange API. Typically I would have expected this to just be one, right, but with the way this works, it actually takes two promises to get through it. Finally, this processedResponse here will be a JSON string, right?

[00:03:57]
So it'll be this string here. Of unprocessed JSON, right? Oops, so I have to do JSON.parse, right? I have to turn this process response this string of HTML or sorry the string of JSON into an object. That's what this JSON.parse does, right? And then here, I'm just gonna create an element of an image tag.

[00:04:30]
I'm going to set the source of it to be the message, right? Remember here if we look at the response, the message is the picture, right? I don't know why they call it message. It's not really a message. It's an URL or an image but Dog.CEO decided to call that the message.

[00:04:52]
Okay, I set the alt text to be cute doggo because we should have an alt text because it's an image. And then I say doggos which is the name of what I called my variable here of this particular div, right, and I say append. And then I added an event listener that every time I click add new doggo it does that, right?

[00:05:21]
So now if I click this several times, right, it'll append several dog pictures here. Now I'm gonna show you how to do this faster. But I wanted to show you this the painstakingly long way to do this, right? But this is how you make a request from a server.

[00:05:46]
You call fetch to some URL that you know is an API. You're gonna get back some blob, you have to then say, this is what I expected from the blob. In this case, everything can be made text, right? So text is a safe one that always works. And then here finally I will get this response, right?

[00:06:05]
And then I can start doing things with it. Now, you might ask me what happens if there's a error? Well, I can say .catch(function(error. And I can handle the error. Like imagine if Dog.CEO went down, right? Maybe they, I don't know, mess something up and then the whole thing goes down.

[00:06:34]
You could get back an error from the API, right? So might have to show that these are like a you can do like alert. No it\'s bad, I don't know. Something like that. But that's what the catches the catch is basically, no something happened I have to respond to something going wrong between me and the server.

[00:07:06]
What I showed you here is called promise chaining by the way. You'll sometimes see that referred to it's just doing multiple promises particularly here that you have to return the promise to be able to .then again that piece of it is called promise chaining. Just to make this a little bit easier.

[00:07:24]
There's actually a response.json. So remember we did .text here before. Here I'm doing .json because I know that the server is gonna give me back json. I get to skip a step which is nice. So instead of this process response being texted I have to go say json.parse on.

[00:07:41]
I can just say response.json and this is already an object. So basically, I'm making the browser do the parsing for me, I don't have to do it manually myself. I will say 99% of time, you're just going to do response.json instead of response.text. But sometimes it's text. In which case you would have to do response.text.

[00:08:05]
So just to be super concrete about it here, here we did response.text, right? And then here with processedResponse, I had to do a JSON.parse. If I do it this way down here where I say response.json, I don't have to do the parsing part of it. All right, let's make this even easier.

[00:08:26]
I've shown you how to do this promise chaining. Let's make this 100 times more simple. This is really dense, you're learning coding for the first time we're already talking about promises, unfortunately it's unavoidable because they're everywhere. Anytime you have to wait for something, you're gonna use a promise.

[00:08:43]
But I'm going to show you how to use a sync await to make this just 100 times easier to read.