Цепочка асинхронных вызовов функций с полосой и аксио в реакции

Question

Поэтому я пытаюсь отправить заказ, для которого пользователь ввел свою кредитную карту.

Для этого я вызываю метод order, который выполняет API-вызов Stripe (createSource) для создания источника оплаты. Затем я отправляю параметры заказа в свой бэкэнд Rails, используя axios, в котором отправляю идентификатор только что созданного источника (source.id).

async order() {
      let {source} = await this.props.stripe.createSource({type: 'card', currency: 'eur', owner: {email: this.props.currentUserEmail}});
      axios.post("/orders", {sourceId: source.id,
                              mealId: this.props.mealId,
                              price: this.state.mealPrice,

                              selectedPickupTime: this.state.selectedPickupTime
                            })
}

Проблема в том, что я думаю, что источник еще не создан, когда axios отправляет запрос на публикацию бэкэнду, так как я получаю следующую ошибку:

Unhandled Rejection (TypeError): Cannot read property 'id' of undefined для source.id

Как мне это изменить и дождаться создания источника, прежде чем axios отправит запрос на публикацию?

Answer 1

Из документов похоже, что правильный способ сделать это:

class CheckoutForm extends React.Component {
  handleSubmit = (ev) => {
    // We don't want to let default form submission happen here, which would refresh the page.
    ev.preventDefault();
    this.props.stripe.createSource({type: 'card', currency: 'eur', owner: {email: this.props.currentUserEmail}})
      .then(source => axios.post("/orders", {sourceId: source.id, mealId: this.props.mealId, price: this.state.mealPrice, selectedPickupTime: this.state.selectedPickupTime }))
      .catch(err => console.log(err));

  }
};

Answer 2

В вашем случае произошла ошибка асинхронной функции. Используйте try-catch для своей реализации для обработки отклонения обещания.

async order() {
  try {
    let source = await this.props.stripe.createSource({ type: 'card', currency: 'eur', owner: { email: this.props.currentUserEmail }});
    axios.post("/orders", {
      sourceId: source.id,
      mealId: this.props.mealId,
      price: this.state.mealPrice,
      selectedPickupTime: this.state.selectedPickupTime
    });
  }
  catch (err) { // there was an error
    console.error('Unable to create a source due to', error)
  }
}

Answer 3

При создании источника может быть ошибка. Согласно полосе docs вам необходимо проверить, был ли запрос таким образом успешным.

async order() {
      // Either Source or Error
      let {source, error} = await this.props.stripe.createSource({type: 'card', currency: 'eur', owner: {email: this.props.currentUserEmail}});

      if (error) { // there was an error
        console.error('Unable to create a source due to', error) 
      } else {
        axios.post("/orders", {sourceId: source.id,
                              mealId: this.props.mealId,
                              price: this.state.mealPrice,

                              selectedPickupTime: this.state.selectedPickupTime
                            })
     }
}