PUT vs. POST vs. PATCH Explained

PUT, PATCH and POST are three methods that can be used to update, create or modify an existing code resource. Understanding the difference between the three of them is critical both for coding and in interviews.

In fact, I was recently asked to explain the difference between PUT and PATCH in one of my interviews. As common an interview question as you might think it is, it’s important to brush up on the differences between each method and when to use them. 

Let’s do a brief review of each before diving into the differences.

What’s the Difference Between PUT, PATCH and POST?

What Is POST?

• Create in CRUD
• A method to create a new, subordinate resource into the collection of resources.
• When creating a new resource, the server will automatically assign an ID to this new resource.
• If successfully created, it will return the HTTP status code 201 (CREATED) and return a location-header with a link, like https://www.example.com/recipes/1.
• This method is neither safe nor idempotent. In other words, invoking two identical POST requests will result in two different resources containing the same information

POST Syntax

const axios = require('axios')

axios.post('https:sample-endpoint.com/user', {
    Name: 'Fred',
    Age: '23'
  })
  .then(function (response) {
    console.log(response);
  })

What Is PUT?

• Update in CRUD
• A method used to primarily update an existing resource. If the resource does not exist, the API may decide to create a resource.
• If successfully updated, it will return the HTTP status code 200 (OK), or 204 (No Content) if nothing is updated. If successfully created, it will return the HTTP status code 201 (CREATED).
• This method is not safe, since it modifies (or creates) states within the resource.
• It is idempotent, since the resource will be the same and has the same state as it did in the same call if it is created or updated a resource with the same call again.

PUT Syntax

This example comes from Jason Watmore.

const article = { title: 'React PUT Request Example' };
axios.put('https://reqres.in/api/articles/1', article)
  .then(response => this.setState({ updatedAt: response.data.updatedAt }));

What Is PATCH?

• Also Update in CRUD
• A method used to make partial updates on the resource.
• If successfully updated, it will return the HTTP status code 200 (OK), or 204 (No Content) if nothing is updated.
• This method is neither safe nor idempotent.

PATCH Syntax 

This example comes from Mastering JS.

const res = await axios.patch('https://httpbin.org/patch', 'hello=world');

res.data.headers['Content-Type']; // application/x-www-form-urlencoded
res.data.json; // { hello: 'world' }

Now, let’s talk about the differences.

More on Software Engineering63 Top Angular Interview Questions to Know

What’s the Difference Between PUT vs POST?

1. Create and/or Update?

The most obvious difference is that PUT can both create and modify a resource while POST can only create a resource.

For PUT, if the Request-URI refers to an already existing resource, an update operation will happen, otherwise, it will create a new resource if the Request-URI is a valid resource URI.

The request URI is the uniform resource identifier of the resource to which the request applies. While URIs can theoretically refer to either uniform resource locators (URLs) or uniform resource names (URNs), at the present time a URI is almost always an HTTP URL that follows the standard syntax rules of Web URLs.

Its request syntax will look something like this: PUT /users/{user-id}.

Whereas for POST, the origin server accepts a request as a new subordinate of the resource identified by the Request-URI.

Its request syntax will look something like this: POST /users.

2. Idempotence

The PUT method is idempotent. Meaning if you try to send a request multiple times, this is equivalent to a single request modification.

Whereas, the POST method is not idempotent. If you retry to send a request multiple times, you will end up having multiple resources with multiple different URIs on the server.

3. In Practice

Generally speaking, the PUT method is used for UPDATE operations while the POST method is used for the CREATE operations.

What’s the Difference Between PUT vs. PATCH?

1. Update Partially or Fully

PUT and PATCH can both be used for updating resources. However, the biggest difference between these two is that one can update and replace the resource while the other one can update partially.

In other words, when making a PUT request, the enclosed entity, a specific place you are making request on, is viewed as the modified version of the resource, and the client is requesting to replace with the new info; when making a PATCH request, it modifies only some part of the resource.

Let's say we have this house:

// House on plot 1
{
  address: 'plot 1',
  owner: 'segun',
  type: 'duplex',
  color: 'green',
  rooms: '5',
  kitchens: '1',
  windows: 20
}

PUT

// PUT request payload to update windows of House on plot 1
{
  address: 'plot 1',
  owner: 'segun',
  type: 'duplex',
  color: 'green',
  rooms: '5',
  kitchens: '1',
  windows: 21
}

PATCH

// Patch request payload to update windows on the House

{

  windows: 21

}

2. Idempotence

PUT is idempotent with reasons mentioned above, while PATCH is not idempotent. If a request is reattempted to be made, it will result in a failed request (Method Not Allowed). If a PATCH request is made to a non-existent URI, it would simply fail without creating a new resource like PUT.

More on Software EngineeringHow to Split a String in JavaScript

PUT vs. POST vs. PATCH Takeaways

To recap, the main differences with these methods are the idempotence and how they operate with the requests from clients.

• PUT vs. POST: Yes to creating new resources, but only PUT can update/modify resources, and it is idempotent.
• PUT vs PATCH: Yes to modify/update resources. PATCH allows us to modify the enclosed entity partially, while PUT basically replaces the entire thing.

Frequently Asked Questions