How to make synchronous API call request in react js

Question

i am beginner to react js i am working on a small application which makes api requests frequently. So the problem i am facing is there is a page with form fields prefilled from the db, if the user makes changes to those fields i am posting the new filed values to db. when submit button is clicked saveAndConttinue() is called,from there addNewAddress() is invoked based on the condition. But the problem is the response that i get from addNewAddress has to be used for the next api call in the queue, but it is taking time to get response, and the address_id is having null values for it's post call. is there any way to make synchronous call in react with out using flux/redux for now?

saveAndContinue(e) {
e.preventDefault();

if(this.props.params.delivery === 'home_delivery' && this.state.counter) {
  this.addNewAddress();
}

console.log('add id is '+this.state.address_id);
const config = { headers: { 'Content-Type': 'multipart/form-data' } };
let fd = new FormData();
fd.append('token', this.props.params.token);
fd.append('dish_id', this.props.params.dish_id);
fd.append('address_type', this.props.params.delivery);
fd.append('address_id', this.state.address_id);
fd.append('ordered_units', this.props.params.quantity);
fd.append('total_cost', this.props.params.total_cost);
fd.append('total_service_charge', this.props.params.service_charge);
fd.append('net_amount', this.props.params.net_cost);
fd.append('hub_id', this.props.params.hub_id);
fd.append('delivery_charge', this.props.params.delivery_charge);
fd.append('payment_type', this.state.payment_type);
fd.append('device_type', 'web');

axios.post(myConfig.apiUrl + '/api/foody/orders/purchase' , fd, config)
        .then(function(response){
    if(response.data.success) {
      console.log(response);
      browserHistory.push('/order_confirmed/');
    } else {
      console.log(response);
      //alert(response.data.message)
    }
        });
}

addNewAddress() {
 const config = { headers: { 'Content-Type': 'multipart/form-data' } };
 let fd = new FormData();

  if(this.props.params.user_type === 'new') {
    fd.append('type', 'PRIMARY');
  }

  fd.append('token', this.props.params.token);
  fd.append('block', this.state.block);
  fd.append('door_num', this.state.door_num);
  fd.append('address', this.props.params.address);
  fd.append('locality', this.props.params.locality);
  fd.append('landmark', this.props.params.landmark);
  fd.append('hub_id', this.props.params.hub_id);
  axios.post(myConfig.apiUrl + '/api/user/add-address' , fd, config)
    .then(function(response){
      this.setState({address_id: response.data.data['id']});
      console.log(this.state.address_id);
    }.bind(this));
}

user818700 · Accepted Answer · 2017-03-28 11:19:58Z

6

You're going to have to call the next request in the queue after addNewAddress() in the returned promise of addNewAddress():

addNewAddress() {
  axios.post()...
  .then(function (response) {

    // Set state
    this.setState({address_id: response.data.data['id']});

    // [Call next API request here]
    // ...

  })
}

Doing synchronous calls are always a bad idea, I personally would advise against it and just do the next call in the returned promise as shown above.

answered Mar 28, 2017 at 11:19

user818700

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

2 Comments

César Landesa Over a year ago

You should also have in mind that setState is asynchronous and React. If you want to make sure that address_id has been set, you should make the next API call in a callback function that you send to setState as the second argument. It might be something like this.setState({address_id: response.data.data['id']}, this.nextApiCall());

Chaitanya Sairam Over a year ago

@CésarLandesa thanx fot the info, this worked pefectly

Collectives™ on Stack Overflow

How to make synchronous API call request in react js

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related