Express JS #5 - Post Requests

now that you all know how to retrieve data from the express API using get requests I'm going to show you how you can create data using what is called a post request now let's say for example you want to create a resource on the backend and that backend will save it to a database or save it to a file or save it just somewhere doesn't matter where it is you want to create let's say a user so your client your front end application will have a user form they fill out their username password email and other additional Fields once they are ready they will click that sign up button when you click that sign up button it will make an API request to the backend doesn't have to be necessarily an Express API server it can be really any API server that's running that handles that post request okay so the front end the client side would make an HTTP request a post request to the server okay once the server receives that request the server needs to obviously be able to grab the data that we're trying to send from the client side to the back end and that data that you're sending is known as a request body so whenever you make post requests the data that you want to send to the backend server you send it via a payload or a request body you use those terms synonymously so payload request body are interchangeable terms the backend will then take that data and it will perform the necessary operations in need so typically validation if it need to do additional parsing if it needs to make sure that it has the proper Fields it will do all that stuff before it can proceed with either saving it to a database or saving it to some external API Source whatever it is I need to do once it's done saving that record to the database or somewhere it will return a 2011 response which or 2011 status code which typically just means that the resource was created sometimes it might also return the new record that was created so that way if you need to use it on the client side for whatever reason you can do so now before we actually can make any post requests we do need an HTTP client to actually uh make those requests and also be able to send a request body to our Express API because on the browser there's no built-in tool that enables you to send requests bodies unless if you to write the code in the JavaScript console but we're not going to do that um so there are different uh clients that you can use to interact with your API So currently we've just been using the browser which we limited to just making get requests by simply typing in the address in the address bar we want to be able to make post requests where we can send actual data okay so you can use tools like Postman there's also Hopscotch which is an alternative to postman for for this tutorial I'm going to keep things simple I'm going to keep everything inside vs code and we're going to install this extension so on the left hand side or um wherever you have this extensions icon just click on extensions and you want to search for an extension called Thunder client and thunder client is a very lightweight rest API tool for VSS code it's integrated in there you just have to install it and it allows you to make API calls to your Express server so I'll go ahead and click install Okay and then I'm going to go just close this and then let's go ahead on the left hand side you should see the Thunder client appear right over here as an icon that's the Thunder client and I'll click on it and now what I can do is I can create a new request by clicking on the new request button and you can see now it looks it it looks kind of identical to to postman if you've used it before or really any other rest client but we have an address bar where we can uh type in the address or the URL that we want to make requests to so I'll type in Local Host Port 3000 / API users I'll make a get request so I can select this drop down and select get and I'll click Send and you can see that it gives us back the data just like that okay and we're going to use this client to switch between different types of HTTP requests that we want to make so we'll switch from get to post and then in later videos when I show you how to handle put requests or delete requests we will switch to these HTTP requests as well okay so let's close this out just wanted to show you all how to set up thunder client so now what I'm going to do is set up our post request to be able to create a brand new user so what I'm going to do is right underneath my uh API users route I'll go ahead and reference the app variable and since I want to register a post request I'm going to go ahead and call the Post method so this method is very similar to all the other HTTP verb methods such as get put delete uh it takes in a path so over here I'm going to go and pass inapi users now you're probably wondering well should we be able to reuse the path and the answer is yes because you have a different HTTP request type being used so this is for post request and the one over here is for get requests okay when your HTTP client is making requests the server knows if it's making a get or a post request so that way there's no confliction between these two different types of requests despite the route being the same so we'll also pass in in a request and response or we'll pass in the request Handler function which will have these two arguments request and response and then for now I will just return a response. send I'll just pass in a 200 status code or I'll just pass in 200 and I'll just console log the request body just so that we can see what our data is looking like when we send it from the client so let's go back to thunder client so I'll click on the Thunder icon I'll click on new request and up top where you see gets just click on that drop down and select post and we're going to change the url and we're going to type in Local Host Port 3000 API users okay so once again we have uh we have two different types of HTTP uh methods but they both use the same path okay so whenever I call a post request to API users I don't even need to send any data for now it's just going to give me back a 200 status code now I can go into the body tab in my thunder client and I can select Json if I want to send Json so if I try to send a request body let's see what happens let's click Send so in the console log for our in our terminal you can see that right now it's actually logging undefined on I try to send it again it still logs undefined and you're probably wondering well what's going on with this why is it undefined well the reason why it's undefined is because right now by default Express is not parsing those request bodies that are coming in so whenever I am sending Json to the express server the headers set the content type to application Json Express doesn't parse those payloads by default so we need to tell Express to do so now this is going to require us to use a middleware so this is kind of like a brief little intro to middlewares but don't worry so much about it once we actually get into the topic of middlewares you'll better understand how they work but all of middleware is is just a function that is going to be invoked before uh certain API requests are being handled so in my case I want to make sure that right before my post request is being received I want to make sure that that middleware that parses the Json payload accordingly is being invoked so you typically want to register your middleware as early as possible so the best way to do it is doing it up top after you create your Express app instance so I'm going to go ahead and reference app and I'm going to call the use method and this is the method that you use to register middleware and the middleware that we're going to register is actually already built into Express so I can just reference Express and call this Json method okay so now you can even read over here it looks at requests where the content type header matches the type option so in this case this is express. Json there's also other um uh there's also other things that you can uh parse to like let's say if you're trying to send text or if you're trying to send uh URL encoded or raw data so hopefully that makes sense so in our case we'll keep it as Json and let's go ahead and see what happens if I send the request again so let's go back into our ther client I'll click Send I'll just click it again and now watch this you can see that in the console it is logging that request that that request body that I am sending to the express server and I can literally add as many fields as I want I can add a display name let's do Anson the dev click Send again and you can see that it is is being logged right over here okay perfect all right cool now let's go ahead and actually do something with the data so like I said right now we don't have an actual database so all I'm going to do is just push this user to the array so uh to do that what we'll do is we'll assume that the request body is valid but then in the next section I'm going to show you how we can actually validate the request body so I'm going to go ahead and create a variable called new user equals so we need to actually grab all of the fields from the request body but we also need to attach an ID to the request body and once again since we don't have a database to manage our uh IDs because typically the database is responsible for generating those IDs all I'm going to do is just take uh the last element the last user in the mock user array uh take the ID of that last user add one to it and assign that to the new user the new new user's ID okay so what I'll do is I'll first do this mock users so I'm just going to reference mock users um and then I'm going to want to get the last element so mock users. length minus one okay so the length of our array is going to be 7 and I want to reference the last element so that's going to be at index 6 because remember arrays are indexed at Aras are zero and next and then we're going to reference ID and just add one I know this is kind of like a hacky way to do it but I just want I'm just doing it just for a very simple example and then what I'll do is I'm just going to sign uh or I'm going to destructure the request body so I'm going to destructure body from the request object and then I'll just simply use the spreader operator on the body object to take all of the fields from the body object and unpack it into this new object that I am creating that is assigned to new user and then I'm just then going to uh reference mock users. push new user and then I'm going to go and just return the new user and remember we want to send back a status code of 200 or I'm sorry 2011 because if I were to send this right now you you can see that I do get back the user but it sends back sends me back a 200 and for good practice you want to make sure the post request sends a 2011 so I can just set response. status call the status method and pass into a one and then call do send so we did this in an earlier part of the tutorial where we were making get requests right over here okay so let's go ahead and test this out click Send all right so you can see whenever I click send it will just keep creating a new user and it'll send it back to uh the client which is this uh Thunder client as a response and it has the ID Auto incremented so that's pretty cool

Channel: Anson the Developer

Views: 4,083

Keywords: express js, express js series, express js playlist, post requests

Id: V2_lSMpp2b8

Length: 13min 18sec (798 seconds)

Published: Mon Feb 12 2024