Posts Learn Components Snippets Categories Tags About
/

How to make PATCH Request with Fetch API

Learn how to make the PATCH request with the Fetch API

Created on Aug 31, 2021

21 views

In this snippet, you will learn how to update a resource with the Fetch API using the PATCH method. We'll be calling the external fake API to test this so let's get started.
The external fake API that we'll be calling is the "JSONPlaceholder" and below is the endpoint.
https://jsonplaceholder.typicode.com/posts/1

Updating Resource with Fetch API


To update a resource with the Fetch API is very simple and straightforward, all you have to pass in is the URL of the endpoint as the 1st parameter and an object which contains the details of the method, headers, and body as the 2nd parameter.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PATCH',
  body: JSON.stringify({
    title: 'foo',
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));
To see the response you can open the browser console tab and you will see it being log there.

Fetch PATCH Request Response


The output will be as follows, do note that the resource will not be really updated on the server but it will be faked as if.
{
  id: 1,
  title: 'foo',
  body: '...',
  userId: 1
}

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

Load comments for How to make PATCH Request with Fetch API

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More