Intermediate JavaScript: Fetch and Real Data

Your JavaScript runs in milliseconds. The internet runs in seconds. If you ask the browser to wait for a network response before continuing, your page freezes. The user clicks a button. Nothing happens for a second. That is a frozen page.

The solution: async and await. Let the network request happen in the background. Keep your page responsive. When the data arrives, update the UI.

Real example: fetching a GitHub user's profile takes 200-500ms. Without async, your entire app would pause. With async, you show a loading spinner while you wait, then display the data when it arrives.

An async function is a function that might wait for something. Inside it, you use await to pause execution until a promise resolves. Once it resolves, you pick up with the result.

Here is a real example fetching a GitHub user:

Step by step:

1. 1async function tells JavaScript "this function will wait for something."
2. 2const response = await fetch(...) starts the fetch. Execution pauses here. The page stays responsive.
3. 3When the response arrives, the next line runs: await response.json(). This parses the JSON. Execution pauses again.
4. 4Once JSON parsing finishes, console.log runs with the parsed data.

It reads like synchronous code (top to bottom, one line after another), but your page never froze. Other buttons still work. Other code still runs. The async function waits in the background.

Key insight: when you await something, you are not waiting for the whole function. You are waiting for that one line. The rest of your code continues.

That is a lot to take on trust, because none of it is visible in the code. Two tracks make it visible: what your own code is doing, and what the network is doing while it waits.

async function loadUser(id) {
  const response = await fetch(url);
  const user = await response.json();
  render(user);
}

Switch to the version with await removed. Nothing throws, the console stays quiet, and the page renders undefined. That combination, code that looks right and fails silently, is why forgetting an await costs people an afternoon rather than a minute.

await works with promises. A promise is an object that represents "something that will eventually finish."

When you call fetch(), it returns a promise immediately. That promise will resolve to a Response object when the network request completes.

You don't have to await. You can also use .then():

Both work. But async/await is cleaner and reads more like normal code. Use it.

fetch() is the modern way to make network requests from the browser. It takes a URL and returns a promise that resolves to a Response object.

The Response object has:

• status, the HTTP status code (200, 404, 500, etc.)
• statusText, the status as words ("OK", "Not Found", "Internal Server Error")
• ok, boolean, true if status is 200-299, false otherwise
• headers, an object of response headers
• body, the response as a stream (rarely used directly)

To read the body, use methods like .json() or .text():

Critical gotcha: fetch() does NOT reject on HTTP errors like 404 or 500. It only rejects on network errors (no internet, DNS failed, timeout). A 404 response is still a successful fetch. You have to check response.ok yourself.

An API (Application Programming Interface) is a URL that returns data instead of a web page. You fetch from it like any other URL. Most APIs return JSON, a text format for structured data.

JSON looks like JavaScript objects:

When you fetch from an API, you get JSON as a string. .json() parses it into a JavaScript object:

How to use an API:

1. 1Read the documentation. Find the endpoint URL.
2. 2Fetch the URL. Most APIs are public and need no authentication.
3. 3Parse the JSON response.
4. 4Access the properties you need.

Example APIs (all free, no signup required):

• GitHub Users: https://api.github.com/users/[username]
• Open Weather: https://api.open-meteo.com/v1/forecast?latitude=37.7749&longitude=-122.4194&current=temperature_2m,precipitation
• JSONPlaceholder (fake data): https://jsonplaceholder.typicode.com/posts/[id], https://jsonplaceholder.typicode.com/users/[id]
• Deck of Cards (for games): https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1

Before writing code, read the API docs. They tell you:

• What the endpoint URL is
• What parameters it accepts
• What shape the response is
• Any rate limits or authentication needed

Async code can fail in multiple ways. The network dies. The API returns an error. The response is not valid JSON. Your code tries to access a property that does not exist. You need to catch these problems before they crash your page.

Use try/catch blocks:

The try block contains code that might fail. If anything throws an error, execution jumps to the catch block. The error object has a .message property.

Common errors:

• Network error (throw happens inside fetch): "Failed to fetch", network down, CORS blocked, bad URL
• HTTP error (throw happens after checking response.ok): "HTTP 404: Could not find user", you threw this
• JSON parse error (throw happens inside .json()): The response was not valid JSON
• Property access error (throw happens when accessing user.name): The API returned a different shape than expected, and the property doesn't exist

The pattern:

1. 1Wrap risky code in try.
2. 2Check response.ok and throw if needed.
3. 3Catch any error and handle it gracefully (log, return a default, show an error state).

As your project grows, split async functions into separate files. Use export to make functions available, and import to use them.

Create utils/github.js:

Then in your React component:

Benefits:

• github.js owns all GitHub API calls. If the API changes, you fix it in one place.
• The component is clean. It calls getGitHubUser() without knowing how fetching works.
• You can test github.js separately from the component.

Let's build a real, production-ready component: a weather card that fetches current temperature from a real API.

We will use the Open-Meteo API, which is free and needs no authentication. We will display:

• Current temperature
• Weather condition (sunny, rainy, etc.)
• Humidity and wind speed
• A loading state while fetching
• An error state if the API fails

Step 1: Create the API utility

File: utils/weather.js

Step 2: Build the component

File: components/WeatherCard.jsx

Step 3: Basic CSS

How it works:

1. 1When the component mounts, useEffect runs and calls getWeather() with the coordinates.
2. 2setLoading(true) shows the spinner.
3. 3getWeather() fetches from the API and parses the JSON.
4. 4The weather object updates, and the component re-renders with the data.
5. 5If anything fails, the error state shows.

To use it:

Pass different coordinates and watch it fetch real weather for each city, all at the same time, without blocking.

Once you finish the build, try these:

GitHub Users API

• Endpoint: https://api.github.com/users/[username]
• No authentication needed
• Build a component that shows a GitHub user's profile, repos, and followers

JSONPlaceholder (fake API for learning)

• Endpoints: https://jsonplaceholder.typicode.com/posts/[id], /users/[id], /comments/[id]
• Returns fake blog data
• Perfect for testing without worrying about rate limits

Deck of Cards (for games)

• Endpoint: https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1
• Returns a shuffled deck. Use /draw/?count=5 to draw cards
• Great for building card games

Star Wars API (SWAPI)

• Endpoints: https://swapi.dev/api/people/[id], /films/[id], /planets/[id]
• No authentication, no rate limit
• Fun for building Star Wars apps

The process is always the same: fetch the URL, check response.ok, parse JSON, extract what you need, handle errors.

When async code breaks, the error stack trace tells you exactly where. Pay attention.

Error inside fetch():

This is a network error. Causes: bad URL, server down, CORS blocked, no internet.

Error inside .json():

The response was not valid JSON. Maybe the server returned HTML instead of JSON (happens on 500 errors). Check response.ok before calling .json().

Error accessing a property:

The API returned a different shape than you expected. The property does not exist. Log the response to see what you actually got:

Error inside try block: Caught by catch. Good.

Error outside try block: Crashes the page. This tells you your code structure leaked. Move the risky code into the try block.

How to debug:

1. 1Look at the error message. It tells you what broke.
2. 2Look at the line number. It tells you where it broke.
3. 3The error location is a hint about why. Is it a network error? A JSON parse error? A data shape error?
4. 4Add console.log statements around the risky lines to see what is actually happening: ``javascript console.log("Before fetch"); const response = await fetch(url); console.log("After fetch, status:", response.status); const data = await response.json(); console.log("Parsed data:", data); ``

Most async errors are one of three things: the network failed, the response was not what you expected, or you forgot to handle an error. The error message and line number tell you which.

You have learned async/await, fetch, APIs, JSON, error handling, and modules. Now prove it.

Task 1: Build the weather card from this module.

• Copy the API utility and component code.
• Get it rendering with real weather data from Open-Meteo.
• Verify loading state appears while fetching.
• Introduce an error (wrong API URL) and verify error state shows.

Task 2: Add a second card with different data.

• Pick a different API from the list above (GitHub, JSONPlaceholder, etc.).
• Fetch from it.
• Display the data in a card component.
• Handle loading and error states.

Task 3: Wire up a user interaction.

• Add an input field that lets you change the city coordinates.
• When the input changes, re-fetch the weather.
• Verify the new data appears without refreshing the page.

Task 4: Verify error handling.

• Break the API URL on purpose.
• Break the JSON parsing (fetch an API that returns HTML, not JSON).
• Verify that errors are caught and displayed, not crashing the page.

Success criteria:

If you can fetch, parse, handle errors, and wire it into React, you are ready for the next module. You have moved beyond isolated functions. You are building real, data-connected interfaces.