🌐API Request Visualizer

Learn HTTP/REST APIs by visualizing requests, responses, status codes, and data flow. See exactly what happens when you make an API call.

Learning Topic

Visualize HTTP requests and responses with different methods

Interactive Simulator

🌐 REST API Simulator - Send requests and watch the complete request/response flow! Try different HTTP methods and endpoints to see how REST APIs work.

📤 Request Builder

HTTP Method

Endpoint

📚 HTTP Methods Quick Reference

GET

Retrieve data

✓ Safe

POST

Create new resource

PUT

Replace entire resource

PATCH

Update parts of resource

DELETE

Remove resource

Code Reference

JavaScript / Fetch API

1// Making HTTP requests with fetch API
2 
3// GET - Retrieve data
4fetch('https://api.example.com/users')
5  .then(response => response.json())
6  .then(data => console.log(data));
7 
8// POST - Create new resource
9fetch('https://api.example.com/users', {
10  method: 'POST',
11  headers: {
12    'Content-Type': 'application/json',
13  },
14  body: JSON.stringify({
15    name: 'Alice',
16    email: 'alice@example.com'
17  })
18})
19  .then(response => response.json())
20  .then(data => console.log(data));
21 
22// PUT - Replace entire resource
23fetch('https://api.example.com/users/1', {
24  method: 'PUT',
25  headers: {
26    'Content-Type': 'application/json',
27  },
28  body: JSON.stringify({
29    name: 'Alice Updated',
30    email: 'alice@example.com'
31  })
32});
33 
34// DELETE - Remove resource
35fetch('https://api.example.com/users/1', {
36  method: 'DELETE'
37});

📚 Understanding APIs

REST (Representational State Transfer) is an architectural style for APIs. HTTP Methods (CRUD operations): - **GET**: Read/retrieve data (safe, idempotent) - **POST**: Create new resources (not idempotent) - **PUT**: Replace entire resource (idempotent) - **PATCH**: Update parts of resource (not idempotent) - **DELETE**: Remove resource (idempotent) Status Codes: - **2xx**: Success (200 OK, 201 Created) - **3xx**: Redirection (301 Moved, 304 Not Modified) - **4xx**: Client errors (400 Bad Request, 404 Not Found) - **5xx**: Server errors (500 Internal Error, 503 Unavailable)

💡 Key Learnings

→REST uses standard HTTP methods for CRUD operations
→GET is safe (no side effects) and idempotent (repeatable)
→POST creates resources, not idempotent (creates duplicates)
→PUT replaces entire resources, PATCH updates parts
→Status codes indicate success/failure (2xx=success, 4xx=client error, 5xx=server error)
→Headers carry metadata (Content-Type, Authorization, etc.)
→Response times vary based on network and server performance

🎯 API Fundamentals

What is an API?

Application Programming Interface - a way for applications to communicate with each other. REST APIs use HTTP to send requests and receive responses.

Request → Response

Client sends a request (method, URL, headers, body). Server processes it and returns a response (status code, headers, data). Simple as that!

Why REST?

REST is stateless, scalable, and uses standard HTTP. It's the most common API architecture for web services. Easy to understand and implement.