Fetch Request Cheat Sheet

2 min readDec 28, 2020

I remember when I started using fetch I had trouble remembering the syntax. So, I wanted to make a blog that would help others with this problem. This blog will contain examples of GET, POST, PUT, PATCH, and DELETE requests using fetch.

GET Request

The Get request will is used to request data from the server.

fetch('https://example.com/tips')
.then(res => res.json())
.then(json => console.log(json)
//res stands for response but you can name this whae ever you want.
//.json() will take our response and format in json//This request would retun all the tipsfetch('https://example.com/tips/2')
.then(res => res.json())
.then(json => console.log(json)
//The request above will return tip number 2

POST Request

The POST request is used to add data to the server. Say the server was an API that listed all people who worked at a company. You would use the Post request to add to that list when the company hired new employees.

fetch('https://example.com/tips', {
 method: 'POST',
 headers: {
  "Content-type": "application/json"
},
 body: JSON.stringify({
  accountId: 21,
  tipName: "life saver",
  tip: "clap this blog"
 })
})
.then(res => res.json())
.then(json => console.log(json)//This will add the tip life saver to the tips list

PUT Request

The PUT request is used when you want to modify a resource, but using PUT the request version will hold a completely new version.

fetch('https://example.com/tips/6', {
 method: 'PUT',
 headers: {
  "Content-type": "application/json"
},
 body: JSON.stringify({
  accountId: 21,
  tipName: "big time life saver",
  tip: "clap this blog"
 })
})
.then(res => res.json())
.then(json => console.log(json)//Here this will change life saver in to big time life saver

PATCH Request

A PATCH request is very similar to the PUT request the only difference is the request body only needs to hold the specific resource you want to change.

fetch('https://example.com/tips/6', {
 method: 'PATCH',
 headers: {
  "Content-type": "application/json"
},
 body: JSON.stringify({
  tip: "clap this blog 5 times for me"
 })
})
.then(res => res.json())
.then(json => console.log(json)//Here this will change "clap this blog" to "clapp this blog 5 times"

DELETE Request

The Delete request is used to delete a resource.

fetch('https://example.com/tips/6', {
 method" 'DELETE'
})//This is going to delete tip 6