如何在Promise链中处理多错误？AWS Amplify+Stripe注册验证整合

我明白你现在的困扰：当前流程是先处理Stripe支付再进行Amplify注册，导致两类验证分开，一旦某一步失败就会出现数据不一致的情况（比如Stripe创建了客户但Amplify注册失败）。下面是一套完整的解决方案，帮你实现先统一验证所有信息，再同时在两边创建账号的目标：

一、先做前端预验证，拦截明显错误 #

在发起后端请求前，先在前端对所有字段做基础验证，避免无效的后端调用：

• 邮箱格式验证：用正则检查邮箱是否符合标准格式
• 密码合规性验证：匹配AWS Amplify的密码要求（比如至少8位、包含大小写字母和数字）
• Stripe支付信息验证：利用Stripe Elements自带的验证方法，检查卡号、有效期、CVV是否合法

示例代码片段：

const validateAllFields = () => {
  const errors = {};
  // 邮箱格式检查
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailPattern.test(this.state.email)) {
    errors.email = "请输入有效的邮箱地址";
  }
  // Amplify密码规则检查
  if (this.state.password.length < 8 || !/[A-Z]/.test(this.state.password) || !/[0-9]/.test(this.state.password)) {
    errors.password = "密码需至少8位，包含大写字母和数字";
  }
  // Stripe卡片验证
  const cardElement = this.props.stripe.elements().getElement("card");
  const cardValidation = cardElement.validate();
  if (cardValidation) {
    errors.payment = cardValidation.message;
  }
  return errors;
};

二、调整后端流程，保证原子性（最优方案） #

最可靠的方式是创建一个联合后端API接口（比如用AWS Lambda实现），把Stripe客户创建和Amplify用户注册放在同一个接口里，用事务逻辑保证：要么两步都成功，要么都失败。

Lambda函数的核心逻辑示例：

// Lambda函数代码（Node.js）
const { Auth } = require('aws-amplify');
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

exports.handler = async (event) => {
  const { email, password, stripeToken } = JSON.parse(event.body);
  let stripeCustomerId = null;
  
  try {
    // 第一步：创建Stripe客户
    const customer = await stripe.customers.create({
      email: email,
      source: stripeToken
    });
    stripeCustomerId = customer.id;
    
    // 第二步：创建Amplify用户
    const amplifyUser = await Auth.signUp({
      username: email,
      password: password,
      attributes: {
        'custom:stripeCustomerId': stripeCustomerId // 把Stripe客户ID存在Amplify用户属性里
      }
    });
    
    return {
      statusCode: 200,
      body: JSON.stringify({ amplifyUser, stripeCustomerId })
    };
  } catch (error) {
    // 如果Amplify注册失败，回滚Stripe客户
    if (stripeCustomerId) {
      await stripe.customers.del(stripeCustomerId);
    }
    return {
      statusCode: 400,
      body: JSON.stringify({ error: error.message })
    };
  }
};

三、前端调用调整 #

前端只需要调用这个联合API，不用再分开处理Stripe和Amplify的请求，简化流程：

const handleSignup = async () => {
  this.setState({ isLoading: true, errors: {} });
  
  // 前端预验证
  const frontErrors = validateAllFields();
  if (Object.keys(frontErrors).length > 0) {
    this.setState({ errors: frontErrors, isLoading: false });
    return;
  }

  try {
    // 创建Stripe令牌（验证支付信息）
    const stripeResult = await this.props.stripe.createToken({ email: this.state.email });
    if (stripeResult.error) {
      throw new Error(stripeResult.error.message);
    }

    // 调用联合注册API
    const apiName = 'YourCombinedAPI';
    const path = '/combined-signup';
    const response = await API.post(apiName, path, {
      body: {
        email: this.state.email,
        password: this.state.password,
        stripeToken: stripeResult.token.id
      }
    });

    // 所有步骤成功，跳转验证页面
    this.setState({
      confirmAccount: true,
      isLoading: false,
      userEmail: this.state.email,
      errors: {}
    });
    this.props.history.push('/signup#confirm-account');

  } catch (err) {
    this.setState({
      errors: { errorMsg: err.message },
      isLoading: false
    });
  }
};

四、如果无法修改后端的折中方案 #

如果暂时没法创建联合API，那就在前端先验证Stripe支付信息，再调用Amplify注册；一旦Amplify注册失败，调用后端接口删除已创建的Stripe客户：

// 折中方案的前端流程
const handleSignup = async () => {
  this.setState({ isLoading: true, errors: {} });
  
  const frontErrors = validateAllFields();
  if (Object.keys(frontErrors).length > 0) {
    this.setState({ errors: frontErrors, isLoading: false });
    return;
  }

  try {
    // 1. 创建Stripe令牌并创建客户
    const stripeResult = await this.props.stripe.createToken({ email: this.state.email });
    if (stripeResult.error) throw new Error(stripeResult.error.message);

    const stripeApiName = 'NameOfAPI';
    const stripeResponse = await API.post(stripeApiName, '/stripe/signup', {
      body: { stripeToken: stripeResult.token.id, email: this.state.email }
    });

    // 2. 创建Amplify用户
    const user = await this.props.userSignupRequest(this.state.email, this.state.password, stripeResponse);

    // 成功跳转
    this.setState({
      confirmAccount: true,
      isLoading: false,
      userEmail: this.state.email,
      errors: {}
    });
    this.props.history.push('/signup#confirm-account');

  } catch (err) {
    // 如果Amplify失败，删除Stripe客户
    await API.del(stripeApiName, `/stripe/customer/${this.state.email}`);
    this.setState({
      errors: { errorMsg: err.message },
      isLoading: false
    });
  }
};

这样就能确保邮箱、密码和支付信息都验证通过后，才会在两边创建账号，避免数据不一致的问题。

内容的提问来源于stack exchange，提问作者Skate to Eat