It is used to provide data communication from one application to another, API will be developed by any server-side script such as Java, Python, PHP, NODE, etc.
What is RestAPI?
RestAPI is used to transfer the data using the HTTP method and return output data into JSON format.
It provides better performance as compare to SOAP-based API.
REST means Representation state transfer-based API.
List of HTTP Request methods
GET - is used to request data from a specified resource.
POST - is used to send data to a server to create a resource.
PUT - is used to send data to a server to update a resource.
DELETE - is used to delete the specified resource.
How to write code on REST API services implementation?
1) AXIOX
2) Fetch
now we implement an example of the Fetch API method of React JS to show data in tabular format.
Step1st:-
1) Create a Component and Write the following code. of React Js
import React from "react";
export class RestApiCall extends React.Component{
constructor()
{ super();
this.state = {
tdata:[]
}
}
componentDidMount() {
fetch('http://jsonplaceholder.typicode.com/todos')
.then(res => res.json())
.then((data) => {
this.setState({ tdata: data })
console.log(this.state.tdata)
})
.catch(console.log)
}
render()
{
return(
<div>
<table border='1'>
<tbody>
<tr><th>Userid</th><th>ID</th><th>Title</th></tr>
{this.state.tdata.map((person,i)=> <TableRow Key={i} data={person} />)}
</tbody>
</table>
</div>
)
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.userId}</td>
<td>{this.props.data.id}</td>
<td>{this.props.data.title}</td>
</tr>
);
}
}
Another example of API to fetch data from the named key:-
import React from "react";
export class RestAPIExample extends React.Component
{
constructor()
{
super();
this.state = {
tdata:[]
}
}
componentDidMount()
{
fetch('https://shivaconceptsolution.com/webservices/showreg.php')
.then(res => res.json())
.then((data) => {
this.setState({ tdata: data["result"] })
console.log(this.state.tdata)
})
.catch(console.log)
}
render()
{
return(
<div>
<table border='1'>
<tbody>
<tr><th>Username</th><th>EmailID</th><th>Password</th></tr>
{this.state.tdata.map((person,i)=> <TableRow Key={i} data={person} />)}
</tbody>
</table>
<h1>Welcome in REST API Implementation in React JS</h1>
</div>
)
}
}
class TableRow extends React.Component
{
render()
{
return(
<tr>
<td>{this.props.data.UserName}</td>
<td>{this.props.data.emailid}</td>
<td>{this.props.data.password}</td>
</tr>
)
}
}
Example of HttpPOST:-
import { post } from "jquery";
import React from "react";
export class RestAPIExample extends React.Component
{
constructor()
{
super();
this.state = {}
}
componentDidMount()
{
fetch('https://jsonplaceholder.typicode.com/posts',{
method: 'POST',
body: JSON.stringify({
title:'check',
body:'mno',
userID:1023
}),
headers:{"content-type":"application/json; charset=UTF-8"}
}).then(res => res.json())
.then((data) => {
console.log(data)
})
.catch(console.log)
}
render()
{
return(
<div>
<h1>POST METHOD</h1>
</div>
)
}
}
Example of POST API using other Web services:-
import { post } from "jquery";
import React from "react";
export class RestAPIExample extends React.Component
{
constructor()
{
super();
this.state = {}
}
componentDidMount()
{
fetch('https://shivaconceptsolution.com/webservices/reg.php',{
method: 'POST',
body: JSON.stringify({
name:'reacttest',
pwd:'react123',
email:'ravikumarsharma@gmail.com'
}),
headers:{"content-type":"application/json; charset=UTF-8"}
}).then(res => res.json())
.then((data) => {
console.log(data)
})
.catch(console.log)
}
render()
{
return(
<div>
<h1>POST METHOD</h1>
</div>
)
}
}
API method for Update operation using post method
import { post } from "jquery";
import React from "react";
export class RestAPIExample extends React.Component
{
constructor()
{
super();
this.state = {}
}
componentDidMount()
{
fetch('https://jsonplaceholder.typicode.com/posts/1',{
method: 'PUT',
body: JSON.stringify({
title:'check',
body:'mno',
userId:1023
}),
headers:{"content-type":"application/json; charset=UTF-8"}
}).then(res => res.json())
.then((data) => {
console.log(data)
})
.catch(console.log)
}
render()
{
return(
<div>
<h1>PUT Method for data updation</h1>
</div>
)
}
}
API for method delete:-
import { post } from "jquery";
import React from "react";
export class RestAPIExample extends React.Component
{
constructor()
{
super();
this.state = {}
}
componentDidMount()
{
fetch('https://jsonplaceholder.typicode.com/posts/'+1,{
method: 'delete' })
}
render()
{
return(
<div>
<h1>Delete Method for data updation</h1>
</div>
)
}
}
تعليقات
إرسال تعليق
POST Answer of Questions and ASK to Doubt