在表单 post 提交之前执行异步功能

Question

我想做的事情：

在我的网站上，我创建了一个注册表单，我想在提交后执行两个操作：

1) 为用户订阅 MailChimp EDM 列表（仅使用姓名、电子邮件字段）。

2) 通过执行 POST 操作（所有字段，尤其是它们的消息）将完整的表单存储在 Netlify 中

这是我的表格：

<form
  className={`contact-form ${submitError ? 'has-error' : ''}`}
  name={formName}
  method="POST"
  onSubmit={event => this.submitHandler(event)}
  action="/thank-you/"
  data-netlify="true"
  data-netlify-honeypot="bot-field"
>
   // Form fields
</form>

这是我的 onSubmit 处理程序：

submitHandler = async (event) => {
  const {
    email,
    fieldValues,
    submitting,
  } = this.state;
  if (submitting) return false;
  this.setState({
    submitting: true,
    submitError: false,
  });
  const result = await addToMailchimp(email, fieldValues);
  if (result.result === 'success') {
    // Inconsequential, as success should result in redirection to the success page
    this.setState({
      submitting: false,
    });
  } else {
    event.preventDefault(); // this SHOULD stop form submit?
    this.setState({
      errorMessage: decodeEntities(result.msg),
      submitError: true,
      submitting: false,
    });
  }
}

这里发生了什么：

正如您在代码片段中看到的那样，为了实现这一点，我尝试首先使用用户提交的字段异步订阅 MailChimp，如果我没有收到成功消息，我会中断使用 event.preventDefault();.

提交操作

作为奖励，这对于防止重复注册也很有用，因为如果他们已经在订阅列表中，我会从 MailChimp 收到一条消息。

问题：

然而，实际情况是无论订阅操作是否完成、成功或不成功，表单都会提交并重定向到成功页面 (/thank-you/)。

我有大约 50% 的表单提交导致了 MailChimp 订阅，而另一半则没有。当我对此进行测试时，有时我会在页面重定向到成功页面之前看到订阅成功/失败消息闪烁 (/thank-you/)。

值得注意的是 event.preventDefault(); 如果表单提交操作在异步/等待函数之前执行，它会中断表单提交操作 - 所以我猜这是执行订阅操作所需时间的问题。

任何人都可以阐明这里发生的事情以及可能的解决方案吗？

Answer 1

你能在 await 之前 preventDefault，然后在异步调用 addToMailchimp 成功后在表单上调用 submit() 吗？

submitHandler = async (event) => {
  event.preventDefault()
  const form = e.target

  const {
    email,
    fieldValues,
    submitting,
  } = this.state;
  if (submitting) return false;
  this.setState({
    submitting: true,
    submitError: false,
  });
  const result = await addToMailchimp(email, fieldValues);
  if (result.result === 'success') {
    // Inconsequential, as success should result in redirection to the success page
    this.setState({
      submitting: false,
    });
    form.submit()
  } else {

    this.setState({
      errorMessage: decodeEntities(result.msg),
      submitError: true,
      submitting: false,
    });
  }
}

working codesandbox example

在表单 post 提交之前执行异步功能

Performing an async function before form post submission

forms

gatsby

netlify