In this video, we create a Fetch object and use it to obtain weather information from a web service. We use the OK property to check if the request was successful, and the JSON method to parse the data into an object. We use polyfills to ensure support in older browsers.
- [Instructor] We're going to keep working on the Landen Hotel app. But we're going to replace our XHR code with a fetch request instead. So looking in our JS folder for this project, we have a number of files. And to implement fetch, we're going to use a couple of them in our app. The fetch.js file contains the polyfill for browsers that don't support the fetch API. So we'll need to include that in our build. For our purposes, we'll just reference that in our HTML.
There's also another JS file, promise.min.js, which we'll use in our app as well. This is a minified polyfill for the promises feature. Now, even though fetch is technically separate from promises, it uses a lot of the same syntax, and the code under the hood is similar for both. So the fetch.js polyfill relies on the promise.js polyfill, and so we have to include both. So we'll open up index.html. We'll scroll to the bottom.
And then, before the existing script elements, we'll add a couple more. So we'll add a script the source of js promise.min.js. And then below that, we'll add another script element with a source of js fetch.js. And that order is important there because fetch.js needs the code in promise.min.js, and our script2.js file needs both of them before it's parsed.
So we'll save those changes. And then we'll open script2.js. And here we have the code for an XRH request to open weather map, along with code to add data to the dom and deal with errors. We'll start by commenting out that code, keeping it around for reference and to reuse what we can. So, we will put a slash star at the beginning, star slash at the end, and then above that code, let's add a comment just so we can remember what it's for, and it's our XHR request.
Then we'll add another comment for our new code, which is going to be a fetch request. And we can start by copying the first three lines, the first statement for that iffy, and the URL and API key variables. And we'll paste that below our fetch request comment, leave ourselves a blank line, and then we'll close that function, and finish up that iffy. Now, figure you're starting with the start file for this chapter, make sure you grab your open weather map API key from wherever you stored it and paste it in place of this API key placeholder here at the top of the code.
So, I've got mine over in notes. I'm going to copy it. And I'm going to paste it in. Remember that your app won't work without this, so make sure you get your own API key and put it in here. So, to create our fetch request, we're going to type fetch and a pair of parens. The only argument that's required here is a URL. And in this case, we'll build the URL the same way as we did in the previous code. So, we'll grab that down here in our httprequest.open.
All we need is URL, the app I.D. string, and then the API key reference. And I'll copy that, and I'll paste it inside those parens. So, this code creates our fetch request, which returns a specially crafted object. So the next thing to do would be to add some code that looks at that object to see what, if anything, was returned from our request. And this is when we get to use the magic then keyword. So after that closing paren, we type .then.
Now, then takes a function as its argument and passes the fetch object to that function. So we'll open our parens, we'll create an anonymous function, and we'll specify response as the parameter name for the object that's passed in. And then we'll do some error checking. Now, the response object contains an okay property, which is a buoying. So if you get an HTTP response in the 200 to 299 range, that results in a value of true for the okay property.
Meaning that we had some measure of success for our request. So we first check if response.ok isn't true. So we'll do an if statement, and we'll do not response.ok. And if that's the case, we'll just use a console.log statement to log something like there was a problem. And if we see that in the console, we know our code probably needs some tweaking somewhere. And then, whether we have a successful request or not, we want to return the value of the response object.
So we'll start by just doing another console.log, and we'll log response. So that's the raw response object. Now, we're expecting data returned as json. So, usually, if we wanted to see the object that results from that data, we'd be looking at using json.parse to create an object. But fetch includes some of its own methods in the response object, and one of the them is json, which parses json for us. So we can also log our json here using a console.log statement, and we'll say response.json, open and close parens because we're calling a method.
We'll add a semicolon to our fetch to finish that all up. Obviously, if there's an error, we'll get an empty object there. But otherwise, we can look at our data in the console and verify that it matches what we expected. So we'll save those changes. We'll switch over to the HTTP server and make sure we're serving the content from the folder we're working in. And I am working from folder 03_02/start, so that's good, and I'm going to start up my HTTP server.
And then switching over to the browser, I'm going to open my app from local host 3000. And open at the console. We see two objects logged. The first is a response object. And notice the capital R, which indicates that this is a special type of object that's used in conjunction with promises and with fetch. And if we open up, there's information about the response and there's a body property for the body of response. And that's not visible by default.
But our response.json statement grabbed that and parsed it, and looking at the second object we logged, it's a promise object wrapper around our data. And drilling down into the promise value property, there's the object from our successful weather request. And so, we created a successful fetch request using a little less code than we did in our simple XHR version. And it gets even more efficient when we go on to do something with the data we received.
- Setting up your environment
- Obtaining API keys
- Working with XMLHttpRequest
- Working with the Fetch API
- Creating an Ajax request in jQuery
- Working with data returned from a jQuery Ajax request
- Creating an Ajax request in AngularJS
- Using an Ajax request with React
- Structuring Ajax requests