Skip to content

JavaScript Fetch API: GET, POST, PUT, DELETE Requests and Handling Custom Headers

Master the Fetch API in JavaScript with comprehensive examples on making GET, POST, PUT, and DELETE requests.

Enhance your web development skills by learning how to handle custom headers for authentication and authorization.

GET Request 
fetch('url', {
    headers: { 'Content-Type': 'application/json' }
  })
  .then(response => response.text())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });
POST Request 
fetch('url', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ key: 'value' })
  })
  .then(response => response.text())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });
PUT Request 
fetch('url', {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ key: 'value' })
  })
  .then(response => response.text())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });
DELETE Request 
fetch('url', {
    method: 'DELETE',
    headers: { 'Content-Type': 'application/json' }
  })
  .then(response => response.text())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });
Handling Custom Headers 
fetch('url', {
    headers: { 'Authorization': 'Bearer token' }
})
.then(response => response.text())
.then(data => {
    console.log(data);
})
.catch(error => {
    console.error(error);
});