What is an API? A Visual Explanation

What is an API? A Visual Explanation

If you have ever wondered how a weather app gets temperature data or how a website loads your social media feed, the answer is an API. APIs are everywhere, and understanding them is essential for any web developer.

What Does API Stand For?

API stands for Application Programming Interface. In simple terms, it is a messenger that takes a request from one software system, delivers it to another, and brings back the response. You do not need to know how the other system works internally; you just need to know what to ask for and how to ask.

The Restaurant Waiter Analogy

Think of a restaurant. You sit at a table and look at the menu. You do not go into the kitchen to cook your own food. Instead, you tell the waiter what you want, the waiter takes your order to the kitchen, and the waiter brings your food back. The waiter is the API. You are the client, the kitchen is the server, and the food is the data.

A Real Example: Weather App

When you open a weather app, it needs current temperature data. The app sends a request to a weather API with your location. The API fetches that data from a weather service and returns it to the app. The app then displays it on your screen.

REST APIs

Most web APIs follow a style called REST. In a REST API, you communicate using URLs and HTTP methods:

• GET: Retrieve data (like fetching weather info)
• POST: Send new data (like creating a new account)
• PUT: Update existing data
• DELETE: Remove data

// Example API request using fetch
fetch('https://api.weather.com/current?city=London')
  .then(response => response.json())
  .then(data => {
    console.log('Temperature:', data.temperature);
  });

Understanding JSON

Most APIs send data in JSON format. JSON looks like JavaScript objects with key-value pairs. It is lightweight and easy to read, which is why it became the standard for web APIs.

{
  "city": "London",
  "temperature": 18,
  "condition": "Cloudy"
}

Using fetch() in JavaScript

The fetch() function is built into modern browsers. It lets you make API requests directly from your JavaScript code. You pass it a URL, and it returns a promise with the response. You can then convert that response to JSON and use the data however you like.