当前位置：首页 > 文章列表 > Golang > Go教程 > Go 前端表单如何处理重复提交：幂等键、按钮状态与超时恢复

Go 前端表单如何处理重复提交：幂等键、按钮状态与超时恢复

来源：17golang原创 2026-08-26 22:30:08 0浏览收藏

表单重复提交最麻烦的地方，不是按钮被点了两次，而是第一次请求可能已经写入成功，浏览器却在响应回来前断了。比较稳妥的做法是把责任拆开：前端立即锁住按钮，Go 服务端用幂等键识别同一业务意图，网络超时后再用这个键查询结果。

要点速览

按钮禁用只能改善体验，不能代替服务端判断。
每次业务提交都带一个只代表本次意图的幂等键。
服务端保存处理中、成功和失败结果，重复请求返回同一结果。
超时后不要盲目重做，先查询原幂等键对应的状态。

先把一次提交拆成三个可观察状态

假设页面提交的是“创建报名记录”。用户按下提交后，页面先把按钮改成“提交中”，同时生成一个随机幂等键，例如 apply-7f3c...。服务端收到它时，先查键是否存在：没有就建立处理中记录；已有成功记录就直接返回原结果；仍在处理则告诉客户端继续查询。

这里的关键不是键长什么样，而是它的生命周期。一次点击、一次重试、一次超时后的恢复，都必须沿用同一个键；用户修改表单内容后重新提交，则必须换新键。

交互层：按钮状态要能从超时中恢复

前端可以先挡住连续点击，但不要在请求超时后永久禁用按钮。下面的逻辑保留当前键，超时后给出“查询结果”和“重新填写”两个选择；用户确认原请求失败并且内容未改变时，才允许继续查询或换新键。

const form = document.querySelector('#apply-form');
const submitButton = form.querySelector('button[type="submit"]');
let requestKey = crypto.randomUUID();

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  submitButton.disabled = true;
  submitButton.textContent = '提交中…';
  try {
    const response = await fetch('/api/applications', {
      method: 'POST',
      headers: {'Content-Type': 'application/json', 'Idempotency-Key': requestKey},
      body: JSON.stringify(Object.fromEntries(new FormData(form)))
    });
    const result = await response.json();
    showResult(result);
  } catch (error) {
    showRetryWithSameKey(requestKey);
  } finally {
    submitButton.disabled = false;
    submitButton.textContent = '提交申请';
  }
});

按钮状态只是第一道门。它应该在请求开始时立刻变化，在成功、明确失败或网络异常后都有出口。把按钮一直锁死，用户刷新页面后仍然无法判断服务端到底做没做。

服务端：让相同幂等键只对应一个结果

Go 接口先校验幂等键，再进入真正的写入逻辑。示例中的存储用互斥访问的 map 只是为了把边界讲清楚；多实例部署时，应换成 Redis 或数据库，并给处理中记录设置过期时间。

type Record struct {
  State  string
  Body   []byte
  Expire time.Time
}

func createApplication(w http.ResponseWriter, r *http.Request) {
  key := r.Header.Get("Idempotency-Key")
  if key == "" || len(key) > 100 {
    http.Error(w, "missing idempotency key", http.StatusBadRequest)
    return
  }

  record, existed := store.LoadOrCreate(key, 2*time.Minute)
  if existed {
    writeStoredResult(w, record)
    return
  }

  body, err := saveApplication(r)
  if err != nil {
    store.MarkFailed(key, []byte(`{"message":"保存失败，可重试"}`))
    http.Error(w, "save failed", http.StatusInternalServerError)
    return
  }
  store.MarkSuccess(key, body)
  w.Header().Set("Content-Type", "application/json")
  w.WriteHeader(http.StatusCreated)
  w.Write(body)
}

LoadOrCreate 和后续写入之间必须有清楚的并发边界，否则两个相同键的请求可能同时穿过检查。真实存储应使用唯一键约束或原子写入，把“首次占位”这一步变成不可分割的动作。

超时恢复：查询原键，而不是重新创建

客户端收到超时，只能说明“没有拿到结果”，不能说明“服务端没有写入”。可以为同一个键提供查询入口：

func queryApplication(w http.ResponseWriter, r *http.Request) {
  key := r.URL.Query().Get("idempotency_key")
  record, ok := store.Load(key)
  if !ok {
    http.Error(w, "not found", http.StatusNotFound)
    return
  }
  writeStoredResult(w, record)
}

页面轮询到 success 就展示申请编号，轮询到 failed 才恢复“重新提交”。如果返回 processing，显示处理中并保留当前键；如果记录已经过期，页面应要求用户重新确认表单内容后生成新键。