Handling POST requests with Express and Node.js
https://blog.kevinchisholm.com/?s=exp...
The example code for this video can be cloned here: https://github.com/kevinchisholm/hand...
In this video, I’ll explain how to handle POST requests with Express and Node.js.
If you’d like to follow along with the code examples, please clone this github repo.
First, let’s take a quick look at a little demo in the page I set up. On the left side I’ve got my terminal, and I’m going to start my local web server with the command npm start. I get a message saying my server’s running, I just point my browser to localhost300, so I’ll do just that.
And I get this form. I can type first name, and last name, and then when I click submit, in the bottom of the form I get a message showing me what I entered, and on the left side, if you’ll notice the terminal, when I submit data in the form, it shows me in the terminal, in the console, what I entered; I’m reposting the page.
So just to demo kind of what’s going on in the demonstration, we’re basically making a round trip. We’re posting some data to the server, on the left side you see the server gets the data, and then in the webpage, it page comes back to us.
Let’s actually look at the code that’s driving all this. In the file server.js, I start out by creating a few variables. The first one is express and that’s a reference to the express module. The second one is app, and that’s an instance of express. Third one is bodyparser; that’s a reference to the body parser module which we’ll need and we’ll talk about in a minute. And then a path, which is a reference to the path module, which we’ll also talk about in a minute.
So first let’s talk about this line here. So we want to support the ability to return jason, and if we want to do that we need to use bodyparser. This is the module required up here, so we’re telling the app that we want to use bodyparser.jason, and that just gives us the ability to return jason in our response.
Next up we tell app that we want to use this bodyparser.urlencoded method, and that just allows us to support parsing of application of form data. Not so important to dig into, but it’s good to have if you’re going to work with post data.
Next up, we tell app, which is an instance of express, that this is a static folder. This is the root of our web folder, where all the requests are going to come in.
Finally, up here, we are saying hey, we want to set up a handler for our post requests, so we’re telling the app whenever we get a post request, whenever there’s an http request, of the verb post, and it’s to this route/form, this is what we want to happen. This is the callback.
So in this callback, we have two arguments: request and response. Request is an object that presents the actual http request, and response is an object that allows us to work with our response, to craft our response. So inside the callback, first we’re setting the header to the content type application jason, because we want to return jason… in this example we want to return jason.
Next I go to setTimout. The setTimeout is literally for demonstration purposes. That’s it, because what’s inside the timeout right here happens pretty quickly, and it’s hard to see when we’re demonstrating it.
So I just set a timeout for 1,000 milliseconds or one second, to just slow things down and allow us to see what’s happening. And then, in the console, we’re going to output what’s been posted.
So any time we make a post request to this route, we’re going to say, hey, you posted first name = this, and last name = that. And by the way, the actual response that we’re sending, we’re doing that by using the send method of the response object, and we’re sending it a string, a string to find this object.
So right here is the object. An object is two properties: first name, last name. We’re getting that information from the request. So we’re getting the actual post request, getting the body of it, we’re getting the first name, body, and last name.
And we’re crafting an object here and then we’re stringafying it, because we want to send back actual strings, actual text.
But this is where our round trip comes in. The data comes in here, this request object right here, and then we’re using that request object and assigning it to response body and crafting a response.
Then down here, we tell the app to listen to port 3000. We say hey, start listening for http requests, and once you’ve started run this function. It’s a callback that runs once, to say once you start listening, execute this. And this is a message saying the server is running, point your browser to localhost: 3000.
So let’s see all this in action. We kinda saw it already, but now that we’ve walked through that....
(very sorry: the remaining transcription is missing due to YouTube's maximum text limit)