Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 Consume Rest API using AXIOS library in React-JS:-

AXIOS is another approach to consume rest API in react-js, it provides async and awaits () to call multiple rest API simultaneous.

It also provides promise-based API communication from the client machine to the server machine.no need to convert response data to JSON, it will automatically return JSON type data.

AXIOS library support on all web browsers and older versions also because it has no in-built API tools on browser.

It takes more process time as compared to the Fetch method but it provides better security as compare to Fetch. It has CSRF features to protect cross-site URL protection.

FEATURES OF AXIOS


    • Request and response interception
    • Streamlined error handling
    • Protection against XSRF
    • Support for upload progress
    • Response timeout
    • The ability to cancel requests
    • Support for older browsers
    • Automatic JSON data transformation

How to use it

1)  install axios library in React-JS

  npm install axios


Syntax pattern to use it


axios.get(apiUrl).then((repos) => {

      const allRepos = repos.data;

      setAppState({ loading: false, repos: allRepos });

    });

axios.all([
  axios.get('https://api.github.com/users/hacktivist123'),
  axios.get('https://api.github.com/users/adenekan41')
])
.then(response => {
  console.log('Date created: ', response[0].data.created_at);
  console.log('Date created: ', response[1].data.created_at);
});

// Make a GET request with a shorthand method
axios.get('https://api.github.com/users/hacktivist123');

// Make a Post Request with a shorthand method
axios.post('/signup', {
    firstName: 'shedrack',
    lastName: 'akintayo'
});



Now i am providing the example to use GET method 


import React from "react";
import axios from 'axios'
export class RestAPIExample extends React.Component
{
   constructor()
   {
    super();

    this.state = {

       tdata:[]      

     }
   }
  

   componentDidMount()
   {
    axios.get('https://shivaconceptsolution.com/webservices/showreg.php').then((repos=> {
    
      this.setState({ tdata: repos.data["result"] })

      console.log(this.state.tdata)
    });

    }

   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>
        )
    }
}


Differences between Axios and Fetch:

AxiosFetch
Axios has url in request object.Fetch has no url in request object.
Axios is a stand-alone third party package that can be easily installed.Fetch is built into most modern browsers; no installation is required as such.
Axios enjoys built-in XSRF protection.Fetch does not.
Axios uses the data property.Fetch uses the body property.
Axios’ data contains the object.Fetch’s body has to be stringified.
Axios request is ok when status is 200 and statusText is ‘OK’.Fetch request is ok when response object contains the ok property.
Axios performs automatic transforms of JSON data.Fetch is a two-step process when handling JSON data- first, to make the actual request; second, to call the .json() method on the response.
Axios allows cancelling request and request timeout.Fetch does not.
Axios has the ability to intercept HTTP requests.Fetch, by default, doesn’t provide a way to intercept requests.
Axios has built-in support for download progress.Fetch does not support upload progress.
Axios has wide browser support.Fetch only supports Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+ (This is known as Backward Compatibilty).


1 Comments

If you have any doubt in programming or join online classes then you can contact us by comment .

  1. I read your post. It is very informative and helpful to me. I admire the message valuable information you provided in your article.
    online training

    ReplyDelete

Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post