7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 53 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Making GET Requests With axios

We will be using a library called axios for HTTP requests. In this lesson, I’ll show you how to use axios to make a simple GET request and work with the response.

Related Links

2.1 Making GET Requests With axios

In this course we are going to be using a library called Axios, to make and work with our HTTP requests. And that is kind of new to me. Not Axios, but the idea of championing a library over the native APIs. Because if you have read anything that I have written, an article or a book. Or if you've seen any of my courses, then chances are very good that I championed alerting the native API. Because I believe, having a firm foundation on knowing the native APIs makes you a better developer. Because the native APIs are always there, libraries come and go. And in fact, they really aren't around for very long. I mean, if you look at jQuery, it was popular for seven to ten years. And that seems like a very long time. But in the grand scheme of things, we have only been writing applications for a little over 20 years. 1995, 96, 97, that's when the Internet started kicking off, started gaining momentum and popularity, and the way we have written web applications since then has drastically changed, thankfully. And it just so happened that jQuery was part of that revolution. But now it's really not something that we use all that much anymore. Instead, we use frameworks like React and View, in conjunction with just plain, ordinary JavaScript. So when it comes to the native APIs, we have really two. There is XMLHttpRequest, which is still the most feature full or the feature rich API, as far as HTTP and JavaScript is concerned, and then there is the Fetch API. Now, XMLHttpRequest is a lower level API, that's why, we have so much control there, but the problem with a lower level API is that you have to write a lot of code in order for it to work. And that is definitely true with XMLHttp. Now Fetch is higher level, but it is still lower on the run. Its requires some extra code in order to make it work, and both of these to purchase are very good. And Fetch is a little more simple than XML HTTP Request. But it's not as simple as Axios. So Axios gives us a very clean, and simple API for using XMLhttpRequest, which is really the better API. And so that's why we are going to be using Axios. I'm not going to say that it is the defacto standard as far as Ajax libraries are concerned, but it is very, very good. And so we are going to use it. So I'm going to step off of my soapbox, and we can get started. What we are going to do, is make a request for all of our guitar data, and then we are going to write some of that data inside of this unordered list. Now the URL that we want to hit, I guess we can go back to the browser, is our localhost:8000/API/guitars. This is going to return all of the guitars in our data file. I believe there are five there. So we are going to make a Request for this end point. We are going to work with that data and display some of it in the browser itself. So let's add a script element. We could put all of our JavaScript inside of an external file or really external files. But I want to keep everything together, so that there's really not a whole a lot of confusion. So we're going to do everything inside of the html file, unless if it gets to unwieldy and then we will break it out into an external file. But in this case, everything's going to be fine. So there are really three ways that we can get Axios. We can use npm, which if you'll remember in the previous lesson, whenever we installed our little project we said npm install. Well, we could do the same thing with Axios, we could say npm install axios. But then how we access that file is a little convoluted and we don't need to go through that. So that's one way. The other way is that we can just download the file from the GitHub repository. And I guess I closed that. So from the GitHub repository we could clone or download that repository, and then just grab the file that we needed, or we can use the CDN. And I've opted to use a CDN because it's easy to just get started with. So in each one of these files, you're going to see a reference to Axcios from the Cloudfare CDN. And so because it's already in our file we can use the Axios object. Now when it comes to making a request, we have several methods. We have a get method for making a get request, we have a post method for making a post request, but of course we don't want to make a post request here. We are requesting data. So we are going to make a get request. And then we are going to pass in the URL that we want to make a request for. Now we can use and absolute URL if we wanted to. We can come in here and have the host, the port, and then the path. Or we can get rid of the host import and just have the path. Now, how you do the path is important, and if you don't know this, then this is a good time to talk about it, because you can specify your path in one of two ways. You can have a slash at the beginning, or you can take out the slash. Now, this is going to behave in two different ways. If you have a slash, then the browser is going to take this path, and make it relative to the root of our URL. So that would be http://localhost:8000. So then URL would be /api/guitars. That's really what we want in this case. Now if you omit that beginning slash, then it's going to make this relative to the currently loaded page. So right now our page is index.html, which is at the root of our application. So in this particular case, it's not going to change anything. We are still going to end up at the same URL. However, if we were at stores/index.html, we are in a different path so api/guitars would be appended. To stores, to the current path, and that would definitely be a problem because there's nothing listening at that path. So how you denote your URLs is very important, because it could make or break your application. So we are telling Axios that we want to get this URL. And then, we want to do something with data whenever we get it back from the server. So we are going to call this then method. And this accepts a call back function that's going to execute. So it's going to pass in the response from the server that we can then work with. And there's a lot of data that comes back with this response, but in our case we only really are wanting the guitar data. So let's say guitars =, we have our response object, and then we have a data property. Now Axios is smart enough to recognize JSON. So if the server responds with JSON, Axios is going to automatically parse that JSON into a native JavaScript object or array. So the data that we get here, is an actually JavaScript array that contains all of the guitar objects from our data store. So then all we really need to do, is just iterate over our guitars. And build an HTML string, so that we can then append that inside of our guitar list. So let's do this, we'll have our HTML string, which we will build inside of our for each, and we will simply just do this. We will say html plus equals and then we would use the string interpolation feature which is a wonderful addition to the language and let's just have the name of the guitar. There's a lot of other information that we could include, but let's just have the name and I guess we could do the year as well, that would be fine. So let's have the guitar name, and then in parentheses, well, I guess the manufacturer is kind of important too. So let's have the guitar manufacturer, I think I spelled that correctly. And we'll leave the year alone, because the year is important because some manufacturers will change how they make a guitar in a given year. But we'll just have the guitar name and the guitar manufacturer, so after we are done, then we can say document get element by ID. We will get the guitar list and then we will set its innerHTML to the html that we just built. So we can go to the browser. Let's refresh the page and Viola! We have our data. But what happens if something goes wrong. We always need to plan for when something to go wrong, because if something can go wrong It will go wrong, it's just a matter of when that happens. Well what we can do then, is just add another call here. So we say, axios.get, and then do something with the response. But if we have a problem, we want to catch that problem, so we just chain another method call, called catch. That is going to accept another call back function. That's going to contain, or not necessarily contain, but it's going to receive the error that occurred. And then, we can just write that information to our guitar list. So in this case, let's retrieve our element. And instead of building a list of li elements, what we will do, then, is just add a single li element, and we could just include the error there. So that we could see what happens. So let's make this fail. Let's just take a character, doesn't matter what character it is, off of the URL so that it will not succeed. If we make a request, we see that the error that the request failed with status code 404. So ideally we would do something else, instead of giving the error. While the error would be useful, we could give the error, but also say, I'm sorry this didn't work, here is the details, and then include that. But either way we're fine. We know how to retrieve the error information. And so that is a simple get request. And the next lesson, we are going to take it a step further, we will still make a get request. But we will do so using, URL parameters because we want to query and search our guitars based upon certain criteria and we will do that in the next lesson

Back to the top