Axios multiple Requests in React

Question

I am trying to create 2 requests and set variables with this.setState({}) for further changes.

This is what i got:

class App extends React.Component {
  constructor() {
    super();
    this.state = {user: false, repository :false}
  }

  componentDidMount() {
    axios.all([
    axios.get('https://api.github.com/users/antranilan'),
    axios.get('https://api.github.com/users/antranilan/repos')
    ])
    .then(axios.spread(function (userResponse, reposResponse) {
            this.setState({user : userResponse.data, repository : reposResponse.data});
        });
  }
 
  render() {
    return (
     <div> 
      {this.state.user.login}
      {this.state.repository.length}
     </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

I looked up through multiple questions with what i am trying to do but there was no solution to what i am trying to achive.

.then(axios.spread that looks wrong, because .then traditionally expects a function as an argument, not the result of calling a function — Jaromanda X
– Jaromanda X, Commented Aug 21, 2017 at 10:50
looks like axios.all and axios.spread won't be around too long anyway, github.com/mzabriskie/axios/issues/1042 — Jaromanda X
– Jaromanda X, Commented Aug 21, 2017 at 10:52
@JaromandaX I believe the problem is with loosing context inside callback. — Yury Tarabanko
– Yury Tarabanko, Commented Aug 21, 2017 at 10:54
@Mac "axios is being a problem" actully axios does its job (promisifying network operations) The idea is that axios.all and axios.spread helpers might be removed in future versions because there is native analog supported by major envs. — Yury Tarabanko
– Yury Tarabanko, Commented Aug 21, 2017 at 11:02

Rowland · Accepted Answer · 2017-08-21 11:20:47Z

7

You have binding issue in your code.

class App extends React.Component {
  constructor() {
    super();
    // You should use object to delineate the type
    this.state = {user: {}, repository :{} }
  }

  componentDidMount() {
    // Better use native Promise.all
    Promise.all([
      axios.get('https://api.github.com/users/antranilan'),
      axios.get('https://api.github.com/users/antranilan/repos')
    ])
    // use arrow function to avoid loosing context
    // BTW you don't need to use axios.spread with ES2015 destructuring
    .then(([userResponse, reposResponse]) => {
            this.setState({user : userResponse.data, repository : reposResponse.data});
        });
  }
 
  render() {
    const { user, repository } = this.state
    return (
     <div> 
      {user && user.login}
      {repository && repository.length}
     </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

UPDATE as @JaromandaX pointed out you'd better stick with native Promise.all and destructuring.

edited Aug 21, 2017 at 11:20

Rowland

1,8531 gold badge15 silver badges20 bronze badges

answered Aug 21, 2017 at 10:51

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jaromanda X Over a year ago

I'd recommend Promise.all instead of axios.all ... seems axios.all is destined for the trash - github.com/mzabriskie/axios/issues/1042

Collectives™ on Stack Overflow

Axios multiple Requests in React

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related