Difference between PUT and PATCH Requests
FREE
PUT and PATCH request methods are two similar HTTP methods that are confused by the users. In the PUT request method, you change the entire data entity with the new data entity in the resource but in the PATCH request method, you need to provide the data that needs to be updated and the remaining data remains the same in the resource.
PUT Request
PUT request is the method of modifying data where the client sends data and the entire resource gets updated. The PUT request method is similar to that of the POST request method in JavaScript. The only difference between these two is that PUT only works if there is an existing resource available. In the case of POST, a new resource is created if no such resource exists
After performing the changes in the resource, the server returns a success code 2xx to the client showing that the request has been successfully applied to the resource. If the request fails for any reason, the server returns the failure code 4xx or 5xx to the client.
Example
Let us see an example to understand how the PUT request method works.
Suppose there is an entity, as shown below, which contains the name, age, and email of an individual.
- If you want to change the age in the above entity using the PUT request method, you need to provide the parameters that will remain the same along with the modified parameter.
- Else it will just replace the older entity with the newer entity provided.
Output:
Explanation:
- In the above example, first, we created a function named PutRequest that will handle the PUT request. Inside the PutRequest function, we used the fetch function to send the request. We passed the URL of the API endpoint as the first argument to the fetch function.
- We provided the necessary headers in the headers object.
- We specified the HTTP method as "PUT" in the method property.
- In the body property, we passed the data to be updated in the form of a JSON string. In this PUT example, we provide the entire updated representation of the user, including the unchanged fields.
PATCH REQUEST
The PATCH request method in JavaScript is used to update the specific parameters inside a resource entity. In this request method, you do not need to provide the parameters that remain the same. Just provide the details that you want to change, and the PATCH request method will replace those parameters with the values provided.
If the request gets successfully implemented, the server returns the success code 2xx. Otherwise, the server returns an error code to the client. Fields that the client needs to update only get updated, leaving the remaining fields untouched.
Example
Let us see an example to understand how the PATCH request method works. We will consider the same entity as discussed in the example for the PUT request.
Here,
- We do not send the parameters that remain unchanged. Therefore, while updating the age of the person, we do include parameters like name and email address.
Output:
Explanation:
- The PatchRequest function is defined using arrow function syntax.
- Inside the function, we use the fetch function to send a PATCH request to the specified URL https://reqres.in/api/users/123.
- The fetch function takes two arguments: the URL and an options object. In the options object, we specify the request method as "PATCH" and set the request headers to accept JSON and send JSON data.
- The fields that need to be updated are passed in the request body using the JSON. stringify function to convert the data to a JSON string.
- In this PATCH example, we're only updating the "age" field without providing the entire user representation.
Difference between PUT and PATCH
Now, let us see the differences between PUT and PATCH requests in JavaScript.
| PUT | PATCH |
|---|---|
| The PUT method is used to update the resource in which the client needs to send the data that updates the entire resource. | The PATCH request method is used to update the resource in which the client needs to send that specific data only that will be updated in the resources. |
| The enclosed entity in a PUT request is taken to be a modified version of the resource stored on the origin server, and the client is asking for the stored version to be replaced. | With PATCH, however, the contained entity comes with a set of guidelines outlining how to change a resource that is currently located on the origin server to create a new version. |
| HTTP PUT request is idempotent. It means that if the client tries to send multiple times requests, then it will be considered as a single modification request for the resource. | HTTP PATCH request is not idempotent. It means that if the client tries to send multiple times requests, then it will not be considered as a single modification request for the resource. |
| PUT requests have higher bandwidth. | PATCH requests have comparatively less bandwidth. |
FAQs
Q. What is the difference between PUT and POST requests?
A. The PUT request method is used to update the data in the existing resource only and it also creates the resource is not available. However, the POST request only updates the data in the existing resources. If not available, it returns an error.
Q. Are PUT and PATCH requests secure?
A. It is recommended to use HTTPS as it is a more secure protocol to use these requests in JavaScript. HTTPS is more secure than HTTP because it encrypts data and verifies website authenticity, preventing eavesdropping and ensuring data integrity.
Q. Which frameworks are used to simplify PUT and PATCH requests in JavaScript?
A. There are frameworks available that can be used to simplify the PUT and PATCH requests, for example, Axios framework.
Conclusion
- PUT request is the method of modifying data where the client sends data and the whole resource gets updated.
- The PATCH request is used to update the resource in which the client needs to send that specific data only that will be updated in the resources leaving the other data unchanged in the resources.
- It is recommended to use HTTPS as it is a more secure protocol because it encrypts data and verifies website authenticity.