In this lesson we're going to write the code needed for our front end application to communicate with
the rest api backend.
Inside of the S RC folder let's create a new folder called common.
We can also in fact delete our sets and instead of common we can now create two files.
First of all API dot service dot GSA where we're going to write the code needed to make the requests
and understand the responses and then another file.
C S R F token not sure yes because I remember you did among all the security features provided by Django.
We also have a protection system against the Cross Society request forgeries where we need to include
these talk and the C S R F token when making unsafe HDD requests and so the same principle of course
applies for unsafe ajax requests.
Luckily for us jungles documentation provides us a javascript function that we can use to extract the
CSR token from cookies once I use that log scene.
A cookie is a set which contains the CSR f token and therefore we can get that same token and we can
then use it whenever we need it.
So I'm just going to copy this code.
So and I can also copy the link to this page so that you can learn more about it.
If you want to year we can just change the name of a variable like so and then yeah we can just export
it.
So exporter records.
Yes I have token let's also change the tab language to two spaces.
Considering that e in our view yes application everything is using two spaces as Tam size so we can
just click on spaces and then indent using spaces and then we can set.
And no worries because of course Python files are going to still be formatted using for spaces steps.
So yeah simply we can right click form a document now that we're exporting the CSIRO to can we can import
it in the API service strategy.
Yes file so import CSIRO token from C.S. pref so can yes let's not create a function to make a TTP requests
using fetch and other popular way to make a requests in a single page application is to use the axes
package so check it out if you want to.
However we're are going to use fetch because it's perfect for our use case and it also makes our code
a bit more explicit.
So this API set of his function is going to accept three parameters and bind method and data and considering
that you are going to use the function to make all sorts of different age TTP requests.
Let's create a config object with method is method or get it so get is the default method.
If no other method is passed this is useful because we are going to make a lot of get requests such
as for example to get at least we have all the questions or all the answers or maybe just the details
of a single question then body.
And yet we can use the ternary operator.
So if data is not undefined then body is going to be Jason dot string defy of data.
Otherwise it's just going to be normal.
The less defined yeah there is.
So each age GDP request is going to have Jason as content type.
We are in fact not using images or files.
So application.
Jason and then we need to include this.
Yes.
Arrive to Cannes that India.
This is best as Excel.
Yes I have token without on score.
Yet we can pass this I of token.
Now that we have our config object we can return a feature on the endpoint best and we also need to
pass config fetch we'll return it I promise that we can handle using a function get Jason then we can
now define so IPR sync function get the Jason which accepts the response.
So first of all let's check if response status is to 0 4 which is then no content status code.
As you probably remember it case we just return an empty string.
Otherwise we return a response.
Jason Yeah we can also catch any errors using a narrow function.
We can just log into the console so consolidate log error.
We are now finally ready to export API service so that we can then use the function to make HDD requests
from everywhere inside that application.
This is precisely what you're going to do in the next lesson.
What we're going to customize their home dot view component to get at least with all the questions in
our database before finishing the lesson that is one last vehicle to fix so you can see the error.
This relative module was not found which is related to the fact that I've deleted the assets folder.
Let's just open the arm door to view component and yet I'm going to comment out these image stack and
everything now works perfectly.
And just to be peaking I can also add a semicolon here and remove the one yet.