javascript - Axios multiple Requests in React - Stack Overflow

admin管理员组

文章数量:1327683

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

  ponentDidMount() {
    axios.all([
    axios.get(''),
    axios.get('')
    ])
    .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=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>
<div id="app"></div>

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

  ponentDidMount() {
    axios.all([
    axios.get('https://api.github./users/antranilan'),
    axios.get('https://api.github./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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./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.

• javascript
• reactjs

Share Improve this question Follow asked Aug 21, 2017 at 10:48 MacMac 32733 gold badges88 silver badges1919 bronze badges 8

• .then(axios.spread that looks wrong, because .then traditionally expects a function as an argument, not the result of calling a function – Jaromanda X Commented Aug 21, 2017 at 10:50
• How should it look like? – Mac Commented Aug 21, 2017 at 10:51
• 1 looks like axios.all and axios.spread won't be around too long anyway, github./mzabriskie/axios/issues/1042 – Jaromanda X Commented Aug 21, 2017 at 10:52
• @JaromandaX I believe the problem is with loosing context inside callback. – Yury Tarabanko Commented Aug 21, 2017 at 10:54
• 1 @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 Commented Aug 21, 2017 at 11:02

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 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 :{} }
  }

  ponentDidMount() {
    // Better use native Promise.all
    Promise.all([
      axios.get('https://api.github./users/antranilan'),
      axios.get('https://api.github./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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./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.

本文标签： javascriptAxios multiple Requests in ReactStack Overflow