Check out a free preview of the full Complete Intro to Web Development, v3 course

The "GET & POST API Data" Lesson is part of the full, Complete Intro to Web Development, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates how to use an API client to send data to an API with the POST method and retrieve data from an API using the GET method. A brief discussion regarding the types of information that can be sent with the global fetch() method is also covered in this segment.

Preview
Close

Transcript from the "GET & POST API Data" Lesson

[00:00:00]
>> I would invite you to first just do the random word of the day and ignore the word validation part and maybe do that last, that might make this easier, but that's up to you of how you wanna work this. So, here's an interesting one that we're gonna talk about right now we talked about GETs kind of implicitly, anytime that you open this page here, right?

[00:00:22]
It's actually doing what's called a get from this API, which means that I'm trying to pull information out of an API. There's other verbs of what you can do to an API. So we did GETs, but you can also do posts. So if I wanna send information to an API you need to post to the API.

[00:00:45]
So, if I open this in my browser here, it's actually not gonna know what to do with it it's gonna say some random error message. You can kind of ignore it. But basically it's just saying I don't understand what you're trying to say, right? Because we have actually haven't sent anything to the API to try and validate it.

[00:01:05]
So I'm gonna show you how to do that. In order to do that your browser actually just does gets so we're gonna have to do something besides just opening it in a browser. We have to use some other sort of program to be able to talk to the API cuz we're gonna try and send information to the API rather than pull information out of it.

[00:01:26]
So there's two programs you can use one's called Postman, and one's called Insomnia. I'm gonna use insomnia cuz that's the one that I use. So I'm gonna open a program here that I have called insomnia. But you can install Insomnia at insomnia rest client or something like that.

[00:01:51]
This is insomnia.rest if you wanna download it. Okay, but you can also look for postman that's also very popular as well, and they're both free. Let's do cools set. Okay, here we go. So I have this API client here. So what this is doing you know how we're making fetches to API's using our browser I'm gonna make this a lot bigger so you can see it This is just a client that does that and it's that's all this insomnia client does.

[00:02:38]
So we're gonna go to our documentation here. Here we're gonna and get to this, we're gonna paste that in here and we're gonna make sure this is a GET and we're gonna make sure that our body here is empty. Okay, I'm gonna send that, right? And so this is basically what I was already seeing in my browser, right?

[00:03:02]
This word ivory something like that. This is just making API requests just like our browser would do a fetch client this is basically a fetch request we're doing a fetch request kind of inside of this program. This is just a little helper to make requests against an API.

[00:03:19]
So, GET again the idea with a GET is you're pulling something out of an API you want information, you want the weather, you want the word of the day. But here with the validate word API that we're trying to do here, I wanna give it information, I wanna send it information, I wanna send it this JSON object.

[00:03:42]
So I'm going to give it some JSON of a word and I wanna say is this a valid word? So if I put cools in here and I send that oops, I need to do a post you might see some sort of 403 error here that request cannot be satisfied.

[00:03:57]
It's because your verb is wrong, right? Right now I'm trying to post or I'm trying to get somewhere where it's actually expecting a post, right? So if I say POST here and I say send then I get this back, right? So, the word cools, cools is a valid five letter word yes, right?

[00:04:16]
So I get valid word true back. Or, do I want I don't know ASDFF is that a valid word? So I'll send that and this is not a valid word, right? So, this will give me back from the API is this about whether or not. I think this will actually only validate five letter words so if I put I don't know intent or something like that, right?

[00:04:41]
This is a six letter word I think it will tell you it's not a valid word because this is only validating five letter words specifically built for this word clone. Okay, so, couple of things here with insomnia specifically you need to set this on to JSON here. I think it might default to multipart form or something like that or form URL encoded.

[00:05:08]
Right, cuz there's multiple. We've talked about how you can send JSON, you can send XML, you can send Yamo there's a bunch of stuff that you can send to API's we're using JSON today. Shouldn't need any auth headers shouldn't need any queries or anything like that. In your headers you might have content-type application/JSON you're just letting it knows by the way I'm sending JSON some API endpoints will speak multiple languages.

[00:05:34]
So you have to identify I'm sending you this kind, right? Imagine it's like a call center that you call this speaks both English and Spanish, right? And you have to press this is pressing 9 to talk to it a Spanish agent instead of an English agent, right? This is just telling us I'm sending you this in JSON.

[00:05:51]
And then here I get this back you can also look at there's all these headers that it will send back to you they'll tell you what it sent back to you. It's like okay I'm going to respond to you in JSON, it's exactly 35 letters long. I sent it at this time, and there's a bunch of stuff that Amazon sends from you as well.

[00:06:08]
So, let me show you how to do that really quick here in post let's just for a second we're gonna head back to the async await here. So, with fetch in fact let's just look at the MDN fetch. This is the way I would look at it and a pilot would look for verbs, Fetch, Yeah, so this is the documentation for fetch.

[00:06:51]
There's a lot of things that you could send with fetch. So you can send a different headers, you can send a different methods which is what we care about the moment. You can say if this is gonna be and causes a whole nother thing which we won't talk about at the moment.

[00:07:08]
Some of them are gonna require some sort of authentication mechanism, right? So, a good example is when you tweet, right, you post to some endpoint that Twitter has that allows you to tweet. But it's very critical that you only let a person that is actually that correct person tweet from their own account, right?

[00:07:29]
I shouldn't be able to tweet from your account you shouldn't be able to tweet from mine. So you have to have some sort of authentication header. We're not worrying about Auth today but that's what this would go in here and there's a bunch of other stuff like that.

[00:07:43]
But if I was trying to do a, let's say for example this was a post URL instead you'd give it a configuration object. And you would say the method here is POST normally it's done in all caps I don't think it actually has to be. And then you would also have to send it to the body.

[00:08:04]
The body being what you're trying to send to it. So if I was trying to going back to my insomnia, if I was trying to send it like word here, right? It would just be JSON.stringify. We could just put this on here and one line might be a little bit easier to read.

[00:08:27]
Right cuz body actually has to end up being a string, right? That makes sense. So I'm just sending the word intent here. So that's how you do a POST instead of a GET everything is a GET by default you have to override it to make it a POST.

[00:08:45]
POST make sense? Okay. Going back to our project, Yeah, and again if you see that 403 error, you're probably trying to get to the POST endpoint or you're trying to post to the GET endpoint. Make sure you're not sending bodies to the word of the day, right? Because it doesn't expect any information from you and it doesn't know what to do if it gets information from you.

[00:09:17]
And, by the same token make sure if you're posting to say that you are sending the body right because it expects the body every single time. So in other words if you're seeing these errors you probably didn't formulate your request correctly. And you'll frequently see something like missing authentication token or some sort of nonsense like that.

[00:09:38]
It's basically Amazon saying we don't know what to do about this. You did not formulate it the way that we expect you to.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now