1 00:00:00,254 --> 00:00:05,716 Let's write some Middleware right into our app to see how it works. 2 00:00:05,716 --> 00:00:11,384 I'll just make some space above our routes on line 12. 3 00:00:11,384 --> 00:00:16,085 You'll often pass Middleware is an anonymous function into the app use 4 00:00:16,085 --> 00:00:16,720 method. 5 00:00:18,650 --> 00:00:25,550 We need the request, response, and next arguments. 6 00:00:26,620 --> 00:00:28,994 Let's just do a log statement to the console. 7 00:00:35,120 --> 00:00:36,655 Then we can call next. 8 00:00:38,885 --> 00:00:41,755 We'll look more closely at the next function sin, but for 9 00:00:41,755 --> 00:00:47,305 now, it is enough to know that we're passing control forward through the app. 10 00:00:47,305 --> 00:00:51,375 You can think of next as the next step on the conveyor belt. 11 00:00:52,810 --> 00:00:57,400 This middleware runs every time a request comes into the app. 12 00:00:58,780 --> 00:01:02,092 Switch over to the browser, and refresh the page. 13 00:01:04,674 --> 00:01:08,674 Nothing changes on the page, but if we look in the console, 14 00:01:08,674 --> 00:01:11,080 you will see our message is logged. 15 00:01:13,090 --> 00:01:15,180 Now we'll add another middleware function. 16 00:01:16,830 --> 00:01:22,980 Just copy this below and change the message. 17 00:01:22,980 --> 00:01:28,088 When I save and refresh the browser, the terminal shows 18 00:01:28,088 --> 00:01:33,206 two messages in the order which they appear in the code. 19 00:01:33,206 --> 00:01:37,250 It's important to know that you can depend on the sequence. 20 00:01:37,250 --> 00:01:40,610 Earlier middleware functions, runs before the later ones. 21 00:01:41,640 --> 00:01:46,775 You can parse several functions into the same app.use method code and 22 00:01:46,775 --> 00:01:50,179 they will run in the order they're parsed in. 23 00:01:50,179 --> 00:01:54,906 Let's add another function to the first app.use. 24 00:01:54,906 --> 00:02:02,290 We'll copy the function, put a comma, and then paste. 25 00:02:02,290 --> 00:02:05,841 This will log between one and two. 26 00:02:05,841 --> 00:02:07,810 So let's say one and a half. 27 00:02:10,591 --> 00:02:14,950 Save, refresh, and check the console. 28 00:02:14,950 --> 00:02:20,837 Each middleware function printed in the order we expected. 29 00:02:20,837 --> 00:02:25,710 So we've just seen two ways to include middleware functions in the app. 30 00:02:25,710 --> 00:02:29,586 You can call the app.use as many times as you'd like, 31 00:02:29,586 --> 00:02:32,123 passing in a function to each call. 32 00:02:32,123 --> 00:02:36,690 You can also parse in many functions as you want into a single app.use call. 33 00:02:38,110 --> 00:02:42,360 Express will always run functions in the order they appear. 34 00:02:42,360 --> 00:02:47,410 Let's trigger the middle word based on the URL or route that a user visits. 35 00:02:47,410 --> 00:02:53,050 We can do this by placing the URL as the first argument to the app.use method. 36 00:02:54,280 --> 00:02:57,486 Let's wrap the first app.use, two slash one. 37 00:03:03,124 --> 00:03:04,975 Refreshing the browser, 38 00:03:04,975 --> 00:03:09,190 we see that the terminal only showed the string two logged. 39 00:03:10,710 --> 00:03:14,590 That's because this middleware runs with every request no matter what. 40 00:03:16,160 --> 00:03:23,860 If I clear the console and go to /one in the browser, You see an error. 41 00:03:25,400 --> 00:03:30,523 As we've seen, that just means we haven't set up a route handler for this URL. 42 00:03:30,523 --> 00:03:34,478 But what we're really interested in, is the console at this point. 43 00:03:34,478 --> 00:03:40,000 Switching back to the console, we have One, One and a half, and Two. 44 00:03:41,070 --> 00:03:44,992 You can also pass information between functions. 45 00:03:44,992 --> 00:03:49,244 I'll delete these routes, And 46 00:03:49,244 --> 00:03:54,729 these second middleware arguments for now. 47 00:03:54,729 --> 00:03:58,957 Let's use the request object to pass the dates from the first middleware function 48 00:03:58,957 --> 00:04:01,720 to the next middleware function. 49 00:04:01,720 --> 00:04:07,177 In the first function, we'll need to create a property called message. 50 00:04:07,177 --> 00:04:12,819 Let's assign the string 'This message made it!'. 51 00:04:15,810 --> 00:04:18,162 Message isn't a special name. 52 00:04:18,162 --> 00:04:22,220 I could call it anything or add more properties if I wanted. 53 00:04:22,220 --> 00:04:26,670 The idea here Is that we'll use the property to pass 54 00:04:26,670 --> 00:04:30,250 as message from one middleware function to the next. 55 00:04:30,250 --> 00:04:35,350 In the next middleware function I can read the message back 56 00:04:35,350 --> 00:04:36,850 from the property and log it out. 57 00:04:42,050 --> 00:04:43,623 Let me check to see if it works. 58 00:04:45,665 --> 00:04:47,303 And it does. 59 00:04:47,303 --> 00:04:51,308 We just modified the request object for the first time. 60 00:04:51,308 --> 00:04:54,063 That's a lot of what gives middleware its power. 61 00:04:54,063 --> 00:04:58,280 Allowing us to gather and compute data and send it back to the client. 62 00:04:58,280 --> 00:05:03,690 BodyParser for example, creates a body property on the request object, 63 00:05:03,690 --> 00:05:06,960 and then we can use that to respond to the client. 64 00:05:06,960 --> 00:05:10,510 Let's take a closer look at the next function in the next video.