React中Stripe与Axios异步函数链式调用问题排查

你的判断完全正确——当前代码里的axios.post并没有等待stripe.createSource这个异步操作完成就直接执行了，这就导致当axios尝试读取source.id时，source可能还没被赋值；甚至如果支付源创建失败，source会直接是undefined，这就是你看到那个TypeError的核心原因。

修改方案 #

我们需要做两个关键调整来解决问题：

1. 给axios.post加上await，确保它在支付源创建完成后再执行；
2. 增加错误处理逻辑，捕获Stripe接口调用可能出现的失败情况，避免未处理的Promise拒绝。

修改后的代码如下：

async order() { 
  try {
    // 等待Stripe创建支付源的异步操作完成
    const { source, error } = await this.props.stripe.createSource({
      type: 'card', 
      currency: 'eur', 
      owner: { email: this.props.currentUserEmail }
    });

    // 先检查是否有创建失败的错误，避免后续读取source.id报错
    if (error) {
      console.error('创建支付源失败:', error);
      // 这里可以添加用户提示逻辑，比如把错误信息展示给用户
      return;
    }

    // 确认source存在后，再发送订单请求
    await axios.post("/orders", {
      sourceId: source.id, 
      mealId: this.props.mealId, 
      price: this.state.mealPrice, 
      selectedPickupTime: this.state.selectedPickupTime 
    });

    // 订单提交成功后的逻辑，比如跳转到成功页面或提示用户
    console.log('订单提交成功');
  } catch (err) {
    // 捕获其他可能的错误，比如网络请求失败
    console.error('订单提交失败:', err);
  }
}

为什么这样修改？ #

• await关键字会暂停async函数的执行，直到后面的Promise状态变为resolved，这样就能保证我们只有在拿到Stripe返回的有效支付源数据后，才会执行axios的订单请求；
• 加入try/catch和错误检查，能帮你处理支付源创建失败的情况（比如信用卡信息无效、网络波动等），避免因为source为undefined而抛出未处理的错误；
• 给axios.post也加上await，可以让你在后续逻辑中等待订单提交完成，方便统一处理成功或失败的后续操作。

内容的提问来源于stack exchange，提问作者Uj Corb