How to perform multiple API calls inside ComponentDidMount using fetch in React-Native?

Question

In my componentDidMount function I call AsyncStorage to get some saved value and then make a GET request and fetch data like below:

componentDidMount() {
  AsyncStorage.getItem("token").then(value => {
    const url = 'my url';
    console.log('token:' + value)
    return fetch(url, {
        method: 'GET',
        headers: new Headers({
          'Content-Type': 'application/json',
          'token': 'abcd',
          'jwt': value
        })
      })
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          dataSource: responseJson,
          isLoading: false,
          getValue: value
        })
      })
      .catch((Error) => {
        console.log(Error)
      })
  })
}

Now, I need to make another GET request. Suppose if I want to make the same request again in this function , how can I do that?

Make this a function and call that multiple times from componentDidMount? — DTul
– DTul, Commented Mar 29, 2019 at 13:34
you can use setInterval inside the componentDidiMount to make api call in desired the timeInterval. — Mohammed Ashfaq
– Mohammed Ashfaq, Commented Mar 29, 2019 at 13:52
@MohammedAshfaq, thanks but I don't have much idea about setInterval. Will you please elaborate the suggestion. — S. M. Asif
– S. M. Asif, Commented Mar 29, 2019 at 14:03

S. M. Asif · Accepted Answer · 2019-03-29 15:11:33Z

I solved it very easily from the suggested comments. I did the API call part in two different functions and then called these two functions inside ComponentDidMount like below code-

 getFirstApiResposnse() {

  AsyncStorage.getItem("token").then(value => {
    const url = 'my url';
    console.log('token:'+ value)
   return fetch(url, {
    method: 'GET',
    headers: new Headers({
      'Content-Type' : 'application/json',
      'token': 'abcd',
      'jwt': value
    })
  })
   .then((response)=> response.json() )
  .then((responseJson) => {
    this.setState({
      dataSource: responseJson,
      isLoading: false,
      getValue: value

    })
  })
  .catch((Error) => {
    console.log(Error)
  });

  }

  )

};


getSecondApiResponse() {

  AsyncStorage.getItem("token").then(value => {
    const url = 'my url';
    console.log('token:'+ value)
   return fetch(url, {
    method: 'GET',
    headers: new Headers({
      'Content-Type' : 'application/json',
      'token': 'abcd',
      'jwt': value
    })
  })
   .then((response)=> response.json() )
  .then((responseJson) => {
   console.log('####:'+responseJson.cat_note)
    this.setState({

      isLoading: false,
      getValue: value,
    })
  })
  .catch((Error) => {
    console.log(Error)
  });

  }

  )

}

  componentDidMount() {

    this.getFirstApiResponse();
    this.getSecondApiResponse();

  }

Raj D · Accepted Answer · 2019-03-29 16:24:47Z

0

You can also use Promise.all(). Which comes handy with multiple requests. Also, we can use helper library such as async and use its forEach, waterFall, series, parallel, etc methods depending on project needs. These things make our code more readable and scalable.

answered Mar 29, 2019 at 16:24

Raj D

5351 gold badge5 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to perform multiple API calls inside ComponentDidMount using fetch in React-Native?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related