如何使vue firebase调用异步

Question

我正在使用亚马逊机械土耳其人来雇佣一些工人。我正在使用带有firebase的vue。在firebase中，我有命中（mturk），我想在mturk iframe中提交表单时关闭命中。问题是有时它会关闭命中，有时却不是。

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

// form is not waiting for this before submitting the form
  await this.$store.dispatch('hits/closeHit', {
    hitId: this.hitId,
    workerId: this.workerId
  })

  oFormObject.submit()
}

}

Vuex 操作

const actions = {
  async closeHit({}, payload: any) {
    await db.hits
      .setDone(payload)
      .then()
      .catch((error) => {
        console.log(error)
      })
  }
}

hits.ts

  async setDone(payload: any) {
    try {
      return firestore.db
        .collection(collectionNamespace)
        .doc(payload.hitId)
        .update({
          open: false,
          workerId: payload.workerId
        })
    } catch (error) {
      console.error('Error updating document: ', error)
    }
  }

Answer 1

我不确定它是否会导致您当前的问题，但这段代码似乎是一个反模式：

const actions = {
  async closeHit({}, payload: any) {
    await db.hits
      .setDone(payload)
      .then()
      .catch((error) => {
        console.log(error)
      })
  }
}

您应该使用 either then 或 await，而不是同时使用。现在你的then 没有做任何事情，但可能会破坏await。

更简单，更可能是正确的：

const actions = {
  async closeHit({}, payload: any) {
    await db.hits
      .setDone(payload)
  }
}

Answer 2

您可以使用以下语法

await this.$store.dispatch('hits/closeHit', {
    hitId: this.hitId,
    workerId: this.workerId
  }).then(() => { 
 oFormObject.submit()
 })