WEBVTT 0 00:00.890 --> 00:01.200 All right. 1 00:01.230 --> 00:09.120 So now that we've covered all of the HTTP requests for the /articles route, I just wanted 2 00:09.120 --> 00:13.720 to quickly show you something that Express lets us do. So at the moment 3 00:13.740 --> 00:20.490 if you look at our code, we've got a number of methods are targeting the same route namely 4 00:20.580 --> 00:21.450 /articles. 5 00:21.480 --> 00:27.080 We've got a get method, a post method as well as a delete method. 6 00:27.090 --> 00:33.960 Now if you have a look in the Express documentation and if you go to the guide on routing, you can see 7 00:33.960 --> 00:40.380 that there's the route method which is what we've been using. But there's also something that makes our 8 00:40.380 --> 00:46.500 lives a little bit easier so that we don't have to type in the same route every single time. 9 00:46.500 --> 00:53.670 And that is the app.route method and this allows you to create changeable route handlers by using 10 00:53.760 --> 01:01.320 app.route and then you use the path as the same location so that you reduce redundancy and typos 11 01:01.650 --> 01:07.140 which is our aim as always when we're refactoring our code and maintaining our code. 12 01:07.260 --> 01:11.310 So they give you a really good example on how you would use this. 13 01:11.340 --> 01:17.820 You start off by calling the app.route method and you specify the particular path that you want 14 01:17.820 --> 01:25.650 to target and then you simply chain on method like .get, .post, .put et cetera and they all target 15 01:25.680 --> 01:26.980 the same route. 16 01:27.000 --> 01:27.970 Now it's a bit confusing where 17 01:27.990 --> 01:33.890 I showed you this right in the beginning but now that we've gotten used to app.get, app.post etc. 18 01:34.260 --> 01:39.400 it's a good time to start using a more succinct way of doing this. 19 01:39.450 --> 01:47.210 So let's go ahead and go into Atom and change our current code to use these changeable route handlers. 20 01:47.550 --> 01:53.880 So we're going to start off by saying app.route and then in here we specify the route that we want 21 01:54.000 --> 01:56.310 all of our subsequent method to target. 22 01:56.730 --> 01:59.630 So we start off with /articles. 23 01:59.700 --> 02:02.850 Make sure that I don't have any typos. 24 02:02.850 --> 02:06.070 And then afterwards is where we chain our methods. 25 02:06.090 --> 02:07.980 So it would look something like this: 26 02:07.980 --> 02:14.100 .get .post and we've also got a .delete. 27 02:14.640 --> 02:21.630 So and then this is where the method ends and that's the entire method without obviously any content 28 02:21.840 --> 02:23.010 in these. 29 02:23.010 --> 02:30.480 So now we're going to take our callback function the entirety of it and transplant it inside this new 30 02:30.570 --> 02:32.270 chained get method. 31 02:32.310 --> 02:39.270 So if you click on the left or on the right of the opening bracket of that callback function it will 32 02:39.270 --> 02:46.380 highlight to you the closing bracket and we're going to take everything including that closing bracket 33 02:46.830 --> 02:54.450 and the callback function but excluding that last closing parentheses and semicolon because that belongs 34 02:54.510 --> 02:56.100 to the get method. 35 02:56.100 --> 03:02.730 This particular parentheses matches with this one and that semicolon says that that is the end of that 36 03:02.730 --> 03:03.710 get method. 37 03:03.720 --> 03:10.050 Now we in this case don't actually want our get method to end because we want it to continue to be chained 38 03:10.110 --> 03:17.070 by the post and delete methods so that for all requests targeting our articles route we will check to 39 03:17.070 --> 03:24.780 see if it's a GET or POST or a DELETE request and then call what's inside these parentheses correspondingly. 40 03:24.780 --> 03:28.530 So now that you've checked that you've selected the right parts 41 03:28.530 --> 03:30.660 and this is really easy to make a typo here, 42 03:30.990 --> 03:38.520 so make sure you've gone right down to the bottom last closing brace and you've excluded any parentheses 43 03:38.520 --> 03:44.670 and semicolons at the end here and we're going to cut that and paste it into our get method. Snd then 44 03:44.670 --> 03:47.510 we're going to do the same with our post method, 45 03:47.610 --> 03:49.160 so our app.post. 46 03:49.200 --> 03:56.340 So we're going to check where this opening brace closes and then we're gonna take all of that and put 47 03:56.340 --> 04:02.250 it into our chained post method and we're gonna do the same with our delete as well 48 04:02.310 --> 04:11.400 so all the way from here up to here. Now once we have pasted that in there all that you should see remaining 49 04:11.400 --> 04:15.980 down here are a closing parentheses and a semicolon. 50 04:16.050 --> 04:20.520 And now we have removed that callback method entirely. 51 04:20.520 --> 04:26.790 So now it's time to go and separate out our code because at the moment it's a bit of a mumbo jumbo. 52 04:26.820 --> 04:32.540 So usually when you use chainable route handlers it tends to be structured like this. 53 04:32.610 --> 04:38.940 So you would have app.route specifying the route on a single line and then for every subsequent chained 54 04:38.940 --> 04:44.080 method they go on separate lines so that you can see what's going on easily. 55 04:44.100 --> 04:46.770 So now we're going to put the get onto another line, 56 04:46.770 --> 04:52.820 we're going to put the post onto another line and we're gonna put the delete onto another line as well. 57 04:53.280 --> 04:58.470 So each of these lines start out with a dot to show that they are chained methods 58 04:58.770 --> 05:05.910 and then at the very end do we actually have a closing parentheses and a semicolon. For all of the 59 05:05.910 --> 05:11.520 other chain methods say the post or the get, they don't have a semicolon because we don't yet want it 60 05:11.520 --> 05:12.360 to end. 61 05:12.450 --> 05:13.320 We want it to be 62 05:13.350 --> 05:15.930 .get, .post and .delete. 63 05:15.930 --> 05:23.430 So now we can safely delete all of this and we have successfully refactored our code so that we now 64 05:23.430 --> 05:31.800 have a single route that targets /articles and we've got a get method, a post method and 65 05:31.860 --> 05:39.270 a delete method all chained together. Now chaining methods together like this isn't actually new to us 66 05:39.330 --> 05:46.200 because when we were using JQuery we were writing a lot of change methods. We'll say something like document. 67 05:46.230 --> 05:53.070 getElementById and then once you've gotten that element then append child Node or do something 68 05:53.070 --> 05:53.920 else with it. 69 05:53.980 --> 05:59.730 And very often when we're writing JQuery there's lots and lots of chain together methods that make 70 05:59.730 --> 06:02.020 your code look like a huge chain. 71 06:02.100 --> 06:08.880 And so if you wanted to learn a little bit more about this then I'll link to this particular article on 72 06:08.880 --> 06:13.740 Medium which is quite well-written and it talks you through some of this method chaining so you can 73 06:13.740 --> 06:15.560 get a bit more background on this. 74 06:15.720 --> 06:17.550 But back to our code 75 06:17.670 --> 06:24.300 if you have any errors at all make sure that you've got all these syntax written in exactly the same 76 06:24.300 --> 06:27.850 way as you see on screen right now. 77 06:28.080 --> 06:34.770 And it's very very easy to mess up a semicolon or delete a closing bracket. 78 06:34.770 --> 06:36.910 There's just so many to manage here. 79 06:37.020 --> 06:44.400 So if you run your server right now you shouldn't be getting any errors and all of the previous requests 80 06:44.430 --> 06:48.480 that we did through Postman should still work. 81 06:48.480 --> 06:55.950 So go ahead and test that and if you have any sort of error logs inside the terminal or inside Postman 82 06:56.280 --> 07:02.190 and just be sure to come back here and just check that your code matches with my code.