You've learned what APIs are, how they work and how to authenticate. Now it's time to actually CALL one. This lesson is all about making API requests with JavaScript's fetch() function.
What is Fetch?
fetch() is a built-in JavaScript function that makes HTTP requests. It's the standard way to call APIs from web browsers and Node.js.
The basic idea is pretty simple.
Tell fetch where to go (the URL)
Tell it what to do (GET, POST, etc.)
Wait for the response
Use the data
Your First Fetch Request
Let's start with the simplest API call there is, a plain GET request.
fetch("https://api.example.com/products") sends a GET request to that URL.
Step 2. Convert the response to JSON
.then(response => response.json()) takes the response and turns it into a JavaScript object you can work with.
Step 3. Use the data
.then(data => { console.log(data); }) lets you do something with the data. Here we just print it out.
Using Async/Await
There's a cleaner way to write fetch calls using async and await. This is the modern way most people do it.
Example
async function getProducts() {
const response = await fetch("https://api.example.com/products");
const data = await response.json();
console.log(data);
}
Same result, but it reads a lot more like regular top-to-bottom code. The await keyword just pauses until the fetch finishes.
Making a GET Request
GET requests are for reading data, and they're the simplest kind.
Example
async function getUser(userId) {
const response = await fetch(`https://api.example.com/users/${userId}`);
const user = await response.json();
return user;
}
// Usage
const user = await getUser(42);
console.log(user.name);
Making a POST Request
POST requests send data to create something new, so you have to include that data in the request body.
Example
async function createUser(name, email) {
const response = await fetch("https://api.example.com/users", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
name: name,
email: email
})
});
const newUser = await response.json();
return newUser;
}
// Usage
const user = await createUser("Sarah", "sarah@example.com");
console.log(user.id); // The new user's ID
The important bits.
method: "POST" tells fetch this is a POST request
headers tells the server we're sending JSON
body holds the data, converted to a JSON string
Making a PUT Request
PUT requests update existing data. They look a lot like POST. Remember PUT replaces the WHOLE thing, so you send every field, even the ones that didn't change.
Stuff goes wrong sometimes. The server's down, or you sent bad data, or the WiFi at the coffee shop decided to take a nap. Your code should be ready for it.
Example
async function getUser(userId) {
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
// Something went wrong
if (response.status === 404) {
console.log("User not found");
return null;
}
throw new Error(`HTTP error: ${response.status}`);
}
const user = await response.json();
return user;
} catch (error) {
console.log("Request failed:", error.message);
return null;
}
}
The important bits.
response.ok is true if the status code is 200-299
response.status gives you the actual status code
try/catch handles network errors (like no internet connection)
A Complete Example
Let's put it all together into a server-side Node.js example. Keep API_KEY on your server. Never bundle it into browser JavaScript.
In a browser, call your own backend instead. The backend keeps the provider key and makes the provider request.
Example
const response = await fetch('/api/products');
if (!response.ok) throw new Error('Could not load products');
const products = await response.json();
Once you can do this, you can automate stuff that used to eat your whole afternoon. In one demo, Claude Code spun up 13 subaccounts, crawled the sites and rebuilt the forms in just under 12 minutes (lil humblebrag, I know). That kind of thing gets a whole lot less mysterious once calls like these stop scaring you.
TL;DR
fetch() is JavaScript's built-in way to make API calls
Use async/await for cleaner, easier-to-read code
GET requests just need a URL
POST, PUT, DELETE need a method and often a body
Include Content-Type: application/json when sending JSON
Add authentication with the Authorization header
Check response.ok so errors don't slip past you
What's Next?
You know how to call an API now. But what if you want the API to call YOU? That's what webhooks do, and they're up next...
