Ekim Kael

Posted on Jun 13, 2018

How to make many http requests with react

#discuss #help #fetchapi #react

Hi, please i'm stuck.
is somebody knows how to make many request in a react component or route?

componentDidMount = () => {
    const { match: { params } } = this.props
    fetch(`/w/${params.work}`)
      .then(res => res.json())
      .then(work => this.setState({ work }))

    fetch('/works')
      .then(res => res.json())
      .then(otherWorks => this.setState({ otherWorks }))
}

something like this that works.
I'm a beginner with React so i don't really want things like Redux
i just want a beginner way.The first fetch work but not the second

Oldest comments (8)

Leighton Darkins • Jun 13 '18 • Edited

I think promise.all() is going to be what you're looking for.

const firstFetch = fetch('some/resource')
const secondFetch = fetch('some/other/resource')

Promise.all([firstFetch, secondFetch])
  .then(values => {
    // do something with values
    // values[0] is the result of firstFetch
    // values[1] is the result of secondFetch
  })
  .catch(error => {
    // handle any errors
  })

Ekim Kael • Jun 13 '18

Okay! i try it

Shawn Reisner • Jun 13 '18

Your code is making two requests at once - what isn't working about it exactly?

Ekim Kael • Jun 13 '18

i'm supposed to receive an array of data in the otherWorks but i got an empty array

Mikk Pristavka • Jun 13 '18 • Edited

Maybe it's not about the requests, but how you expect to use the responses. The React.Component's setState method is asynchronous, so you can't expect the component's state to have both work and otherWorks every time render() is called.
As Leighton suggested, Promise.all would help you make only one setState call, but it still doesn't cover the case right after mounting the component when neither of the values are present in the state.
Maybe consider adding a loading flag in the state that is set to false when both requests have completed, so render() can show a loading animation while the requests are still waiting for responses.

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      work: undefined,
      otherWorks: undefined
    };
  }
  componentDidMount = () => {
    const { match: { params } } = this.props
    const fetchWork = fetch(`/w/${params.work}`)
    const fetchOtherWorks = fetch('/works')

    Promise.all([fetchWork, fetchOtherWorks])
      .then(([work, otherWorks]) => {
        this.setState({
          loading: false,
          work,
          otherWorks
        });
      })
      .catch(error => {
        // handle errors
      })
  }

  render() {
    const {loading, work, otherWorks} = this.state;
    if (loading) {
      return <div>Still loading!</div>
    } else {
       return (
         // whatever you want to do with `work` and `otherWorks`
       );
    }
  }  
}

Ekim Kael • Jun 13 '18 • Edited

Guys i'm sorry.It was a {} I'd forgotten somewhere really sorry.
And thanks for your answers i think it'll save my life in few days

Xing Wang • Jun 14 '18

if you have multiple callback asynchrous update the setState, you should consider this method to make sure they don't overwrite each other or race conditions:

this.setState( prevState => ({ ...prevState, work1: result });

this.setState( prevState => ({ ...prevState, work2: result });

deepak adhana • Jan 10 '19

Use axios, install axios. And use axios to fetch api in react.
I am using axios in my project.

DEV Community

How to make many http requests with react

Oldest comments (8)

Read next

2025 look ahead: Top dev events & courses for Android, React Native, and GenAI

Optimizing React Development with Vite🤩

HubSpot offers a powerful platform for creating user interfaces (UI) and serverless functions using React, allowing users to develop highly customizable pages and forms directly within the CRM itself.

How the new concepts of JSSugar and JS0 are able to slow down websites