Hackforge Academy

Explanation

A REST API in frontend is used to communicate with a backend server. The frontend sends HTTP requests (GET, POST, PUT, DELETE) and receives data, usually in JSON format. This allows web pages to fetch, display, create, update, or delete data without reloading the page.

Code:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Explanation

GET request is used to retrieve data from the server.

Code:

fetch('/api/students')
  .then(res => res.json())
  .then(data => console.log(data));

Explanation

POST request is used to send new data to the server.

Code:

fetch('/api/students', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Praveen',
    course: 'Java'
  })
});

Explanation

PUT request is used to update existing data on the server.

Code:

fetch('/api/students/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Praveen Kumar',
    course: 'Spring Boot'
  })
});

Explanation

DELETE request is used to remove data from the server.

Code:

fetch('/api/students/1', {
  method: 'DELETE'
});