Common HTTP Methods in REST APIs

GET – Retrieves data from the server (read-only).
POST – Sends new data to the server (used for creating resources).
PUT – Updates or replaces an entire resource on the server.
PATCH – Partially updates a resource on the server.
DELETE – Removes a resource from the server.
OPTIONS – Retrieves allowed methods for a resource.
HEAD – Similar to GET, but only returns headers (no response body).

In React, you don’t need to explicitly call GET, POST, PUT, etc., as separate methods—these are specified in the fetch API or other HTTP client libraries like Axios.

Using `fetch()`

Yes, you can use fetch() and specify the method inside the request options. Here’s how you implement each method:

1. GET Request (Fetching Data)

2. POST Request (Creating Data)

3. PUT Request (Updating Entire Resource)

4. PATCH Request (Partially Updating Data)

5. DELETE Request (Removing Data)

Using Axios (Alternative to Fetch)

Axios simplifies API requests with automatic JSON parsing.

Install Axios:

GET Example:

POST Example:

HTTP Methods Explained

HTTP methods define the type of operation being performed on a resource in a REST API. Below are the common methods, their purposes, and how they are used in React.

1. GET (Retrieve Data)

The GET method is used to request data from a server. It does not modify the resource.

Example: Fetching a list of users.


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

2. POST (Create Data)

The POST method sends data to the server to create a new resource.

Example: Creating a new user.


      fetch('https://api.example.com/users', { method: 'POST', headers: {
      'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'John
      Doe', age: 30 }) }) .then(response => response.json()) .then(data =>
      console.log(data)) .catch(error => console.error(error));

3. PUT (Update Entire Resource)

The PUT method updates an entire resource by replacing it with new data.

Example: Updating a user’s information.


      fetch('https://api.example.com/users/1', { method: 'PUT', headers: {
      'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'John
      Doe', age: 31 }) }) .then(response => response.json()) .then(data =>
      console.log(data)) .catch(error => console.error(error));

4. PATCH (Partially Update Resource)

The PATCH method updates only specific fields of a resource, rather than replacing the whole object.

Example: Updating only the age field.


      fetch('https://api.example.com/users/1', { method: 'PATCH', headers: {
      'Content-Type': 'application/json' }, body: JSON.stringify({ age: 32 }) })
      .then(response => response.json()) .then(data => console.log(data))
      .catch(error => console.error(error));

5. DELETE (Remove Data)

The DELETE method removes a resource from the server.

Example: Deleting a user.


      fetch('https://api.example.com/users/1', { method: 'DELETE' })
      .then(response => console.log('Deleted:', response.status)) .catch(error
      => console.error(error));

Alternative: Using Axios

Axios is an alternative to fetch() that simplifies API calls and handles JSON responses automatically.

Example: GET request with Axios


      axios.get('https://api.example.com/users') .then(response =>
      console.log(response.data)) .catch(error => console.error(error));

Example: POST request with Axios


      axios.post('https://api.example.com/users', { name: 'Jane Doe', age: 25 })
      .then(response => console.log(response.data)) .catch(error =>
      console.error(error));

These methods form the foundation of RESTful APIs and are essential for handling CRUD (Create, Read, Update, Delete) operations in web applications.

REST APIs