Как сделать синхронный запрос вызова API в react js



Я новичок в react js я работаю над небольшим приложением, которое часто делает запросы api. Таким образом, проблема, с которой я сталкиваюсь, заключается в том, что есть страница с полями формы, предварительно заполненными из БД, если пользователь вносит изменения в эти поля, я отправляю новые значения в БД. при нажатии кнопки submit вызывается saveandcontinue (), оттуда вызывается addNewAddress () на основе условия. Но проблема в том, что ответ, который я получаю от addNewAddress, должен использоваться для следующего вызова api в очереди, но требуется время, чтобы получить ответ, и address_id имеет нулевые значения для его post-вызова. есть ли какой-либо способ сделать синхронный вызов in react без out с помощью flux/redux на данный момент?



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));
}
732   1  

1 ответ:

Вам придется вызвать следующий запрос в очереди после addNewAddress () в возвращенном обещании addNewAddress ():

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

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

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

  })
}
Делать синхронные вызовы всегда плохая идея, я лично советовал бы не делать этого и просто сделать следующий вызов в возвращенном обещании, как показано выше.

Comments

    Ничего не найдено.