- [Instructor] Earlier in the course,
we used View to build out the front end
for a basic e-commerce style site.
We then used Node.js and Express
to build a server for our backend
and support functionality,
such as loading product data
and managing a user's shopping cart.
And finally, we used MongoDB to persist our product
and shopping cart data more permanently.
So far however,
we've been testing our front and backend in isolation.
Now it's time
to bring them together into a single full stack application.
So up until now,
we've been using Postman
to test our backend as we developed it.
We could craft requests,
send them
and see if our servers response matched our expectations.
In order to bring our front and back ends together now,
our main task is to make it so that our front end,
instead of Postman,
is the one that makes these requests.
For example,
when the user visits a specific product detail page
our front end needs
to automatically make a request
to load the data for that product,
and then display
that information in the correct places on the page.
And when a user clicks the add to cart button
for that product,
the front end should make a request
to the correct end point to the server telling it
that we want to add that product
to the user's cart.
And last but not least
when the user looks at their cart it needs
to make a request to load those items,
and when we click on the remove from cart buttons
it should make a request to remove
that item from the user's cart.
Now, there are many different libraries
that we can use to make requests from our front end,
but in this course
we're going to be using a very popular request library
called Axios.
Axios provides a number of different methods
for making requests from the front end.
And what we're going to do in this video
is just talk briefly about how these methods work.
And then we'll move on to seeing how
to use Axios to connect the front end
and back end of our application.
The first method that we're going to look at is axios.get.
Now, as you might be able
to guess axios.get is used
to make get requests to the back end
from the front end.
The way we do that is pretty simple.
We call axios.get with the URL
that we want to send the request to.
This is very similar
to what we've been doing in the last few chapters
with Postman,
except now we're doing it programmatically
from our front end.
Now get as well as the rest of the Axios methods
that we're going to be using throughout the rest
of the course,
return promises.
And in our case,
basically what this means is that we'll be able
to use the async and await keywords with them.
So for example,
if we call axios.get with some URL,
we can use await
to get the result of that network request
which is an object containing information
about the response.
Generally, the part of this object
that we're going to care the most about is the data property
which contains the data
that we pass to the .json method on the server,
when we say something like res.json products
or res.json with some kind of custom some object.
We'll see how all that works pretty soon.
Now, in addition to the get method that Axios provides,
there are also other methods such as post and delete
which we'll be using to make post and delete requests
to the backend.
This is pretty straight forward.
The main thing you need to know is
that with the post method we'll be wanting
to pass extra data along
with our request,
which we can do by passing a json object
as a second argument to the function.
And that's all we need to do.
Axios takes care of the rest.
Okay, so now that we've seen the very basics of Axios,
let's see how to use it on our front end.