Making My First API Call

· 4 min read
javascriptapisfetchasync

I just made my first successful API call, and I’m honestly excited about it.

It took me longer than I’d like to admit to understand how this works, but now that I do, I can see how powerful it is.

What Are APIs?

I kept hearing about APIs but didn’t really understand what they were.

Here’s what I understand now: an API (Application Programming Interface) is basically a way for your code to request data from a server.

Instead of hardcoding all your data, you can fetch it from somewhere else:

  • Weather data
  • User information
  • News articles
  • Basically anything

My First Attempt

I tried to fetch data from a public API (JSONPlaceholder, which is made for practice):

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data));

When I saw the data appear in my console, I was amazed. My JavaScript code just got data from the internet!

Understanding Promises

This is where I got confused for a while: promises.

The fetch() function doesn’t immediately give you the data. It gives you a promise that the data will arrive eventually.

You use .then() to say “when the data arrives, do this with it.”

It took me a while to wrap my head around this asynchronous concept.

Building Something Real

To really understand APIs, I built a simple weather app:

  1. User enters a city name
  2. JavaScript fetches weather data from an API
  3. Display the temperature and conditions

This project taught me:

  • How to make API calls
  • How to handle the response
  • How to display the data on the page
  • How to handle errors (what if the city doesn’t exist?)

Common Mistakes I Made

Forgetting to convert the response to JSON: The response from fetch() isn’t immediately usable. You need to call .json() on it first.

Not handling errors: My code broke when the API call failed. I learned to use .catch() to handle errors.

Hardcoding API keys in my code: I learned (the hard way) that you shouldn’t put API keys directly in your JavaScript if it’s public. Still figuring out the right way to handle this.

Not reading the API documentation: Each API is different. I wasted time trying to guess how to use an API instead of just reading the docs.

Async/Await

After learning promises, I discovered async/await, which makes the code easier to read:

async function getWeather(city) {
  try {
    const response = await fetch(`https://api.example.com/weather?city=${city}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching weather:', error);
  }
}

This does the same thing as promises but looks more like “normal” code.

Free APIs I’m Using for Practice

  • JSONPlaceholder: Fake data for testing
  • OpenWeatherMap: Weather data (free tier)
  • REST Countries: Information about countries
  • Dog API: Random dog pictures (because why not)

What I’m Learning

APIs are everywhere: Almost every modern web app uses APIs to get data.

Reading documentation is a skill: API docs tell you what endpoints exist, what parameters they accept, and what data they return.

Error handling matters: Networks fail, APIs go down, users enter invalid data. You need to handle these cases.

CORS is confusing: I ran into CORS errors and still don’t fully understand them. Something about browsers blocking requests for security reasons.

What’s Next

Now that I understand APIs, I want to:

  • Build more projects that use real data
  • Learn about authentication (some APIs require login)
  • Understand CORS properly
  • Maybe build my own API (I’ve heard about Node.js for this)

Advice for Beginners

Start with simple, free APIs: Don’t try to use a complex API with authentication for your first project.

Use the browser’s Network tab: Open DevTools and look at the Network tab to see what’s actually being sent and received.

Read the API documentation: I know it’s boring, but it saves so much time.

Handle errors: Don’t just assume the API call will work. Use try/catch or .catch().

Build something: Reading about APIs is one thing. Actually fetching data and displaying it is when it clicks.

Making API calls felt like magic at first. Now it’s just another tool in my toolkit.

If you’re learning JavaScript, definitely learn how to work with APIs. It opens up so many possibilities.

All articles