Fetch is the next generation API for performing AJAX requests. It's a lot simpler and easier than using the XMLHttpRequest method. In this video, take a look at some of it's features.
- [Instructor] Fetch is the next generation API for performing AJAX requests. It's a lot simpler and easier to use than XMLHttpRequest, which is the old way of performing AJAX requests. So, let's take a look at some of the features. Now, the main difference, besides being much easier to pronounce, is that Fetch uses promises, which makes it easier to set up operations and change sequences of events outside the request. The API is also built so that it's super easy to use if all you want to do is load up an external file.
But it also gives you complete control over the request. As a matter of fact, it returns full information about the request and can be set up to specify the verb, header information, or get data like the URL, referrer, and much more. The Fetch API also provides utilities so that the content can easily be parsed as JSON, text, blobs, or others. So, it makes it easier to process the request. So, let's go ahead and take a look at how it works.
So, here we have a simple HTML page with this Load Info button. So, that is just a bootstrap page with this button right here that we can click on to load some data. And the data that I'm going to use is in this file called data_artists.json. And remember, since I'm working with a preprocessor, I'm working from this script.js file which is completely empty. So, let's go ahead and dive in and just use the Fetch API. We'll start with the fetch method and then we'll specify a URL.
So, I'll do this response. And then specify how I want to convert the data that I get from the request. So, I'm going to get a response object and what I want to do is convert that response object to something like JSON, but there are some other formats. So for example, a blob would be if you're asking for an image instead of a JSON file. And then there are some other formats here. So, response, and I want to say .json. And that's going to convert my response to a JSON file.
And now I can use the then method and another callback here with the data that I receive from that JSON request. And what I'll do then is just console log my data. And let's save that. And we'll switch over to the Inspector here. Move over to the Console. And now you can see that I get an object. That object has an item called artists with all of our artists.
And now I'm able to get to that data pretty easily using promises. So, I make sure that this then statement doesn't happen until I receive the data and my response is resolved. And then I can do whatever I want in here. Now, I can make this a little more flexible if, for example, I want to tie this to a event. Let's go ahead and do that, so I'm going to do a document.querySelector and then target my Load Info button.
And then I'm going to add an event listener. And this event will be a click, so once somebody clicks on that event, then I'm going to do another callback here. And this callback is going to execute my fetch request. So, just going to put that in here. And we'll go ahead and save that. And now whenever I hit this Load Info button, it's going to load up my information.
And as I showed you in the previous video, if I want to go ahead and perform my fetch so that it happens only once, so every time I hit this button, it's going to load up this data over and over again. So, I showed you in the last video, you can actually create the promise outside so that it happens only one time. So, I'm going to create a variable called artists and I'll set that equal to my fetch.
And then I'm going to call that here. Let's go ahead and paste the fetch. So, now the difference is when I click on this fetch, it's going to show the artists, but they're only going to be loaded once, though. This is going to be only resolved once and it's only going to show this data after I click on this button. So, we can make that a little bit more complicated. If you have a more complex request, you can also create a separate request object.
So, we could do that by saying something like getArtists and make that a new Request. And here we can specify what we want. So, we can say get this data.json file and in addition to that, with this new request I can specify a configuration object here. And this is where if I wanted to, I can get more complex with what I'm asking for.
So, I can say GET and I can use any of the other things like I can specify a header here if I want to or specify how cross origin requests are handled. So, anything that you would traditionally do with a HTTP request, you can do in this request method. And then once you have this request object, then we can actually instead of fetching and getting a URL, we can specify this getArtists and it'll work in exactly the same way but give us a little bit more finetuned control over the different elements.
So, let's go ahead and click on this and we can see that it is loading. And if we were able to see the network, we would know that. Let's go ahead and hit Load Info. Notice that after the original request it's not loading any additional copies of this JSON file. It's only being resolved once, and then I can use it as many times in any of my page elements like this button to process what I need to do with that data.
So, that's one of the huge advantages of Fetch. It's a lot simpler than using the XMLHttpRequest. If you want to learn more information about promises, make sure you check out these resources as well as some related courses. As usual, if you have some ideas for this weekly series, maybe you want to share with me some questions you have been asked or have asked in interviews. Connect with me in LinkedIn or just about any other social media network like Twitter or GitHub at planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.