javascript – 如何在返回新Promise之前等待Promise解决？

我正在构建一个用于创建零售标牌的Web应用程序. Firestore保存有关标志的信息,如果用户点击“删除所有标志”,我希望能够删除所有标志.然后会出现一个对话框,要求用户确认删除数据库中的所有标志.如果他们确认,那么应该从Firestore中删除所有标志.

每个符号的文档ID存储在名为signIds的数组中.我希望能够遍历signIds并从Firestore中的signs集合中删除每个文档.一旦所有Promise都解决了,我想返回一个Promise并在mount()中的事件处理程序中解析它.

我已经尝试在代码中的不同位置返回Promise,但无济于事.我也试过使用async和await,但似乎有同样的问题.

data() {
        return {
            signIds: [],}
},methods: {
    showModal(message,type) {
        this.$root.$emit('openModal',{
            closed: false,text: message,type: type
        })
    },emptyQueue() {
        let self = this;
        let deleted = 0;

        for (let id of self.signIds) {
            database.collection("signs").doc(id).delete()
                .then(() => {
                    console.log("Document successfully deleted!");
                    deleted++;
                }).catch((error) => {
                    console.error("Error removing document: ",error);
                });
        }

        // Once all signs are deleted,return new Promise
        return new Promise((resolve,reject) => {
            return (deleted === self.signIds.length) ? resolve() : reject(new Error('An error occurred while deleting signs.'));
        });
    }      
},created() {
        // Get and store the document id for each sign
        database.collection("signs").get()
            .then(snapshot => {
                snapshot.forEach(doc => {
                    this.signIds.push(doc.id);
                })
            });
    },mounted() {
        // When the user clicks 'OK' on the dialog,delete all signs from the database
        this.emptyQueue()
            .then(() => {
                setTimeout(function() {
                    self.showModal('All signs were successfully removed.','success');
                },300);
            }).catch(() => {
                setTimeout(function() {
                    self.showModal('An error has occurred. Some signs were not removed.','error');
                },300);
            })
        }

我希望新的Promise在Firestore的Promise解决之后返回,但是现在新的Promise在for循环结束后立即返回.

解决方法

您通过signIds的Promises进行的当前迭代不会被其他任何东西链接 – .delete()Promise目前没有在任何地方使用.最好将每个id映射到数组中的Promise,然后在该数组上使用Promise.all.如果在消费者中处理错误,则不需要捕获emptyQueue只是为了抛出一个新错误 – 而只是单独返回Promise链,并避免使用 explicit Promise construction anti-pattern：

emptyQueue() {
  return Promise.all(
    this.signIds.map(id => (
      database.collection("signs").doc(id).delete()
    ))
  );
}

如果任何一个.delete()调用导致错误,那么该错误将渗透到您的错误

this.emptyQueue()
  // ...
  .catch(() => {
    ...
  });

部分自动通过Promise.all.