Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
In this article, we are going to learn about the HTTP Patch Method in React JS. Making a request using the Patch method is a common thing when working with APIs. Since we know how to access API, we mostly use fetch() and axios(). So we will make patch requests using these two methods.
What is the HTTP PATCH Method in React JS?
The patch method is the same as a put method, which sends data without showing background processes, but there is a difference between put and patch is, PUT is a method of modifying resources where the client sends data that updates the entire resource. In the patch method, only modified resources will be updated.
Sending HTTP requests with any verb is made simple by the Fetch API (built-in) and libraries such as Axios. The Fetch API is a built-in browser method for performing HTTP requests, whereas Axios is an external package we must install in our project before using.
HTTP PATCH Method in React JS: Fetch()
The fetch() is a built-in JavaScript function that allows us to make network-related requests. It is simple to use, and it doesn’t need any external package to use. It returns a promise that resolves to a response object, which is useful when accessing response data.
Let’s see an example, in the below example we have created a function in which we are going to use fetch an API using fetch(). We have put a URL of API in this fetch method, and we have to specify the type of response that should be in JSON format and the method to PATCH since the default is GET. Now in the body part, we can add those fields that be modified like here email and first_name. Then we can just return this data as a response and convert it into JSON format again. If we log this data, we will get updated data.
let PatchRequest = () => {
// sending PATCH request with fetch API in javascript
fetch("https://reqres.in/api/users/2", {
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
method: "PATCH",
// Fields that to be updated are passed
body: JSON.stringify({
email: "hello@reactcom",
first_name: "react"
})
})
.then(function (response) {
// console.log(response);
return response.json();
})
.then(function (data) {
console.log(data);
});
};
PatchRequest();
HTTP PATCH Method in React JS: axios()
Axios is another popular library for making network requests in React. It is an external library that needs to be imported and installed in the React application. Axios is a promise-based library that makes it easy when work with network requests. It is also a much more powerful and flexible method than fetch as well. Here is a basic example of Post method with Axios:
Now in the below example, we have to import axios, to work with network requests. To use the PATCH method in Axios we can use axios.patch(). The axios.patch() method returns a promise, so we use the await keyword to wait for the response. and we can then modify data, and these data will automatically get modified. we don’t need to convert it to the JSON format, We then log the response data to the console.
The Axios method is pretty simple and has less code to work with, so Axios looks much cleaner than the fetch() method. One more thing to note is that to use the post method, we should use .catch(), to perform error handling and it is essential.
let PatchRequest = () => {
// sending PATCH request with Axios API in javascript
axios.patch("https://reqres.in/api/users/2", {
email: '[email protected]',
first_name: 'react'
})
.then(response => console.log(response.data))
.catch(error => console.error(error))
}
PatchRequest()HTTP PATCH Method in React JS: Class Components
As we have seen, in both examples of the fetch and axios method, you can implement these in any component either class or functional. In the class component, you should make API calls in the componentDidMount() method, and in the functional component we often make API calls in useEffect() hook. Here is a basic example to understand:
Functional component:
import { useState, useEffect } from 'react';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
let PatchRequest = () => {
// sending PUT request with fetch API in javascript
fetch("https://reqres.in/api/users/2", {
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
method: "PATCH",
// Fields that to be updated are passed
body: JSON.stringify({
email: "[email protected]",
first_name: "Geeky"
})
})
.then(function (response) {
console.log(response);
return response.json();
})
.then(function (data) {
console.log(data);
});
};
PatchRequest();
, []);
return (
// ... consume here
);
};Class Component:
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
componentDidMount() {
let PatchRequest = () => {
// sending PUT request with fetch API in javascript
fetch("https://reqres.in/api/users/2", {
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
method: "PATCH",
// Fields that to be updated are passed
body: JSON.stringify({
email: "[email protected]",
first_name: "Geeky"
})
})
.then(function (response) {
console.log(response);
return response.json();
})
.then(function (data) {
console.log(data);
});
};
PatchRequest();
}
render() {
return (
// ...
);
}
}You may Also like:
