如何将函数变为异步

Question

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

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

目标

问题在于，使用 firebase 删除文档时，它不会自动删除所有嵌套文档，您必须使用递归函数手动执行此操作。所以我不得不重新创建删除函数来完成这个，并通过制作一个 mixin 来做到这一点。 mixin 现在可以工作了，但是，reload emit 事件现在会在 delete 函数完成之前触发，因此会在 DOM 中保留一个 ghost 元素。

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

我的代码

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

Answer 2

您正在 deleteProject 方法中执行多个异步 Firebase 操作（调用 Firestore get()、Firestore delete()、Cloud Storage delete()，...），但您没有正确链接这些返回的不同 Promise Firebase 方法。

您必须使用 then() 方法链接这些 Promise，该方法“返回一个允许方法链接的 Promise”。

所以，以下应该可以解决问题（但未经测试）：

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

由于这个deleteProject() 方法现在是异步的，你需要在你的mixin 中调用它：

  methods: {
    del () {
      // call deleteYear method from mixin
      this.deleteProject(this.yearId, this.projectId)
      .then(() => {
         // emit reload signal for database relaod
         this.$emit('reload')
         // close modal
         this.dialog = false
      })
    }
  }

---

请注意，我们使用Promise.all() 并行执行forEach() 中的所有delete() 方法调用。 Promise.all() 方法返回一个单一的 Promise，当所有作为可迭代对象（即 promises 数组）传递的承诺都已实现时，该 Promise 将实现。