FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.2 Using `fetch()` to Make Requests

The new standard Fetch API is robust, allowing us to request and work with many different types of data (including binary). In this lesson, we'll use fetch() to retrieve our JSON file and then work with its data.

6.2 Using `fetch()` to Make Requests

In the previous lesson, we started looking at Ajax using jQuery. And we saw how easy it was to make a request, and work with the data from the response. Now, jQuery did a lot of the work for us. And if we wanted to do something that was a little bit lower level. Like specify headers and things like that, then the better option is to use the Ajax method that requires a lot of extra work on our part, but it gives us a little bit more flexibility. Well in this lesson, we are going to be looking at a relatively new addition called Fetch, and fetch is a robust API for making a request for just about anything that we want. And the reason why I mentioned the Ajax method just a few moments ago was because, fetch was designed around that same concept. And that if we needed to be specific in the types of data that we send with a request, we can do that here with relative ease. But we can also make requests for a lot of other cool things like binary files. And we're not going to do that, but the possibility is there. So the thing about Fetch is that, it is supported by all of the modern browsers, Google, Firefox, Edge, Opera, I think Safari supports it. But if you wanted to use Fetch and you needed to support IE10 or IE11, well then you need a polyfill. So if you do a search for mdn fetch which I have done before as you can see, there is a link for the polyfill. Now, there's one thing about mdn. And that if there is a polyfill for something and if it is a relatively small polyfill, you'll see the actual polyfill here in the documentation. That if we look at the polyfill just scroll down to the See also section, click on Fetch polyfill, you're going to see that well this is a lot more than would fit in the documentation. So, if you wanted to support IE10 and IE11, then you would need a polyfill, it doesn't need to be this one but this one's here, you could just download the repo, get the fetch.js file and add that to your page. Now, before we start writing any code, let's look at the documentation here. The fetch API, can be used as simple as we did in the previous lesson, we can call fetch pass in the URL, and then make the request that way. But if we wanted to specify Headers, or if we needed to specify any other information that needed to be sent with a request, we can create a request object. And where are the properties? I clicked on Headers, ha. If we click on Request, we will see all of the properties that are available here. Now you can see that these are read only, that's because all of these values are set through the constructor. So if you needed to set the type of Request or the method rather, you can set it to get a post, or put, or whatever you needed, you can specify the Headers, you could also specify the body that would go with the request, that is for post or put. That would not be used for a get Request, but there's a lot of things that you can set and send with the request. You would just have to create a Request object, initialize the things that you wanted to initialize. And then you could send that Request. And then once you send the Request and the Fetch object receives a response, you're going to get a response object. And then you work with this response object, in order to get the body of that response. That can be a binary file, which you would use the blob method for, or if it's JSON data you can call the JSON method and that would convert the text into JSON, or if it was just plain ordinary text you could sue the text method. So in this lesson, we are going to essentially do what we did in the previous lesson. We are going to make a request for data.json, so we're going to call fetch and data.json. The fetch method returns what's called a promise, now I think I used the term promise in the previous lesson when talking about the deferred object. A promise is a deferred object, it's a promise it says that there is something going on, I promised to let you know and work with whatever it is that you need to work with when I'm done working. So that's what a promise is. And the API is very similar as well. So we call fetch, we pass in the URL, we say then and then we have our function. And in this case, we're going to retrieve the response. And then inside of our function, we would work with the response. The only is that in order to work with the body of the response, we have to use a method that returns another promise. So, here we have response.text, this is going to retrieve the body as text. But this is a promise, so we have to say then{function{text} that we would expect, and then finally we could work with the text here. So, we can alert text and whenever we go to the browser let's refresh. Let's click on Home, and we see the actual text. This is the data from the file itself. So, now that we have the text. Let's manually convert this into an object, because jQuery did that automatically for us, and we could automatically do it here by calling the JSON Method. But, I want to show you how you can take JSON, and then convert that into an object. So we're going to save our obj= we're going to use an object called JSON, J-S-O-N all uppercase. This has a method called parse, and then you pass in the JSON data. So that is our text here. So the parse method is going to take a string, which is what we have whenever you have a JSON structure. It's going to take that string and parse it into an object. Now, there's another method called unfortunately stringify, yeah. Now, the technical term for what stringify does, is serialize and that's really what this should've been called, but it wasn't. It was called stringify, what stringify does is you pass in the object that you want to turn into a JSON structure. So here, we have taken the raw text from data.JSON. We have parsed that into an object. We have then taken that [LAUGH] object, and then turned it back into a JSON structure. So, if we save our json = JSON.stringify, and if we alert(json). Now the formatting is going to a little bit different. but we're going to have the same thing. We have this people property that is an array, that has a couple of objects that represent individual people. We are going to take our object that we have just created. And we're going to say obj.people. Let's see, in the previous lesson we used index 0, let's use index 1 so we work with the other person, and then we will say first name. So, whenever we view this in the browser and we click on home, we should see the value of Jane and we do. Now just to prove that the JSON method works, let's just keep this as now let's change this to obj because that is what we have, we have an object. If we go back, let's refresh and we have the same results. So we now have the Fetch API. And it is a marked improvement over of what we used to have, which I thankfully don't have to show you. And of course, just as with everything else that's based upon the standards. In order to use the standards, we have to write a little bit of extra code. However in doing so, we are writing code that is always going to work whereas, we are never guaranteed that jQuery or any other library is going to exist in the future.

Back to the top