синхронный вызов функции в reactjs

#reactjs

#reactjs

Вопрос:

Я хочу вызывать функцию только после выполнения предыдущей функции. Я пробовал с promises, но это не работает, я также пробовал с async await, но выполняется последняя функция.После выполнения первой функции я хочу передать значение ее состояния следующей функции и так далее.Пожалуйста, помогите мне в этом.Заранее спасибо.

 handleAllFunctionsOnClickPayLater() {
let promise = Promise.resolve();

promise
.then(() => this.handleGuestLogin())
.then(() => setTimeout(this.handleAddress(),1000))
.then(() => setTimeout(this.handlePayLater(),2000))


}


handleGuestLogin() {
  const UserDetails = {
    name: this.state.name,
    email: this.state.email,
    mobile: this.state.number
  }
  fetch(api,{
  method : 'POST',
  body: JSON.stringify(UserDetails)
  })
  .then(res => res.json())
  .then(data => {
     return this.setState({
        cid: data.Data.cid
      },() => {console.log(this.state.cid)})
      
   })
 }

handleAddress() {
  var address_details = {
   cid:this.state.cid
   ...other details
  }
  fetch(api,{
  method : 'POST',
  body: JSON.stringify(address_details)
})
.then(res => res.json())
.then(data => {
  console.log("address added in db customer_address",data);
  return this.setState({
    address_id: data.address_id,
    
  })

 }

handlePayLater = () => {
 var bookingDetails = {
    cid: this.state.cid,
    address_id: this.state.address_id
 }
 fetch(api,{
  method : 'POST',
  body : JSON.stringify(bookingDetails)
})
.then(res => res.json())
.then(data => {
  return this.setState({bookingId:data.booking_id});

}
  

Комментарии:

1. Добавьте реализации this.handleGuestLogin() , this.handleAddress() и this.handlePayLater()

2. да, добавлены эти реализации

Ответ №1:

Предполагая, что handleAddress , handleGuestLogin и handlePayLater возвращают обещания, вы можете использовать функцию async / await

 synchronousPromises = async () => {

    try {
        const handleGuestLoginResult = await this.handleGuestLogin();
        const handleAddressResult = await this.handleAddress();
        const handlePayLaterResult = await this.handlePayLater();
    } catch (error) 
    {
       return reject(error); //will cause .catch to fire
    }
    return resolve([
        handleGuestLoginResult, 
        handleAddressResult, 
        handlePayLaterResult
    ]); //will cause .then to fire
}
  

поскольку synchronousPromises является async функцией, она сама возвращает обещание. чтобы использовать ее, вы можете вызвать ее как

 callSyncronousPromises = () => {
    synchronousPromises()
    .then(success => {
      //handle success
    })
    .catch(error => {
    
        //handle error 
    }
}