WEBVTT 00:02.460 --> 00:07.740 In this lesson we're going to write the code needed for our front end application to communicate with 00:07.740 --> 00:09.390 the rest api backend. 00:09.510 --> 00:15.080 Inside of the S RC folder let's create a new folder called common. 00:15.090 --> 00:22.850 We can also in fact delete our sets and instead of common we can now create two files. 00:22.850 --> 00:30.410 First of all API dot service dot GSA where we're going to write the code needed to make the requests 00:30.530 --> 00:34.180 and understand the responses and then another file. 00:34.340 --> 00:42.890 C S R F token not sure yes because I remember you did among all the security features provided by Django. 00:42.890 --> 00:48.350 We also have a protection system against the Cross Society request forgeries where we need to include 00:48.370 --> 00:56.030 these talk and the C S R F token when making unsafe HDD requests and so the same principle of course 00:56.090 --> 00:59.180 applies for unsafe ajax requests. 00:59.180 --> 01:05.300 Luckily for us jungles documentation provides us a javascript function that we can use to extract the 01:05.360 --> 01:09.350 CSR token from cookies once I use that log scene. 01:09.380 --> 01:16.430 A cookie is a set which contains the CSR f token and therefore we can get that same token and we can 01:16.430 --> 01:18.070 then use it whenever we need it. 01:18.080 --> 01:20.630 So I'm just going to copy this code. 01:23.160 --> 01:30.910 So and I can also copy the link to this page so that you can learn more about it. 01:31.190 --> 01:39.530 If you want to year we can just change the name of a variable like so and then yeah we can just export 01:39.530 --> 01:39.680 it. 01:39.710 --> 01:42.560 So exporter records. 01:42.690 --> 01:47.810 Yes I have token let's also change the tab language to two spaces. 01:47.810 --> 01:54.590 Considering that e in our view yes application everything is using two spaces as Tam size so we can 01:54.590 --> 02:00.440 just click on spaces and then indent using spaces and then we can set. 02:00.800 --> 02:08.390 And no worries because of course Python files are going to still be formatted using for spaces steps. 02:08.390 --> 02:15.770 So yeah simply we can right click form a document now that we're exporting the CSIRO to can we can import 02:15.770 --> 02:17.840 it in the API service strategy. 02:17.860 --> 02:30.890 Yes file so import CSIRO token from C.S. pref so can yes let's not create a function to make a TTP requests 02:30.980 --> 02:37.760 using fetch and other popular way to make a requests in a single page application is to use the axes 02:37.760 --> 02:40.540 package so check it out if you want to. 02:40.550 --> 02:46.490 However we're are going to use fetch because it's perfect for our use case and it also makes our code 02:46.580 --> 02:47.790 a bit more explicit. 02:47.870 --> 02:58.760 So this API set of his function is going to accept three parameters and bind method and data and considering 02:58.820 --> 03:03.110 that you are going to use the function to make all sorts of different age TTP requests. 03:03.230 --> 03:15.380 Let's create a config object with method is method or get it so get is the default method. 03:15.400 --> 03:20.980 If no other method is passed this is useful because we are going to make a lot of get requests such 03:20.980 --> 03:25.900 as for example to get at least we have all the questions or all the answers or maybe just the details 03:25.900 --> 03:28.770 of a single question then body. 03:28.950 --> 03:31.160 And yet we can use the ternary operator. 03:31.420 --> 03:40.920 So if data is not undefined then body is going to be Jason dot string defy of data. 03:41.770 --> 03:43.970 Otherwise it's just going to be normal. 03:44.040 --> 03:46.260 The less defined yeah there is. 03:46.360 --> 03:52.340 So each age GDP request is going to have Jason as content type. 03:52.480 --> 03:55.900 We are in fact not using images or files. 03:56.080 --> 03:57.730 So application. 03:57.730 --> 03:59.900 Jason and then we need to include this. 03:59.890 --> 04:00.390 Yes. 04:00.410 --> 04:01.980 Arrive to Cannes that India. 04:01.990 --> 04:03.910 This is best as Excel. 04:04.570 --> 04:08.020 Yes I have token without on score. 04:08.250 --> 04:10.740 Yet we can pass this I of token. 04:11.020 --> 04:20.050 Now that we have our config object we can return a feature on the endpoint best and we also need to 04:20.050 --> 04:30.280 pass config fetch we'll return it I promise that we can handle using a function get Jason then we can 04:30.280 --> 04:40.390 now define so IPR sync function get the Jason which accepts the response. 04:40.450 --> 04:50.310 So first of all let's check if response status is to 0 4 which is then no content status code. 04:50.320 --> 04:54.810 As you probably remember it case we just return an empty string. 04:55.750 --> 05:00.240 Otherwise we return a response. 05:00.330 --> 05:07.880 Jason Yeah we can also catch any errors using a narrow function. 05:08.230 --> 05:14.030 We can just log into the console so consolidate log error. 05:14.040 --> 05:23.370 We are now finally ready to export API service so that we can then use the function to make HDD requests 05:23.490 --> 05:25.560 from everywhere inside that application. 05:25.560 --> 05:28.120 This is precisely what you're going to do in the next lesson. 05:28.140 --> 05:33.030 What we're going to customize their home dot view component to get at least with all the questions in 05:33.030 --> 05:38.330 our database before finishing the lesson that is one last vehicle to fix so you can see the error. 05:38.360 --> 05:44.490 This relative module was not found which is related to the fact that I've deleted the assets folder. 05:44.730 --> 05:51.840 Let's just open the arm door to view component and yet I'm going to comment out these image stack and 05:51.840 --> 05:54.090 everything now works perfectly. 05:54.090 --> 05:59.040 And just to be peaking I can also add a semicolon here and remove the one yet.