Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,210 --> 00:00:03,880
So, after all the talk about middleware,
2
00:00:03,880 --> 00:00:05,290
let's now actually go ahead and
3
00:00:05,290 --> 00:00:07,463
create our own middleware functions.
4
00:00:09,000 --> 00:00:10,810
And again, remember that we actually
5
00:00:10,810 --> 00:00:12,930
already used middleware before.
6
00:00:12,930 --> 00:00:14,380
So let's take a look at that.
7
00:00:15,730 --> 00:00:18,350
And, somewhere up here.
8
00:00:18,350 --> 00:00:20,450
And so, you see that in order
9
00:00:20,450 --> 00:00:24,530
to use middleware, we used app dot use, okay?
10
00:00:24,530 --> 00:00:28,190
So, the use method is the one that we use in order to,
11
00:00:28,190 --> 00:00:30,030
yeah, actually use middleware.
12
00:00:30,030 --> 00:00:33,800
So, add middleware to our middleware stack, okay?
13
00:00:33,800 --> 00:00:37,520
So this express dot json here calling this json method
14
00:00:37,520 --> 00:00:39,620
basically returns a function, okay?
15
00:00:39,620 --> 00:00:42,650
And so that function is then added to the middleware stack.
16
00:00:42,650 --> 00:00:43,900
And so, similar to that,
17
00:00:43,900 --> 00:00:46,220
we can create our own middleware function.
18
00:00:46,220 --> 00:00:48,190
So, let's do that now.
19
00:00:48,190 --> 00:00:51,283
And so, of course, we still need to use app dot use.
20
00:00:53,840 --> 00:00:56,810
Okay, and so now, in here, all we have to do is to path
21
00:00:56,810 --> 00:01:00,820
in our function that we want to add to the middleware stack.
22
00:01:00,820 --> 00:01:02,730
So, remember from the last video that,
23
00:01:02,730 --> 00:01:04,519
of course, in each middleware function,
24
00:01:04,519 --> 00:01:08,340
we have access to the request and the response, okay?
25
00:01:08,340 --> 00:01:10,663
But also, we have the next function.
26
00:01:11,890 --> 00:01:15,060
And so, just like this, we edit as a third argument
27
00:01:15,060 --> 00:01:17,580
to this middleware function, okay?
28
00:01:17,580 --> 00:01:19,970
And like this, express then knows
29
00:01:19,970 --> 00:01:22,370
that we are actually defining a middleware here.
30
00:01:23,270 --> 00:01:24,820
Alright.
31
00:01:24,820 --> 00:01:26,160
Now, just like before, actually,
32
00:01:26,160 --> 00:01:28,920
we could have called this argument here something else,
33
00:01:28,920 --> 00:01:32,950
like X, or N, or, it doesn't really matter.
34
00:01:32,950 --> 00:01:34,270
What matters is that it's the
35
00:01:34,270 --> 00:01:36,540
third argument to this function.
36
00:01:36,540 --> 00:01:39,360
So express basically passes the next function
37
00:01:39,360 --> 00:01:42,780
as the third argument into this middleware function.
38
00:01:42,780 --> 00:01:44,500
And we can then call it whatever we want.
39
00:01:44,500 --> 00:01:47,720
But again, next is really the convention in express,
40
00:01:47,720 --> 00:01:49,420
and in order to avoid confusion,
41
00:01:49,420 --> 00:01:52,450
we always use this name, okay?
42
00:01:52,450 --> 00:01:54,250
And the same for request and response,
43
00:01:54,250 --> 00:01:57,590
as I mentioned before, we could call them something else.
44
00:01:57,590 --> 00:02:00,410
But the convention is to call them like this.
45
00:02:00,410 --> 00:02:02,470
Anyway, let's just log something to the console,
46
00:02:02,470 --> 00:02:04,080
here in this middleware function,
47
00:02:04,080 --> 00:02:06,650
just so that we have some code to actually run
48
00:02:06,650 --> 00:02:08,423
each time there is a new request.
49
00:02:09,280 --> 00:02:10,410
Let's say hello
50
00:02:12,510 --> 00:02:13,753
from the middleware.
51
00:02:15,850 --> 00:02:18,980
And add some emoji here, again, to make it pop a little bit.
52
00:02:18,980 --> 00:02:20,133
I really like that.
53
00:02:21,876 --> 00:02:22,709
And what happens here?
54
00:02:22,709 --> 00:02:23,750
Ah, right.
55
00:02:23,750 --> 00:02:26,210
So that is the code that we want to execute here.
56
00:02:26,210 --> 00:02:28,690
And now, just as we talked in the last video,
57
00:02:28,690 --> 00:02:31,780
we actually need to call the next function, okay?
58
00:02:31,780 --> 00:02:33,510
And if we didn't call next here,
59
00:02:33,510 --> 00:02:35,570
well, then the request/response cycle
60
00:02:35,570 --> 00:02:37,750
would really be stuck at this point.
61
00:02:37,750 --> 00:02:39,290
We wouldn't be able to move on,
62
00:02:39,290 --> 00:02:43,090
and we would never ever send back a response to the client.
63
00:02:43,090 --> 00:02:45,660
So I can't stress enough how important it is
64
00:02:45,660 --> 00:02:48,773
to never forget to use next in all of your middleware.
65
00:02:50,230 --> 00:02:52,290
Okay, and it's as simple as that.
66
00:02:52,290 --> 00:02:55,880
All we have to do is to specify next.
67
00:02:55,880 --> 00:02:57,330
So, this argument here.
68
00:02:57,330 --> 00:02:59,820
And then actually call that function like this.
69
00:02:59,820 --> 00:03:00,653
Okay.
70
00:03:00,653 --> 00:03:03,087
And with that, we are actually ready to test it out.
71
00:03:03,087 --> 00:03:04,370
And all we have to do is
72
00:03:04,370 --> 00:03:06,763
to send a simple request to our API.
73
00:03:08,900 --> 00:03:11,270
So, here is the API.
74
00:03:11,270 --> 00:03:13,083
Let's close up this one here.
75
00:03:14,210 --> 00:03:16,560
And so, it doesn't really matter, because this,
76
00:03:16,560 --> 00:03:18,980
of course, applies to every single request.
77
00:03:18,980 --> 00:03:20,420
So, let's go back.
78
00:03:20,420 --> 00:03:22,760
And indeed, we have hello from the middleware
79
00:03:22,760 --> 00:03:25,400
logged to our console, okay?
80
00:03:25,400 --> 00:03:26,313
So, great.
81
00:03:27,240 --> 00:03:30,140
And I wanted to quickly touch on what I just said before,
82
00:03:30,140 --> 00:03:32,150
which is that this middleware here applies
83
00:03:32,150 --> 00:03:35,160
to each and every single request, okay?
84
00:03:35,160 --> 00:03:37,600
And that's because we didn't specify any route.
85
00:03:37,600 --> 00:03:40,850
So, remember that before I said that all route handlers
86
00:03:40,850 --> 00:03:43,710
here are actually kind of middleware themselves.
87
00:03:43,710 --> 00:03:45,200
They are simply middleware functions
88
00:03:45,200 --> 00:03:47,790
that only apply for a certain URL.
89
00:03:47,790 --> 00:03:50,010
So a certain route, okay.
90
00:03:50,010 --> 00:03:52,980
But these more simple middleware functions
91
00:03:52,980 --> 00:03:54,900
that we define up here,
92
00:03:54,900 --> 00:03:58,080
well, they are going to apply to every single request.
93
00:03:58,080 --> 00:04:00,070
At least, if the route handler comes
94
00:04:00,070 --> 00:04:01,820
before this middleware.
95
00:04:01,820 --> 00:04:04,250
So let me actually show you something.
96
00:04:04,250 --> 00:04:06,610
And I'm going to cut it from here and
97
00:04:06,610 --> 00:04:08,670
now actually put it here
98
00:04:08,670 --> 00:04:10,563
after this route handler.
99
00:04:12,240 --> 00:04:14,910
So what do you think is going to happen now
100
00:04:14,910 --> 00:04:18,550
when I make a call to this route?
101
00:04:18,550 --> 00:04:20,899
So let's see what happens.
102
00:04:20,899 --> 00:04:24,040
So this exact route, so the one that I just showed you,
103
00:04:24,040 --> 00:04:25,640
let me send the request to that.
104
00:04:26,520 --> 00:04:29,420
And now let's go back and now we don't have
105
00:04:29,420 --> 00:04:31,000
hello from the middleware.
106
00:04:31,000 --> 00:04:32,460
So, why is that?
107
00:04:32,460 --> 00:04:34,930
Well, simply because this middleware,
108
00:04:34,930 --> 00:04:36,580
so this route handler here,
109
00:04:36,580 --> 00:04:40,200
it comes before this middleware function that we have here.
110
00:04:40,200 --> 00:04:42,330
And this route handler, which in this case,
111
00:04:42,330 --> 00:04:46,570
is get all tours, actually ends the request response cycle.
112
00:04:46,570 --> 00:04:48,130
So lets take a look at that.
113
00:04:48,130 --> 00:04:49,763
So we have get all tours.
114
00:04:51,220 --> 00:04:52,600
So, where is that?
115
00:04:52,600 --> 00:04:56,100
Yeah, so here is the function and by sending a result
116
00:04:56,100 --> 00:04:58,550
with res dot json, we actually
117
00:04:58,550 --> 00:05:01,090
end the request response cycle.
118
00:05:01,090 --> 00:05:03,440
And so the next middleware in the stack,
119
00:05:03,440 --> 00:05:05,430
which in this case, is
120
00:05:06,280 --> 00:05:09,700
is this one, so our custom one will then not be called.
121
00:05:09,700 --> 00:05:13,300
Again, because the cycle has already finished, okay.
122
00:05:13,300 --> 00:05:15,930
So make sure to understand that this order
123
00:05:15,930 --> 00:05:18,200
really matters a lot in express, okay.
124
00:05:18,200 --> 00:05:20,490
It's fundamental to understand
125
00:05:20,490 --> 00:05:23,590
that this is how express apps work, okay.
126
00:05:23,590 --> 00:05:25,760
So, in order to kind of test that,
127
00:05:25,760 --> 00:05:27,730
let's try to see what happens when
128
00:05:27,730 --> 00:05:30,190
we do a request to this route.
129
00:05:30,190 --> 00:05:33,173
So to get tour update tour or delete tour.
130
00:05:34,900 --> 00:05:38,090
So lets do this one, send the request here,
131
00:05:38,090 --> 00:05:41,150
and let's go back and now we have
132
00:05:41,150 --> 00:05:42,740
hello from the middleware.
133
00:05:42,740 --> 00:05:45,180
So that is actually what we expected, right?
134
00:05:45,180 --> 00:05:48,120
So that is because of course, this middleware here
135
00:05:48,120 --> 00:05:50,630
now is before the route handler.
136
00:05:50,630 --> 00:05:53,390
And so it is, of course, part of the middleware stack
137
00:05:53,390 --> 00:05:57,050
that get executed before the request response cycle ends.
138
00:05:57,050 --> 00:05:58,673
Alright, make sense?
139
00:06:00,630 --> 00:06:03,250
So, let's take that back and so usually
140
00:06:03,250 --> 00:06:05,560
we define this kind of global middleware
141
00:06:05,560 --> 00:06:08,183
here before all our route handlers.
142
00:06:09,500 --> 00:06:11,830
Alright, so this is one very simple
143
00:06:11,830 --> 00:06:15,500
middleware function that we just defined to run some code.
144
00:06:15,500 --> 00:06:17,490
But lets actually do another one.
145
00:06:17,490 --> 00:06:18,920
And of course, we can have as many
146
00:06:18,920 --> 00:06:21,800
middleware functions as we like.
147
00:06:21,800 --> 00:06:23,170
And this time we actually want to
148
00:06:23,170 --> 00:06:25,053
manipulate the request object.
149
00:06:27,040 --> 00:06:29,090
So the signature here is always the same,
150
00:06:29,090 --> 00:06:31,343
always request, response, and next.
151
00:06:32,890 --> 00:06:35,370
And now let's actually manipulate the request.
152
00:06:35,370 --> 00:06:36,800
All we want to do in this case,
153
00:06:36,800 --> 00:06:39,990
is to add the current time to the request.
154
00:06:39,990 --> 00:06:42,110
So we can simply define a property on the
155
00:06:42,110 --> 00:06:44,963
request object called request time.
156
00:06:47,480 --> 00:06:50,300
And then set it to a
157
00:06:50,300 --> 00:06:51,210
new date,
158
00:06:51,210 --> 00:06:54,300
which basically translates to right now.
159
00:06:54,300 --> 00:06:57,230
And then we can use a very handy date function,
160
00:06:57,230 --> 00:06:59,670
which is called to ISO string,
161
00:06:59,670 --> 00:07:01,520
which will then convert it into a nice,
162
00:07:01,520 --> 00:07:03,330
readable string for us.
163
00:07:03,330 --> 00:07:05,930
So, let's pretend we have some route handler
164
00:07:05,930 --> 00:07:07,860
that really needs the information about
165
00:07:07,860 --> 00:07:10,310
when exactly the request happens.
166
00:07:10,310 --> 00:07:12,860
And so the very simple solution is to simply add
167
00:07:12,860 --> 00:07:16,470
something like this to a request using middleware.
168
00:07:16,470 --> 00:07:17,520
Alright?
169
00:07:17,520 --> 00:07:18,960
Now, don't forget, of course,
170
00:07:18,960 --> 00:07:21,890
to call the next middleware in the stack, okay.
171
00:07:21,890 --> 00:07:26,830
So right now, we have request, time on all requests.
172
00:07:26,830 --> 00:07:29,800
So we can now use some route handler here,
173
00:07:29,800 --> 00:07:32,850
for example, (mumbles) for getting all the tours
174
00:07:32,850 --> 00:07:35,163
to simply log that for us to the console.
175
00:07:36,640 --> 00:07:40,583
So console dot log, and its actually request time.
176
00:07:42,130 --> 00:07:46,170
Okay, or we could even sent this in the response as well.
177
00:07:46,170 --> 00:07:47,460
Let me just test that.
178
00:07:47,460 --> 00:07:49,590
And let's just call this one requested at
179
00:07:52,670 --> 00:07:56,830
and req dot request time.
180
00:07:56,830 --> 00:07:57,870
That's the one.
181
00:07:57,870 --> 00:08:00,160
And so, yeah, let's go ahead and figure this one out.
182
00:08:00,160 --> 00:08:02,840
So our middleware is correct, right?
183
00:08:02,840 --> 00:08:05,870
Yeah, so we call next, when we're done,
184
00:08:05,870 --> 00:08:07,413
and so let's test this now.
185
00:08:08,450 --> 00:08:10,273
Remember it's on get all tours.
186
00:08:11,310 --> 00:08:14,000
And when we go back now, or when we go up,
187
00:08:14,000 --> 00:08:16,420
well, it should actually be here.
188
00:08:16,420 --> 00:08:17,973
So, what is wrong here?
189
00:08:18,920 --> 00:08:20,060
You see that down here,
190
00:08:20,060 --> 00:08:22,430
we actually just logged a function and yeah,
191
00:08:22,430 --> 00:08:27,230
of course, we didn't actually call the two ISO strings.
192
00:08:27,230 --> 00:08:31,000
So it's a method we have to call it.
193
00:08:31,000 --> 00:08:33,929
So give it a save, try it again.
194
00:08:33,929 --> 00:08:37,789
And now we have requested at and then today's date.
195
00:08:37,789 --> 00:08:38,740
So, perfect.
196
00:08:38,740 --> 00:08:40,860
That came from our middleware.
197
00:08:40,860 --> 00:08:44,980
So simply because we added that property to our request.
198
00:08:44,980 --> 00:08:46,250
Great.
199
00:08:46,250 --> 00:08:49,280
So I hope that with that, you made a great step forward
200
00:08:49,280 --> 00:08:52,730
in order to really understand how Node app work,
201
00:08:52,730 --> 00:08:53,810
how middleware works,
202
00:08:53,810 --> 00:08:56,370
how the entire request response cycle works,
203
00:08:56,370 --> 00:08:58,300
because that really is going to make all the difference
204
00:08:58,300 --> 00:09:00,453
when you're writing your own applications.
15670
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.