Ultimately, even if you prefer using fetch(), it's still important to have a good understanding of XMLHttpRequest objects and promises because fetch() relies on both. You may choose to use either on this section's independent project. While the fetch() method is very useful, some developers prefer using XMLHttpRequest objects. There's potential for confusion because the parameter is named response - but that's just the name we gave it. If there isn't, we are just grabbing the message property from a JavaScript Error object. If there's a successful API call, we are parsing the body of the API response. It's important to emphasize that we are grabbing properties from two completely different things in the callback above. JavaScript Error objects have a handy message property so we can get the message via ssage. However, if the previous promise returns an error, that error will be passed into the response of getElements(). In this case, if there's a main property we can go ahead and display the humidity and temperature. Remember, this main property is unique to responses from the OpenWeather API - we'd have to format our conditional differently for the response body of other APIs. If there isn't an error, the response will have a main property, which means if (response.main) will be truthy. Our callback has a conditional designed to display different content in the DOM depending on whether there was an error. Here's a basic GET request to the Open Weather API with fetch(): fetch(`$`) In other words, we can use fetch() instead of manually creating both promises and XMLHttpRequest objects. In addition to using XMLHttpRequest under the hood, the fetch() method also returns a promise. It is not called the Fetch API because it is used to make API calls. Remember, that's all an API is: an application programming interface. Note that the Fetch API is called an API because it provides a simple interface we can use in our applications. In this lesson, we'll focus on the Fetch API, which will allow us to make a basic API call with a single line of code. While XMLHttpRequest objects get the job done, there are other methods that use XMLHttpRequest objects under the hood while making our lives easier as developers.
#Fetch javascript code
Have a question? Let me hear it in the comment box below.Now that we have experience creating and using XMLHttpRequest objects to make API calls, let's simplify our code even further. We called this function to capitalize the first letter of each post title. This is a helper function that basically capitalizes the first letter of a string passed to it.
![fetch javascript fetch javascript](https://i.ytimg.com/vi/Ihrardlo_C4/maxresdefault.jpg)
The anchor tag is inserted into the H3 tag and the function returns the resulting HTML elements. Some attributes are also set for the HTML elements created in this function, such as href and target for the anchor tag. The function postElement created H3 and anchor elements and then set the post title as the inner text of the link.
![fetch javascript fetch javascript](https://res.cloudinary.com/practicaldev/image/fetch/s--7h1ayytS--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw3ayydmsvz5a9dvit5z.jpg)
![fetch javascript fetch javascript](https://s.yimg.com/ny/api/res/1.2/JS5KjfkswFPjMnWb.7qufg--/YXBwaWQ9aGlnaGxhbmRlcjt3PTk2MDtoPTYxNA--/https://s.yimg.com/hz/Finance/US_AHTTP_ENTREPRENEUR_H_NEW_LIVE/1412892761-one-apple-very-first-computer-expected-fetch-400-thousand-dollars_original.jpg)
The line that include the CSS file is:.You can see the finished project in the video. The result will be a list of post titles with clickable links, created with JavaScript fetch() and DOM manipulation.