Okay then. So far when we've been making Http requests, we've been using the XML http request object to do that and that is completely fine to do. And many developers still use this way of working. However, there is a newer and quicker way to make these requests using the native fetch API, which is now built right into the language. Now this is a fairly modern addition to the language and it's going to require us to write much less code than the older way using the XML http request object. And it's also going to implement the Promise API under the hood, which is going to make handling success and error cases easy too. Now you might be sitting there asking yourself why I've put you through all the misery of learning the older way when there is a newer and easier way to work. And the reason, my friends, is not to annoy you. It's so you have a greater understanding of what's actually happening when we make these requests and to learn all about how callbacks work with requests and promises too. So now you know all that and hopefully you understand the different moving pieces. I can show you a more simplified approach to getting data which implements all of these things. So to do this, we're going to use the newer native fetch API, which is just a function built right into the language and we can call it by just saying fetch like so. It's a simple as that. Now in this function we pass in an argument which is the resource that we want to fetch. Now that could be some endpoint to an API like the Json placeholder API we used before, or it could just be a local resource like these things on the left. I'm going to just grab one of these local resources so we'll say todos to go into the todos folder then Luigi dot Json. That is the resource we want to get. Now this thing right here, this returns to us a promise. And remember, a promise is basically saying, look, at some point I will either resolve if we have a success or reject if there's an error. Now, when a promise is returned to us like this, we can tack on the dot then method to fire a function when we have a success case when the promise is resolved. So let's create that function. And also down here we can tack on a catch method which is going to fire a callback function when there is an error. So we have these two functions, one for resolve and one for a reject. Now in the resolve over here, we can take a response object and in the reject case, in catch, we can take an error object. Now what I'm going to do for now is just console, dot log over here and I'm going to say resolved and also the response. And down here I'm going to say console dot log and I'm going to say rejected. And I'm also going to output the error. Okay, then. So before we look at this right here, what I'd like to do is show you how the errors work with the fetch API. Now if I just type on an S to the end over here, which doesn't exist now because we're looking for Luigi's instead of Luigi, what do you think will happen? Do you think that this promise will be rejected and then this callback function fired where you would think that? But if I save it, we can see we still get the error, but we get resolved and we get this response. So the way the fetch API works is that the promise is only ever rejected when we get some kind of network error. For example, if we're offline or we can't reach the API for some reason. So that's when we get a rejection. If we just mistype the URL over here or the endpoint or the resource, then we don't get a rejection. It's not rejected. Instead, it's still resolved and we get the response. However, in the response, if we expand that, we can see we have a status of 404, which basically means the resource can't be found. So in here, we could still do a check for the status to make sure it's 200 before we do something with the data and then log out an error. If we get a 404 or something. And that is the case for our own error. But if there's a network error and we can't for whatever reason, reach the resource, then it's going to reject and we're going to fire this callback function. Okay. So then let's change this to the correct URL. I'm going to save it and check this out. And now we can see resolved and we get this response object right here. So we have all of this different data on the response object. And this object is something that the fetch API creates for us When we go out and get data and it's returned to us this response object. So now we can see the status is 200, the status text is okay, we can see the URL that we went to get the data from. ET cetera. Now one thing we can't see right here is the actual data that we're returned. Remember, we're ultimately looking for this Json data and we can't see that anywhere inside here. Even if I expand the body, I can't see any data in here. Now, if we open up the proto, remember this is where a lot of the methods are found inside an object. Let me scroll down here. We can see this method right here called Json. So what we can do is use this method on the response object and that actually gets us the data we need. So inside here, when we get that response, we could say response dot Json. Now this method right here gets us the data and it passes it much like before we used Json.parse. This right here gets us the response data and it passes it so that we can use it inside our code easily now, whereas before when we did Json.parse, we could do something like this. We could say const, the data is equal to json.parse and then whatever we want to pass this time this won't work. And the reason is because response dot Json right here. This returns a promise. So remember, a promise is something that typically takes a little bit of time to do and it can either be rejected or resolved. So if this is returning a promise, what we could do is instead say return right here. So the overall value, the return value of this thing is this promise right here. And since the overall value is now returning a promise, what we can do is tack on another then method right here. And this is the power of promise chaining again. Now inside here, we can actually take the data that we get back from the Json method. So this returns to us a promise which when resolved, gives us the data that we need. The data that we went out to fetch. So now if I say console, dot, log down here and then output the data, now we have access to that, so save it and we can see right here, now we get all of that data. Awesome. So then in the future when we're making some kind of network request for data, I'm probably going to be using this way to get some kind of Json rather than the older way of using an XML http request object because this is much less code to write and much easier to maintain. So again, all you need to remember are the three steps. First of all, we fetch the data, then we take the response and we return Response.json that returns a promise so we can tack on Dot then to here. And inside we fire a function where we actually have access to that data. We can also catch any error at the end.