CODEWITHSUNDEEP
javascriptreactjspromise
A.S.J
A.S.J

Reputation: 637

ReactJS several fetch requests with promise

I need several fetch requests in my application to fetch data from different collections. Therefore, I wanted to use promises to make it work. I have never used promises and despite my research on stackoverflow and other websites, I was not able to make it work.

Essentially, I need two fetch requests and I want to save the result of these requests to 2 different states.

This is what I have as of right now:

getFormData () {
    fetch('/formdata', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
        .then(res => res.json())
}

getIcons () {
    fetch('/icons', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
        .then(res => res.json())
}

getData () {
    return Promise.all([this.getFormData(), this.getIcons()])
}

componentDidMount () {
    this.getData()
        .then(([formdata, icons]) => {
            console.log(form + "  " + icons);
        })
         .catch(err => console.log('There was an error:' + err))
}

But this did not work. I also tried putting the promise in my componentDidMount() lifecycle method, like so:

componentDidMount () {
    return Promise.all([this.getFormData(), this.getIcons()])
        .then(([formdata, icons]) => {
            console.log(formdata + "  " + icons);
        })
         .catch(err => console.log('There was an error:' + err))
}

But this didn't work eiter. I would like to save the data from /formdata to a state with the same name and the same goes for icons, but in the console it simply returns undefined undefined, instead of the formdata and the icons.

Where am I making a mistake in my code? How would I fix it?

Upvotes: 3

Views: 96

Answers (2)

Pixelomo
Pixelomo

Reputation: 6737

Just adding to @dfsq's answer, after returning the promises you can update the state within each function:

constructor(props) {
    super(props);

    this.state = {
      formData = {},
      icons: {}
    }
  }

getFormData () {
    return fetch('/formdata', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
    .then(res => res.json(
        this.setState({ formData: res.json })
    ))
}

getIcons () {
    return fetch('/icons', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
    .then(res => res.json(
        this.setState({ icons: res.json })
    ))
}

Upvotes: 1

dfsq
dfsq

Reputation: 193261

You need to return Promise object from your methods. As of now you are not returning anything, so it's implicit undefined.

Try this:

getFormData () {
    return fetch('/formdata', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
        .then(res => res.json())
}

getIcons () {
    return fetch('/icons', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
        .then(res => res.json())
}

Upvotes: 4

Related Questions