HTTP Methods

GET:

This HTTP Verb is used when you want to retrieve data from an API, essentially a literal get, getting data or some data from the API endpoint. Take a look at this example:

fetch('https://jsonplaceholder.typicode.com/todos/1') // Getting a todo of id 1
      .then(response => response.json())
      .then(json => console.log(json))

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Notice that it returns an object that has userId, id, title, and completed properties. At this point, we can then display the data, and manipulate or validate data.

POST:

This HTTP Verb is different from the previous one, what this does do? Well, it simply means that you’re going to create a new resource on the server, typically along with this request you need to embed an Authorization Token to check whether you’re authorized to create a new resource and the data you want to insert or to be created. The data can be in the form of JSON or XML.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Post Title',
    content: 'Post content sample'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

This will create a new post with title of 'Post Title' and content of 'Post content sample'.

PUT:

On the other side of the coin, there’s a PUT HTTP Verb. This one is somewhat the same as POST Request with a key distinction that PUT does modify an existing resource. Conversely, on POST it does create a new resource. Note that this method is generally used when you want to replace all data of existing data with new data.

fetch('https://jsonplaceholder.typicode.com/posts/', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    id: 1,
    title: 'Post 1 Sample PUT Request',
    content: 'New Content'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Here, we’re editing an existing resource that has an id identifier of 1 changing the title and content to something new embedded in the HTTP body.

DELETE:

This HTTP Method doesn’t need much explanation as it does a literal delete of a resource or a bunch of resources on the server. Sometimes we put an identifier in the endpoint to tell the API what to delete.

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE'
})
.then(response => {
  if (response.ok) {
    console.log('Post deleted successfully');
  } else {
    console.error('Failed to delete the post');
  }
})
.catch(error => console.error('Error:', error));

PATCH:

This HTTP Verb is a bit analogous with PUT, in way that it does update an existing resource but only a partial part of it, rather than the entire data of an existing record PUT HTTP does.

fetch('https://example.com/users/1', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: 'new-email@example.com'
  })
})

Here, we’re only updating the email of an existing user with an id 1.