如何在Stripe API的JS代码中用Async/Await捕获500错误并展示？

问题核心在于fetch仅会在网络层面出错时触发catch，像500这类HTTP状态码错误不会自动进入catch块，需要手动处理响应状态并解析后端返回的错误数据。以下是修正后的实现：

1. 优化JavaScript代码 #

推荐使用async/await配合try/catch的写法，逻辑更清晰，避免then/catch混用的混乱：

async function initialize() {
  try {
    const response = await fetch("index.php?format=json", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id: myid, lang: mylang }),
    });

    // 检查响应状态：非2xx状态均视为错误
    if (!response.ok) {
      // 解析后端返回的错误JSON数据
      const errorData = await response.json();
      // 抛出包含具体错误信息的异常
      throw new Error(errorData.message || `请求失败，状态码：${response.status}`);
    }

    // 正常响应时解构后端返回的secret字段（注意和PHP返回的键名对应）
    const { secret: clientSecret } = await response.json();
    console.log(clientSecret);
    // 后续Stripe初始化逻辑...

  } catch (error) {
    console.error("初始化失败:", error);
    // 将错误展示给用户（示例：通过页面元素显示）
    const errorContainer = document.getElementById("payment-error");
    if (errorContainer) {
      errorContainer.textContent = error.message;
      errorContainer.style.display = "block";
    }
  }
}

关键改动说明： #

• 用response.ok判断响应是否成功（等价于状态码在200-299区间），反之则处理错误。
• 错误时先解析后端返回的JSON错误数据，抛出包含业务错误信息的异常，确保catch块能拿到具体提示。
• 注意后端返回的字段是secret，前端通过{ secret: clientSecret }重命名为业务需要的clientSecret。
• 添加了DOM元素展示错误的逻辑，可根据实际页面结构调整。

2. 统一PHP错误返回格式 #

确保后端返回的错误JSON和前端解析的结构一致（和你提供的错误示例对齐）：

header('Content-Type: application/json');
try {
    // Stripe相关业务逻辑...
    $output = [
        'secret' => 12345
    ];
    echo json_encode($output);
} catch (Error $e) {
    http_response_code(500);
    // 输出和示例一致的错误结构
    echo json_encode([
        'error' => true,
        'code' => 0,
        'message' => $e->getMessage()
    ]);
}

核心要点总结 #

• fetch不会将HTTP错误（如500）视为异常，必须手动检查状态码并主动抛出错误。
• 错误场景下要先解析后端返回的JSON数据，才能拿到业务层面的具体错误提示。
• 使用async/await时，try/catch是处理异常最直观的方式。

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