Javascript 在React中使用Stripe和Axios链接异步函数调用

因此，我尝试提交一个用户输入其信用卡的订单

为此，我调用

order

方法，该方法对Stripe（

createSource

）进行API调用，以创建支付源。然后，我使用axios将订单参数发布到Rails后端，在其中我发送刚刚创建的源代码的id（

source.id

）

问题是，当axios将post请求发送到后端时，我认为源代码尚未创建，因为我得到以下错误：

未处理的拒绝（TypeError）：无法读取source.id的未定义的属性“id”

在axios发送post请求之前，如何更改该设置并等待创建源？
创建源时可能会出错。根据stripe，您需要通过这种方式检查请求是否成功

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
                            })
     }
}

创建源时可能会出错。根据stripe，您需要通过这种方式检查请求是否成功

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
                            })
     }
}

从中可以看出，正确的方法是：

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));

  }
};

从中可以看出，正确的方法是：

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));

  }
};

在您的例子中，异步函数有一个错误。在实现中使用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)
  }
}

在您的例子中，异步函数有一个错误。在实现中使用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)
  }
}

谢谢你的帮助！好的，这是一个错误处理问题，而不是异步问题？@JulesCorb对。根据docs，该方法返回一个始终得到解决的承诺。因此，错误被编码为返回值，返回值要么是成功（源），要么是错误。感谢您的帮助！好的，这是一个错误处理问题，而不是异步问题？@JulesCorb对。根据docs，该方法返回一个始终得到解决的承诺。因此，错误被编码为返回值，该返回值要么是成功的（源代码），要么是错误。这似乎符合逻辑，但是否定义
source.id
？因为我没有将createSource定义为
const{source}
如果承诺已与源解析，那么通过将源传递给链中的以下承诺，源可用，是的。这似乎是逻辑，但是否定义
source.id
？由于我没有将createSource定义为
const{source}
，如果承诺已与源解析，则通过将源传递给链中的以下承诺，源可用，是的。