This lesson's interactive features are locked, please to keep using them

JavaScript's Fetch API

In this course, we'll be using JavaScript's built-in fetch API to make HTTP requests. We already used it in the last two assignments!

The fetch function is made available to us by the JavaScript language running in the browser, all we have to do is provide it with the parameters it requires.

Using Fetch

const response = await fetch(url, settings);
const responseData = await response.json();

We'll go in-depth on the various things happening in this standard fetch call later, but let's cover some basics for now.

response is the data that comes back from the server
url is the URL we are making a request to
settings is an object containing some request-specific settings
The first await tells JavaScript to wait until the response comes back from the server before continuing
The second await waits for response.json() to convert the response data from the server into a JavaScript object

Assignment

Fix the bug in the code.

The problem is that we aren't waiting for the response to come back before continuing with our code. We're calling .json on a pending Promise instead of the actual response.

More on this magical .json method later.