The Basics of Express Router - Requests and Responses

[00:00 - 00:15] One of the most basic concepts in Express is routing. When a user goes to a URL or makes a request to an endpoint, we need to define what happens behind the scenes when the user hits the endpoint, as well as what they get back as a response.

[00:16 - 00:33] For example, when a user hits an endpoint, we might want to query a database for information or modify data in some way, or create a new instance of something, like posting a new picture on Instagram. With Express apps, every route definition is structured like this.

[00:34 - 00:43] App.method with a path argument and a handler argument. App is an Express instance, like we have up here.

[00:44 - 01:07] The method is an HTTP request method, and in this case, it's lowercase get post, put, or anything like delete. Path is a URL path on the server, like the index path, and handler is a callback function that is run every time a user hits a specific URL, this function.

[01:08 - 01:28] The callback function takes a request, rec, and a response, res, as arguments. And you can use argument names other than rec and res in the callback function, but no matter what you call them, the first argument is always going to be the request, and the second argument is always going to be the response.

[01:29 - 01:44] In the index route handler we wrote in the last lesson, the callback function takes res.send to return the string "hello world" as a routes response. There are a bunch of other response methods for ending the request response cycle other than res.send.

[01:45 - 02:05] For example, you could call res.json to return some JSON as a response, or res.send file to send a file as a response. If we update our homepage route to return some JSON instead of "hello world", it would look something like this.

[02:06 - 02:31] Then when you restart your server and visit localhost "AAA" in your browser, you should see the JSON response. Res.json is probably the response method you'll use most often, so keep it in mind.

[02:32 - 02:40] The rec argument of the callback function is an object. This object contains information about what's coming in with the request.

[02:41 - 03:00] Some of the properties that you can find on the request object are request.body , which contains key value pairs of data submitted in the request body. Rec.method contains a string corresponding to the HTTP method of the request, like get, post, put, and so on.

[03:01 - 03:15] Rec.perams contains an object with properties mapped to the named route parameters. If there's a name parameter at the end of this user route, we can get it with rec.perams.name.

[03:16 - 03:29] Rec.query is an object containing a property for each query string parameter in the route. Rec.query is a property that's commonly utilized in route handlers.

[03:30 - 03:45] A simple example would be using the endpoint's query parameters, the key value pairs following the question mark in the URL, to dynamically generate a response. Let's take a look at an example.

[03:46 - 04:11] If we add this route handler for the awesome generator route in our index.js file, then restart our server, and in our logo host, visit awesome-generator, and pass it to query parameters name and is awesome. In this case, I have name equals Brittany and is awesome equals true.

[04:12 - 04:23] And you can see that the response says Brittany is really awesome. In our route handler, we use destructuring to grab the name and is awesome properties off of the rec.query object.

[04:24 - 04:35] Then we dynamically generate the string to send back with template strings. If is awesome is true, then the string will end with really awesome.

[04:36 - 04:51] If it's false, it'll end with not awesome. Note that we're using JSON.parse here to parse the value of the is awesome variable because query parameters always come back as strings, not bullions.

[04:52 - 05:04] So if you take a look at our local host again, you can see I have the name and is awesome query parameters here. If I changed is awesome to true, we can see it says Brittany is not awesome.

[05:05 - 05:17] We can also change the name query parameter to something other than Brittany. We can do things like an emoji, and that will come through in the response as well.

[05:18 - 05:27] This simple example shows how Express gives us a bunch of useful tools out of the box for handling HTTP requests and responses to create powerful APIs.