Skip to content
beginnerPhase 29 · Web Foundations

HTTP Methods

Compare GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS methods.

30m
0 problems
Topic Progress0%

GET and POST

GET and POST are the most commonly used HTTP methods.

GET Request

  • Purpose: Retrieve data
  • Body: No body (parameters in URL)
  • Safe: Yes (doesn't modify data)
  • Idempotent: Yes (same result every time)
  • Cached: Yes
  • Bookmarkable: Yes
GET /api/users?page=1&limit=10 HTTP/1.1
Host: api.example.com
Accept: application/json

Response:

HTTP/1.1 200 OK
Content-Type: application/json

{"users": [{"id": 1, "name": "Alice"}], "total": 50}

POST Request

  • Purpose: Create new resource
  • Body: Contains data to create
  • Safe: No (modifies server state)
  • Idempotent: No (multiple creates = multiple resources)
  • Cached: No
  • Bookmarkable: No
POST /api/users HTTP/1.1
Host: api.example.com
Content-Type: application/json

{"name": "Bob", "email": "bob@example.com"}

Response:

HTTP/1.1 201 Created
Location: /api/users/2
Content-Type: application/json

{"id": 2, "name": "Bob", "email": "bob@example.com"}

When to Use Each

Scenario Method
Read a page GET
Search with parameters GET
Submit a form POST
Upload a file POST
Create a new resource POST
Login (send credentials) POST

PUT, PATCH, DELETE

PUT, PATCH, and DELETE are used for modifying resources.

PUT Request

  • Purpose: Update entire resource (replace)
  • Body: Complete updated resource
  • Idempotent: Yes
  • Use when: You have the full resource data
PUT /api/users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{"name": "Alice Updated", "email": "alice.new@example.com", "age": 30}

Response:

HTTP/1.1 200 OK
Content-Type: application/json

{"id": 1, "name": "Alice Updated", "email": "alice.new@example.com", "age": 30}

PATCH Request

  • Purpose: Partial update (modify specific fields)
  • Body: Only fields to update
  • Idempotent: Usually (depends on implementation)
  • Use when: You only have some fields to update
PATCH /api/users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{"email": "alice.updated@example.com"}

Response:

HTTP/1.1 200 OK
Content-Type: application/json

{"id": 1, "name": "Alice", "email": "alice.updated@example.com"}

DELETE Request

  • Purpose: Remove a resource
  • Body: Usually empty
  • Idempotent: Yes
  • Safe: No
DELETE /api/users/1 HTTP/1.1
Host: api.example.com
Authorization: Bearer token123

Response:

HTTP/1.1 204 No Content

PUT vs PATCH

PUT (Replace entire resource):
{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "age": 25,
  "role": "admin"
}

PATCH (Update specific fields):
{
  "email": "newemail@example.com"
}

Safe and Idempotent Methods

Understanding safe and idempotent properties helps design reliable APIs.

Safe Methods

A method is safe if it doesn't modify server state.

Method Safe Reason
GET Read-only
HEAD Like GET but no body
OPTIONS Returns allowed methods
TRACE Echoes request back
POST Creates resources
PUT Replaces resources
PATCH Modifies resources
DELETE Removes resources

Idempotent Methods

A method is idempotent if making the same request multiple times has the same effect as making it once.

Method Idempotent Why
GET Same request returns same data
HEAD Same as GET
OPTIONS Returns same allowed methods
PUT Replace = same result every time
DELETE Delete = gone, same result
PATCH ⚠️ Depends on implementation
POST Multiple creates = multiple resources

Practical Examples

// GET is safe and idempotent
GET /users/1  // Always returns user 1
GET /users/1  // Same result
GET /users/1  // Still same result

// PUT is idempotent but not safe
PUT /users/1 {name: "Alice"}  // Sets user 1 name
PUT /users/1 {name: "Alice"}  // Same result
PUT /users/1 {name: "Alice"}  // Still same result

// POST is neither safe nor idempotent
POST /users {name: "Alice"}   // Creates user 2
POST /users {name: "Alice"}   // Creates user 3
POST /users {name: "Alice"}   // Creates user 4

// DELETE is idempotent but not safe
DELETE /users/1  // Deletes user 1
DELETE /users/1  // User already deleted (204)
DELETE /users/1  // Still 204

Why This Matters

  • Retries: Safe/idempotent methods can be safely retried
  • Caching: Only safe methods should be cached
  • Browser behavior: Back button uses cached GET responses
  • Load balancers: Can retry idempotent requests on failure

Practice Problems

0/3solved
Build HTTP Methods Component

Create a reusable React component implementing HTTP Methods. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
HTTP Methods Testing

Write unit and integration tests for HTTP Methods using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
HTTP Methods Performance

Optimize HTTP Methods for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. Which HTTP method is used to create a new resource?

Question 1 options

2. What is the difference between PUT and PATCH?

Question 2 options

3. Which of these is a safe HTTP method?

Question 3 options

4. Why is GET idempotent?

Question 4 options

Flashcards

Question

What HTTP method creates resources?

Answer

POST creates new resources. PUT replaces entire resources. PATCH updates specific fields.

Question

What does 'idempotent' mean?

Answer

Making the same request multiple times has the same effect as making it once. GET, PUT, DELETE are idempotent.

Question

What is the difference between safe and unsafe methods?

Answer

Safe methods (GET, HEAD, OPTIONS) don't modify server state. Unsafe methods (POST, PUT, PATCH, DELETE) can modify data.

Question

When should you use PUT vs PATCH?

Answer

PUT when you have the complete resource to replace. PATCH when you only need to update specific fields.

Question

What is HTTP Methods?

Answer

HTTP Methods is a key concept in frontend development.

Revision Notes

Key Takeaways

  • 1.GET retrieves data and is safe/idempotent
  • 2.POST creates new resources and is neither safe nor idempotent
  • 3.PUT replaces resources (idempotent), PATCH updates partially
  • 4.DELETE removes resources (idempotent)
  • 5.Safe methods can be cached and retried safely

Interview Tips

  • Know the difference between safe and idempotent
  • Explain when to use PUT vs PATCH
  • Understand RESTful API design principles
  • Know why idempotency matters for reliability

Cheat Sheet

HTTP Methods Cheat Sheet

Method Properties:

Method Safe Idempotent Body Creates
GET No No
HEAD No No
OPTIONS No No
POST Yes Yes
PUT Yes No
PATCH ⚠️ Yes No
DELETE No No

RESTful Conventions:

  • GET /resource → List
  • GET /resource/:id → Read
  • POST /resource → Create
  • PUT /resource/:id → Update (full)
  • PATCH /resource/:id → Update (partial)
  • DELETE /resource/:id → Delete