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 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.


    • 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 =;

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


.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

// Make a Post Request with a shorthand method'/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

    this.state = {



    axios.get('').then((repos=> {
      this.setState({ tdata:["result"] })






               <table border='1'>

                  {,i)=> <TableRow Key={i} data={person} />)}   
               <h1>Welcome in REST API Implementation in React JS</h1>

class TableRow extends React.Component







Differences between Axios and 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).


POST Answer of Questions and ASK to Doubt

  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


Post a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post