Fetching JSON Data with `fetch()`

What is an API and Why Do We Fetch?

In web development, an API (Application Programming Interface) is often a set of rules and protocols that allows one piece of software to interact with another. A REST API is a common type that allows us to request data from a server over the web using standard HTTP methods.

The fetch() function is the modern JavaScript tool for making these requests. It's built into all modern browsers, and it's based on Promises, making it a perfect fit for the async/await syntax you just learned.

Making a Basic GET Request

The simplest fetch call takes one argument: the URL of the API endpoint you want to get data from.

However, fetch has a two-step process for getting data, which can be tricky at first.

1. Calling fetch() starts the request and returns a Promise.
2. When that Promise resolves, it gives you a Response object, not the final data. This object contains metadata about the response, like the HTTP status and headers.
3. To get the actual data, you need to call a method on the Response object, such as .json(), to parse the response body. This method also returns a Promise!

Let's watch a short video that introduces fetch and demonstrates this two-step process with async/await.

As you saw, the Response object gives you a lot of information.

The entire process is beautifully illustrated by the diagram below. The key takeaway is the two-promise chain: one for the network request itself, and a second for parsing the body of the response.

Putting it all together, the standard async/await pattern for fetching JSON looks like this:

async function getSomeData(url) {
  // We'll add error handling in the next section
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
}

The Most Important Part: Handling Errors Correctly

Here's a critical detail about fetch() that trips up many developers: fetch() only rejects its promise if there is a network failure.

• If you lose your internet connection, the promise will reject, and your catch block will run.
• However, if the server responds with an error code like 404 Not Found or 500 Internal Server Error, the fetch() promise will resolve successfully.

This means you are responsible for checking the HTTP status of the response to see if the request was actually successful. The easiest way to do this is with the response.ok property, which is true for any successful status code (in the 200-299 range).

Let's dive into the MDN documentation, the definitive source for web APIs, to formalize this concept.

Based on this, our robust pattern for fetching data becomes:

async function getSomeData(url) {
  try {
    const response = await fetch(url);

    // Check if the response was successful
    if (!response.ok) {
      // If not, throw an error with the status
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    console.log(data);

  } catch (error) {
    // This will catch network errors and the error we threw above
    console.error("Could not fetch data:", error);
  }
}

// Example of a bad request that our code will handle
getSomeData('https://pokeapi.co/api/v2/pokemon/this-does-not-exist');

Practical Application: Fetching Pokémon Data

Now let's apply this to a small, practical project. Since your goal is to build web applications, seeing how fetch interacts with the user interface is a great next step.

The following video walks through building a tiny app that fetches Pokémon data based on user input and displays the Pokémon's image (its "sprite"). This will give you a preview of DOM manipulation, which we'll cover in the next module.

This project is a perfect example of the "80/20" principle you value: a simple fetch call is the 20% of effort that provides 80% of the dynamic functionality in many web apps.

Conclusion

You've just learned a cornerstone of modern web development. By combining the power of async/await with the fetch() API, you can now retrieve data from countless services across the web and start building truly dynamic applications.

Key Takeaways:

• The fetch() API is the standard for making HTTP requests in JavaScript.
• Fetching data is a two-promise process: first fetch(url) resolves to a Response object, then response.json() resolves to the actual data.
• Error handling is crucial: fetch() only fails on network errors. You must always check response.ok to handle HTTP errors like 404s or 500s.
• The standard pattern combines async/await with a try...catch block and an if (!response.ok) check for robust data fetching.

In our next lesson, we'll cover the other side of the coin: sending data to an API using POST requests. This will enable us to create new resources on a server, a key step toward building full-stack applications.