Monicah Ajeso

Posted on Mar 25

APIs

#javascript #api #beginners #webdev

"You've been using APIs your whole developer life. You just didn't know what to call them."

Every time you check the weather, log into Google, or get a "Wrong password" message — something is happening behind the scenes. Data is being requested. Responses are being sent back. And somewhere in the middle, an API is doing its job.

What is an API?

API stands for Application Programming Interface — which sounds intimidating, but all it means is: a way for two applications to talk to each other.

Think about a power socket. You don't know how electricity gets to your house — the wires, the grid, the power station. You just plug in. The socket gives you one clean, standard way to access the power without dealing with any of the complexity underneath.

APIs work the same way — they hide the complexity and give you one clean point of access to data or functionality you need.

How APIs Work

Every API conversation has two sides — a request and a response.

Your App  →  REQUEST  →  API  →  Server
Your App  ←  RESPONSE ←  API  ←  Server

Your application sends a request — asking for data or telling the server to do something
The API takes that request to where the data lives
The server does its thing
The API sends back a response — either the data you asked for, a confirmation, or an error

You never touch the server directly. The API is the middleman — and it's very good at its job.

Key Concepts

Endpoints

An endpoint is a specific URL where an API can be accessed. Think of it as a door — each door leads to something different.

https://api.example.com/users       → get all users
https://api.example.com/users/1     → get user with id 1
https://api.example.com/posts       → get all posts

HTTP Methods

When you make a request, you also specify what you want to do. These are called HTTP methods:

Method	What it does
`GET`	Read / fetch data
`POST`	Create new data
`PUT`	Replace existing data entirely
`PATCH`	Update part of existing data
`DELETE`	Remove data

💡 Think of it like: GET is asking. POST is adding. PUT/PATCH is editing. DELETE is removing.

Status Codes

Every response comes with a status code — a number that tells you what happened.

Code	Meaning
`200`	OK — everything worked
`201`	Created — new data was made
`400`	Bad Request — something wrong with your request
`401`	Unauthorized — you need to log in
`404`	Not Found — that doesn't exist
`500`	Server Error — something broke on their end

💡 Think of it like: 2xx = good, 4xx = your fault, 5xx = their fault.

JSON

Most APIs speak JSON (JavaScript Object Notation) — a lightweight format for sending data back and forth. It looks like this:

{
  "name": "Monicah",
  "role": "developer",
  "learning": ["JavaScript", "React"]
}

It's just key-value pairs. JavaScript reads it natively, which is one of the reasons APIs and JavaScript work so well together.

The Most Important APIs in JavaScript Development

You don't always have to call an external server to use an API. JavaScript ships with built-in browser APIs that you use constantly — you've probably used them already without thinking about it.

1. The DOM API

The Document Object Model (DOM) API is what lets JavaScript interact with your HTML and XML documents. Every time you select an element, change text, add a class, or listen for a click — you're using the DOM API.

// Selecting an element
const title = document.querySelector("h1");

// Changing content
title.textContent = "Hello, World!";

// Listening for events
document.querySelector("button").addEventListener("click", function() {
  console.log("Button clicked!");
});

💡 Think of it like: The DOM API is JavaScript's remote control for your webpage. You point it at any element and tell it what to do.

2. The Fetch API

The Fetch API is how JavaScript makes network requests — asking an external server for data. This is the one that ties directly to Promises (remember those?). fetch() always returns a Promise.

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log("Error:", error));

💡 Think of it like: The Fetch API is your app's messenger — it goes out to a server, grabs what you need, and brings it back.

3. The Web Storage API

The Web Storage API lets you save data directly in the user's browser — no server needed. It has two options:

localStorage — data persists even after the browser is closed
sessionStorage — data is cleared when the tab is closed

// Saving data
localStorage.setItem("username", "Monicah");

// Reading data
const user = localStorage.getItem("username");
console.log(user); // "Monicah"

// Removing data
localStorage.removeItem("username");

💡 Think of it like: localStorage is a sticky note on the user's browser. sessionStorage is a sticky note that disappears when they leave the page.

Putting it all together

API	What it does	Where data lives
DOM API	Controls the webpage	The browser document
Fetch API	Makes network requests	External server
Web Storage API	Saves data client-side	User's browser

Each one gives you a clean, standard interface to something complex underneath — which is exactly what an API is supposed to do.

Promises taught us how JavaScript handles waiting. APIs are what it's actually waiting for — and now you know how to speak their language.

And that's not just a promise — that's the whole contract.

Happy coding!!! 😊

DEV Community