At this point we are ready to consume our API's. To do so, we are going to introduce axios it provides basic HTTP client for the browser and now j s. We are going to install our module with NPM. I save as usual because is provides basic nature. To perform our GET and POST requests we are going to use the dot get method to perform the get request and post me thought even if you're using these a little bit different as we as we are going to see in few moments, but anyway what is important it is that we are going to we are going to handle the response in the dot then function if everything is fine. Otherwise in the Catch function. So, going to our code, I've already set, set it up.
And I have a URL scheme. That is, of course, very similar to what we did in the back end part. And I have already defined a base URL that is the URL of the back end node server. Of course, please use the EMB file to store this kind of stuff. This is just to be more fast. So let's go to use our newly introduced library.
We create an e commerce API class. And we define get articles meetups, that we'll get back all the articles so as you can see, we Using the method, get URL articles. And if everything is fine, we print the dot data property of the result that contains our response. And we pass back that, that response, otherwise we catch the error. and here if you want, you can do some graceful failure operation anyway, for now we just reject the error. And say, same procedure even for the POST method.
And we pass the data for the POST method for the post request in the data key. The way to handle the request is the same. So pretty back, we are going to we are going to create a test get me an adapter and a test POST method that you are going to bind into some buttons like this. So we have Martin for this get and button for test boss. And what they do is to take an e commerce API object, okay? We can even do in this way and we are going to use our State to pass the articles.
In case of error, we reset back to an empty array. Of course it's better to use a more clear name. So okay, so we have to refactor articles. Okay. So what we're going to do is to display the article title of all the all the articles that are returned by the get or the post. So, in this case we are going to try when we are talking about the POST method, we are trying to get all the articles that are in stock.
Okay, so we start back our server Or 5000. And in the UI project in the front end project, we launch again, this is what we have right now in our front end. As you can see, we have here an empty list because our articles array in the React state is empty. So, going to perform the get request, we should see the list of all articles title. And here it is. So as you can see, the React state is changing our articles.
List is now now contains all the articles and in the Network tab, you can see we're response here and our request Get 40 articles request URL, same thing. Now if we do if we perform a POST request, we should see here the least replace it. And that should contain only three articles because we have one article that is not in stock. And here it is. So we have a POST request that is that was successful. And the pilot said to the three articles that are in stock, the React state is changed.
It now has three articles and the Network tab. As you can see, there is the options. If you remember what we did in the previous lessons in the back end part and a POST request for the search request URL with our in stock equal To one payload request build and this is our response