What are the different ways to make HTTP Request in Reactjs application

    Jan 22, 2020       by Suraj Roy

For making a web/mobile application dynamic, It's necessary to communicate the app with the server. There are different libraries available for making HTTP request so that the app could get data or make a post request to the server.

In this article, We will see all the different ways to make an HTTP request in React.js application.

 

Below are the different popular approaches available to make HTTP requests in React.js application.

  • fetch
  • axios
  • superagent

fetch

It is a native browser API for making HTTP Request. It is very similar to XMLHttpRequest, Also very easy to use it in the client-side application.

 

 
class UserListComponent extends React.Component {
  constructor() {
    this.state = {
      users: []
    }
  }
  componentDidMount() {
    fetch(`https://jsonplaceholder.typicode.com/users`)
    .then(res => res.json())
    .then(result => this.setState({ users: result.users }))
  }
  render() {
    return (
      <div>
        User List: {this.state.users}
      </div>
    )
  }
}
 

 

In the above component, fetch API fetches data from the endpoint, which is used below to render inside the template.

 

axios

Axios is a promise-based HTTP library for JavaScript that can be used in front-end applications and Node.js backends.It supports all modern browsers with IE8 +.

For using it, need to install first inside the application with below command:

npm i axios --save

 

 
import axios from 'axios'
class UserListComponent extends React.Component {
  constructor() {
    this.state = {
      users: []
    }
  }
  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(response => response.json())
      .then(json => this.setState({ users: json.data, done: true }))
  }
  render() {
    return (
      <div>
        User List: {this.state.users}
      </div>
    )
  }
}
 

 

The same task has been performed with the help of Axios.

 

superagent

We need to install the library first.

npm i superagent

 

Update the component

 

 
import request from 'superagent'
class UserListComponent extends React.Component {
  constructor() {
    this.state = {
      users: []
    }
  }
  componentDidMount() {
    request
    .get('https://jsonplaceholder.typicode.com/users')
    .then(res => this.setState({users: res.json()}))
    .catch(err => log(err))
  }
  render() {
 
    return (
      <div>
        User List: {this.state.users}
      </div>
    )
  }
}
 

 

Conclusion

In this article, We learn about the different approaches for making HTTP Request in React.js application.

I hope this article helped you. You can also find other demos of React.js Sample Projects here to start working on enterprise-level applications.

Let me know your thoughts over email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share it with your friends.

Thank You!

javascript Reactjs HTTP

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS