I'm using amazon mechanical turk to hire some workers. I'm using vue with firebase. In firebase I have the hits(mturk) and I want to close the hit when form is getting submitted in mturk iframe. The problem is sometime it closes the hit sometimes it's not.

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 action

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)
    }
  }

CodePudding user response：

You can use following syntax

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

CodePudding user response：

I'm not sure if it causes your current problem, but this code seems like an antipattern:

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

You should use either then or await, not both. Right now your then doesn't do anything, but may be breaking the await.

Simpler and more likely to be correct:

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