How to call Rest API in React JS using Fetch Method

0


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 a Comment

0Comments

POST Answer of Questions and ASK to Doubt

Post a Comment (0)