4

I am making two GET requests to two different urls, which return different pieces of data. I am then trying to set the values returned to the value of an array, called artists.

I am unsure as the best approach to take to combine the values returned from the API calls.

If any more information is required let me know.

One thing I am not 100% sure of is whether the following means that result is an array or not. And also, whether I should use promises in my componentShouldMount method.

var result = data.result.posts;
this.setState({
  artists: result
})

My code is below:

  getInitialState: function() {
      return {
        artists: [], 
        isLoaded: true
      }
    },

    componentDidMount: function() {
      $.get(PostsOneURL, function(data) {
        var result = data.result.posts;
        this.setState({
          artists: result
        })
      }.bind(this));

      $.get(PostsTwoURL, function(data) {
        var result = data.result.posts;
        this.setState({
          artists: result,
          isLoaded: true
        })
      }.bind(this));
    }
  • Try chaining the promises http://stackoverflow.com/questions/16026942/how-do-i-chain-three-asynchronous-calls-using-jquery-promises – diedu Nov 30 '16 at 17:34

2 Answers2

2

You can use the Promise.all() method to await resolution of all the promises then deal with the results in one go. This also means you are only calling setState() once, stopping unnecessary re-rendering of the component.

componentDidMount: function() {
  const requestOne = $.get(PostsOneURL);
  const requestTwo = $.get(PostsTwoURL);

  Promise.all([requestOne,requestTwo])
    .then(requestData => {
      this.setState({
        artists: requestData.map(data => data.result.posts)
        isLoaded: true
      )}
    });
}
Alex Young
  • 4,009
  • 1
  • 16
  • 34
  • is `Promise` part of js or react, or do I have to load it separately? –  Dec 01 '16 at 09:00
  • 1
    It's part of javascript - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for details. IE does not currently support it, so if you need to support IE then you will need a polyfill such as https://github.com/taylorhakes/promise-polyfill – Alex Young Dec 01 '16 at 10:07
0

I'm not an expert in react but I can help you with that. Just use https://www.npmjs.com/package/redux-promise if you are using redux, and it will deliver the resolved value for you without anything from your part. It's a middleware that guarantees that nothing will reach the reducers without being resolved. On the other hand, if you are using vanilla react, you could deal with them yourself creating your own middlewares, but you need to make sure that the values reach the reducers resolved to produce the proper state. For this second approach you just wait the promise to resolve and then execute a dispatch to go back to the beggining of the middleware chain and on that second execution of the middlewares the value will be resolved.

Just remember not to mutate the state, generate a new object {...state, thingsyouwanttoadd }.

P.S: I also recommend to take the Stephen Grider courses on Udemy, really good stuff and he does exactly what you are trying to do here on this course https://www.udemy.com/react-redux/ , he waits for the values to resolve with that library and then he displays it .

John
  • 1,711
  • 2
  • 29
  • 42