如何让Vue调用Firebase操作异步执行，解决MTurk表单提交时HIT偶发关闭失败问题

• 异步逻辑存在疏漏：当前代码混用了async/await和.then/.atch，且错误捕获逻辑仅打印日志不向上抛出，上层逻辑无法感知Firestore更新是否真的成功，出现更新失败的场景时仍会直接提交表单，最终导致HIT没有关闭
• Firestore离线持久化干扰：如果你的Firebase开启了离线持久化（部分环境默认开启），update方法的Promise会在本地缓存更新完成后立即resolve，此时实际的服务端同步请求还未发出，表单提交后iframe会立即卸载中断网络请求，服务端最终没有收到更新请求，表现为偶发关闭失败
• 缺少错误兜底逻辑：更新失败时没有重试机制，直接提交表单导致HIT状态未同步

1. 修正Firestore更新逻辑，强制等待服务端确认 #

修改hits.ts里的setDone方法，确保更新完成后再从服务端拉取一次确认，避免本地缓存提前resolve：

async setDone(payload: any) {
  try {
    // 执行更新操作
    await firestore.db
      .collection(collectionNamespace)
      .doc(payload.hitId)
      .update({
        open: false,
        workerId: payload.workerId
      })
    // 强制从服务端拉取数据确认更新生效，避免本地缓存提前返回
    await firestore.db
      .collection(collectionNamespace)
      .doc(payload.hitId)
      .get({ source: 'server' })
    return true
  } catch (error) {
    console.error('Error updating document: ', error)
    // 抛出错误让上层逻辑感知更新失败
    throw error
  }
}

2. 简化Vuex Action逻辑，移除冗余链式调用 #

const actions = {
  async closeHit({}, payload: any) {
    // 直接返回setDone的Promise，不要吞掉错误
    return await db.hits.setDone(payload)
  }
}

3. 修正提交逻辑，增加错误处理和重试兜底 #

修改submitAssignment方法，增加try/catch逻辑，更新失败时提示用户重试，不要直接提交表单：

public async submitAssignment() {
  var urlParams = new URLSearchParams(window.location.search)
  if (urlParams.has('assignment_id')) {
    this.host = urlParams.get('host')
    this.assignmentId = urlParams.get('assignment_id')
    this.workerId = urlParams.get('workerId')
    this.hitId = urlParams.get('hitId')

    const oFormObject = document.forms['mturkForm']
    oFormObject.action = this.host
    oFormObject.elements['assignmentId'].value = this.assignmentId
    oFormObject.elements['workerId'].value = this.workerId
    oFormObject.elements['hitId'].value = this.hitId

    try {
      // 等待HIT关闭操作完全完成（服务端已确认更新生效）
      await this.$store.dispatch('hits/closeHit', {
        hitId: this.hitId,
        workerId: this.workerId
      })
      // 确认成功后再提交MTurk表单
      oFormObject.submit()
    } catch (err) {
      // 自定义错误提示，引导用户重试提交，不要直接跳转
      alert('提交失败，请重试。如果多次失败请联系管理员。')
      console.error('关闭HIT失败', err)
    }
  }
}

如果修复后仍存在偶发失败，可以给提交按钮加防抖逻辑避免用户重复点击触发多次提交，同时确认Firebase的权限规则配置正确，没有拦截HIT文档的更新请求。

内容的提问来源于stack exchange，提问作者A.S. SAMARASINGHE