setstate then response in rest api react

Question

I would like to make the state isLoading changed to true when recentTransactionsRecipient and recentTransactionsSender is not null.

I would like to do a promise, then

  componentDidMount() {
    this.Auth.recentTransactionsRecipient(this.props.id)
      .then(res => {
        if (res) {
          this.setState({
            recentTransactionsRecipient: res,
          });
        }
      })
      .catch(() => {
        /* just ignore */
      });

    this.Auth.recentTransactionsSender(this.props.id)
      .then(res => {
        if (res) {
          this.setState({
            recentTransactionsSender: res,
          });
        }
      })
      .catch(() => {
        /* just ignore */
      });
  }

Does it need to run in parallel? Otherwise you could just return the this.Auth.recentTransactionSender(this.props.id) in the first then block. Then you can use .then to receive the second response. Otherwise store both requests in an array and use Promise.all as @mehamasum already answered. — Jan Peter
– Jan Peter, Commented Feb 9, 2019 at 9:31

mehamasum · Accepted Answer · 2019-02-09 09:27:03Z

2

Try using Promise.all(). See MDN doc

The Promise.all() method returns a single Promise that resolves when all of the promises passed as an iterable have resolved or when the iterable contains no promises. It rejects with the reason of the first promise that rejects.

Promise.all([promise1, promise2]).then((values) => {
  console.log(values);
  this.setState({
    recentTransactionsRecipient: values[0],
    recentTransactionsSender: values[1],
    isLoading: false
  });
});

answered Feb 9, 2019 at 9:27

mehamasum

5,7622 gold badges26 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dacre Denny Over a year ago

@ReactRouter4 Did you require the .catch(() => { /* just ignore */ }) behavior to work in the same way as your original post?

Dacre Denny · Accepted Answer · 2019-02-09 09:41:10Z

The use of Promise.all() would work well here as it allows you to reduce multiple input promises into a single promise. The single promise returned by Promise.all() is where you would implement the isLoading : true state update logic for your component.

An important detail to note with this; Given your code requires any errors in Auth to be ignored (coupled with the behavior of Promise.all() to reject if any promise passed to it is rejected), you will need to account for this in your code.

One possibility is to introduce a helper function that would "absorb" a rejected promise so that the rejected promise isn't propagated to Promise.all() (which would cause your subsequent setState() to be skipped):

componentDidMount() {
    
    /*
    Locally defined helper method to absorb failure/rejection of the supplied promise
    */
    const ignoreIfRejected = (promise) => {
      
      return promise().catch(() => {
        console.info('A promise failed. Ignoring.');
      });
    }
    
    /* 
    The Promise returned from Promise.all will reject if any one of the promises in
    the passed array fails. Wrap each promise in locally defined ignoreIfRejected()
    helper to "absorb" any such error 
    */
    Promise.all([
      ignoreIfRejected(this.Auth.recentTransactionsRecipient(this.props.id)),
      ignoreIfRejected(this.Auth.recentTransactionsSender(this.props.id))
    ])
    .then((recipient, sender) => {
      
      if( recipient !== null && sender !== null) {
        
        /* 
        If resolved response from both promises returns non-null value
        then set isLoading state to true as required in post 
        */
        this.setState({ 
          recentTransactionsSender : sender,
          recentTransactionsRecipient : recipient,
          isLoading : false 
        });
      }      
    });
  }

Collectives™ on Stack Overflow

setstate then response in rest api react

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related