API = Application Programming Interface

An API allows the frontend of a website to communicate with a backend/server.

For example, imagine an e-commerce website.

When the user opens the products page:

Frontend
   ↓
"Give me the products"
   ↓
API Request
   ↓
Backend Server
   ↓
Database
   ↓
API Response
   ↓
Frontend
   ↓
Display Products

The frontend doesn't directly access the database.

Instead:

Frontend → API → Backend → Database

and:

Database → Backend → API → Frontend

What is JSON?

JSON = JavaScript Object Notation

JSON is a common format used to transfer data between frontend and backend.

Example:

{
    "name": "Jee",
    "age": 25,
    "course": "JavaScript"
}

A JSON object contains:

key : value

What is Fetch API?

The Fetch API is a browser feature that allows JavaScript to communicate with servers and APIs.

Basic syntax:

fetch(url);

Example:

fetch("https://example.com/api/users");

The fetch() function makes an HTTP request.

API Request Methods

There are several HTTP methods.

Handling API Responses

When we make an API request, the server sends a response.

A response can contain:

• Status code
• Headers
• Body/data

Example:

HTTP 200 OK

{
    "name": "Jee",
    "age": 25
}

HTTP Status Codes

Students should understand the common ones.