javascript - 如何将函数变成异步函数

Question

首先我要说的是，我几乎没有构建异步函数的经验，在阅读相关文档后我更加困惑。

我使用 vue.js 作为框架，我的方法调用 firebase。

目标

问题是，使用 Firebase，当您删除文档时，它不会自动删除所有嵌套文档，您必须使用递归函数手动执行此操作。因此，我必须重新创建删除函数来完成此任务，并通过制作 mixin 来实现。 mixin 现在可以工作，但是，重新加载发出事件现在在删除函数完成之前触发，因此，幽灵元素保留在 DOM 中。

我希望 $emit('reload') 在 deleteProject() 中对 firebase 的所有调用完成之前不会触发。

我的代码

<script>
import { deleteProject } from '../../../mixins/deleteData'

export default {
  mixins: [deleteProject],
  props: ['yearId', 'projectId', 'project'],
  name: 'deleteProjectModal',
  data: () => ({
    dialog: false
  }),
  methods: {
    del () {
      // call deleteYear method from mixin
      this.deleteProject(this.yearId, this.projectId)
      // emit reload signal for database relaod
      this.$emit('reload')
      // close modal
      this.dialog = false
    }
  }
}
</script>

import firebase from '@/firebase/init'

export const deleteProject = {
  methods: {
    deleteProject (yearId, projectId) {
      // delete project, all documents in the images subcollection of the project, and all stored images
      firebase.firestore().collection('years').doc(yearId).collection('projects').doc(projectId).get()
        .then((doc) => {
          // delete thumbnail
          firebase.storage().ref(doc.data().thumbFullPath).delete()
          // delete project document
          firebase.firestore().collection('years').doc(yearId).collection('projects').doc(projectId).delete()
          firebase.firestore().collection('years').doc(yearId).collection('projects').doc(projectId).collection('images').get()
            .then((querySnapshot) => {
              querySnapshot.forEach((doc) => {
                // delete gallery image
                this.imagePaths.append(doc.data().fullPath)
                // delete reference document for gallery image
                doc.ref.delete()
              })
            })
        })
    }
  }
}

我尝试过的

我认为解决方案将围绕将 deleteProject() 转换为异步函数并调用 deleteProject().then($emit('reload')) 进行。但是，我一直不知道如何做到这一点。

编辑

根据请求，reload 触发以下函数:

import firebase from '@/firebase/init'

export const loadGallery = {
  data: () => ({
    years: []
  }),
  methods: {
    loadProjects () {
      var years = []
      var temp = []
      firebase.firestore().collection('years').orderBy('year', 'desc').onSnapshot((querySnapshot) => {
        querySnapshot.forEach((year) => {
          firebase.firestore().collection('years').doc(year.id).collection('projects').get().then((querySnapshot) => {
            querySnapshot.forEach((project) => {
              var objectMicro = { title: project.data().title, thumbUrl: project.data().thumbUrl, route: project.data().route, id: project.id }
              temp.push(objectMicro)
            })
          }).then(() => {
            var objectMacro = { year: year.data().year, id: year.id, projects: temp }
            years.push(objectMacro)
            temp = []
          })
        })
      })
      this.years = years
    }
  }
}

Answer 1

您只需返回此 deleteProject 方法的 Promise 链中的最前面 .then() 即可，任何后续调用都应该是能够从这一点开始。

deleteProject() {
  // Add a return keyword here, or assign the Promise to a variable and return it. 
  return firebase.firestore().collection('years').doc(yearId).collection('projects').doc(projectId).get()
        .then( /* removed for brevity */ )
}

调用方法，

methods: {
  del() {
    this.deleteProject(this.yearId, this.projectId).then(() => {
      this.$emit('reload')
    })
  }
}

或者，使用 async 关键字使其“更漂亮”，

methods: {
  async del() {
    // You probably want to do try-catch here as well.
    await this.deleteProject(this.yearId, this.projectId);

    this.$emit('reload');
  }
}