Using external APIs

Pulling data from other services into your app

⏱ Est. ~5 min

01 · Read

Most real apps don't exist in isolation. They talk to other services to get data: a weather app calls a weather API, a social app calls an auth API, an ecommerce app calls a payment API.

An API (Application Programming Interface) is just a URL that returns data instead of a web page. When you visit a website, the browser gets HTML. When your program calls an API, it gets JSON — structured data your program can use.

You learned about APIs back in Level 5. Now we'll use them in real code.

💡 Picture thisIf your server is a restaurant kitchen, an external API is a supplier. You don't grow your own tomatoes — you call the supplier (the API), place an order (the request), and they deliver (the response). When the supplier is closed (the API is down), you need a backup plan (error handling).

02 · Code example

Here's a route that fetches data from an external API. Read through it and notice three key patterns: async/await, fetch, and try/catch.

Example: API route

app.get('/api/joke', async (req, res) => {
  try {
    const response = await fetch('https://official-joke-api.appspot.com/random_joke');
    const joke = await response.json();
    res.json({
      setup: joke.setup,
      punchline: joke.punchline
    });
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch joke' });
  }
});

Notice three things: (1) async/await lets you wait for external data without freezing the server. The 'await' keyword pauses this function until the data arrives, while other requests keep being handled. (2) fetch sends an HTTP request to the external API. (3) try/catch handles errors gracefully — if the joke API is down, your server still returns a helpful error message instead of crashing.

03 · Read

When working with external APIs, some concepts come up over and over. Understanding these will save you from common mistakes.

Key points

async/await — how to wait for external data without blocking the server
API key — authentication for paid or private APIs (put it in .env!)
Rate limit — APIs cap how many requests you can make per minute
Error handling — always have a fallback when the API is down

04 · Real-machine exercise

Try adding this API route to your Level 7 Express server. It calls a free joke API that doesn't need an API key — perfect for practice.

// Add this to your app.js
app.get('/api/joke', async (req, res) => {
  try {
    const response = await fetch('https://official-joke-api.appspot.com/random_joke');
    const joke = await response.json();
    res.json({ setup: joke.setup, punchline: joke.punchline });
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch joke' });
  }
});

05 · Fill in the blank

To handle API errors in JavaScript, wrap the fetch call in a _____/catch block.

06 · Quiz

Why wrap API calls in a try/catch block?

JavaScript requires try/catch for all functions
To make the code run faster
To prevent the API from being called too often
To handle errors gracefully when the API is down

Other lessons in this chapter

⚠ The full interactive experience needs JavaScript. Please enable it and reload.

※ This is an independent Traditional Chinese teaching project — not an official Anthropic product. Claude™ is a trademark of Anthropic, PBC.