1.5 APIs & Data Flow

Time: ~25 minutes

What You'll Learn

• What an API actually is (in plain English)
• How requests and responses work
• Status codes and what they mean
• Why your app keeps breaking when it tries to load data

What Is an API?

API stands for Application Programming Interface, but forget that. Here's what it actually is:

An API is a way for your app to ask another computer for data.

When your app shows weather information, it doesn't know the weather. It asks a weather service's API. When it shows a list of products, it asks your database through an API. When it logs you in, it asks an authentication API to check your password.

Almost every app you build with AI will talk to at least one API.

Requests and Responses

Every API interaction has two parts:

The Request (what you send)

A request has:

• URL -- Where to send it (https://api.example.com/users)
• Method -- What you want to do (GET, POST, PUT, DELETE)
• Headers -- Metadata like authentication tokens
• Body -- Data you're sending (for POST and PUT)

// Asking for a list of users
const response = await fetch('https://api.example.com/users', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer your-token-here'
  }
})

The Response (what comes back)

A response has:

• Status code -- A number indicating success or failure
• Headers -- Metadata about the response
• Body -- The actual data (usually JSON)

{
  "users": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
  ]
}

HTTP Methods in Plain English

Think of it like a restaurant:

• GET = reading the menu
• POST = placing an order
• PUT = changing your order
• DELETE = canceling your order

Status Codes

Status codes tell you what happened. You don't need to memorize all of them, but know these:

The Good

• 200 -- Success. Everything worked.
• 201 -- Created. Your new thing was made.

The "You Messed Up"

• 400 -- Bad Request. You sent something wrong.
• 401 -- Unauthorized. You're not logged in.
• 403 -- Forbidden. You're logged in but not allowed.
• 404 -- Not Found. That thing doesn't exist.
• 422 -- Unprocessable. The data you sent doesn't make sense.

The "Server Messed Up"

• 500 -- Internal Server Error. Something broke on their end.
• 502 -- Bad Gateway. The server behind the server broke.
• 503 -- Service Unavailable. The server is down or overloaded.

Why Your App Keeps Breaking

The most common API-related bugs:

1. Not handling loading states

Your component tries to render data before it's loaded:

// This crashes if users hasn't loaded yet
function UserList({ users }) {
  return users.map(user => <div>{user.name}</div>)
}
 
// This handles loading gracefully
function UserList({ users }) {
  if (!users) return <p>Loading...</p>
  return users.map(user => <div key={user.id}>{user.name}</div>)
}

2. Not handling errors

The API returns an error but your code assumes success:

// Dangerous - assumes everything works
const data = await fetch('/api/users').then(r => r.json())
 
// Safe - checks for errors
const response = await fetch('/api/users')
if (!response.ok) {
  console.error('API error:', response.status)
  return
}
const data = await response.json()

3. Wrong URL or method

A typo in the URL or using GET when the API expects POST.

4. Missing authentication

The API requires a token but you forgot to include it in the headers.

The Data Flow

Understanding how data moves through your app:

User clicks button
  -> Your code calls an API
    -> API processes the request
      -> API sends back data
    -> Your code receives the data
  -> Your component re-renders with the new data
User sees the result

Every step in this chain can fail. Good code handles failures at every step.

Practice

1. Open your browser's developer tools and go to the Network tab
2. Visit any website and watch the requests fly by
3. Click on a request and look at the status code, headers, and response
4. Find a request that returned a non-200 status code

Key Takeaways

• APIs are how your app asks other computers for data
• Every API call is a request (what you send) and a response (what comes back)
• Status codes tell you what happened (200 = good, 4xx = your fault, 5xx = their fault)
• Most API bugs come from not handling loading, errors, or authentication

Next Up

Your app works, your files are organized, you can debug errors, and you understand APIs. There's one more critical skill: saving your work so you never lose it.

Continue to 1.6 Git Basics