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>

        )

    }

}

Another Example is to call Rest API using AXIOS Library:-

import React from "react";

import axios from 'axios'

export class AxiosExample extends React.Component

{

   constructor()

   {

    super();

    this.state = {

       tdata:[]      

     }

   }

 

   componentDidMount()

   {

    axios.get('https://shivaconceptdigital.com/api/viewallcourse.php').then((repos) => {

   

      this.setState({ tdata: repos.data["result"]})

     // console.log(this.state.tdata)

    });

    }

   render()

   {

       return(

           <div>

               <table border='1'>

               <tbody>

                  <tr><th>Course ID </th><th>Course Name</th><th>Path</th><th>Fees</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.courseid}</td>

             <td>{this.props.data.coursename}</td>

             <td><img src={'https://www.shivaconceptdigital.com/images/'+this.props.data.path} width="50" height="50" /></td>

             <td>{this.props.data.fees}</td>

             

          </tr>

        )

    }

}

For more examples click here:-

Click to more example

Differences between Axios and Fetch:

Axios	Fetch
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).