javascript - 在 .then 函数中返回嵌套在 forEach 中的 Promise

Question

我正在努力返回嵌套在 forEach 函数中的 promise (或多个 promise )，该函数嵌套在 .then 函数中。

第二个 .then 不会等待第一个 .then 内的 Promise 完成，因此不会返回 'this.topics' (而是空数组)并且记录 undefined 而不是数据。

我认为最好通过查看代码来理解，所以这里是:

getTopics() {

      this.$fireStore
        .collection("courses")
        .doc(this.$store.state.courses.currentlyPreviewing.cid)
        .collection("sections")
        .get()
        .then(snapshot => {

            snapshot.forEach(sec => {
              return this.$fireStore
                .collection("courses")
                .doc(this.$store.state.courses.currentlyPreviewing.cid)
                .collection("sections")
                .doc(sec.id)
                .collection("topics")
                .orderBy("order")
                .get()
                .then(snapshot => {
                  snapshot.forEach(doc => {
                    this.topics.push({
                      data: doc.data(),
                      topic_id: doc.id,
                      sectionOfTopic_id: sec.id
                    });
                  });
                  console.log('First done!') // Only logged after data and this.topics
                });
            })
        })
        .then((data) => {
          console.log(data) // Logs undefined
          console.log(JSON.stringify(this.topics)) // Logs empty array
          return this.topReady = true;
        });

Answer 1

您正在使用一个或多个 Promise，而不是单个 Promise，因此请考虑使用 Promise.all ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all )。

Promise.all() 方法返回一个 Promise，当作为可迭代对象传递的所有 Promise 都已实现或者可迭代对象不包含 Promise 时，该 Promise 就会实现。它以第一个拒绝的原因拒绝。

getTopics() {

  this.$fireStore
    .collection("courses")
    .doc(this.$store.state.courses.currentlyPreviewing.cid)
    .collection("sections")
    .get()
    .then(snapshot => {
        const promises = snapshot.map(sec => {
          return this.$fireStore
            .collection("courses")
            .doc(this.$store.state.courses.currentlyPreviewing.cid)
            .collection("sections")
            .doc(sec.id)
            .collection("topics")
            .orderBy("order")
            .get()
            .then(snapshot => {
              snapshot.forEach(doc => {
                this.topics.push({
                  data: doc.data(),
                  topic_id: doc.id,
                  sectionOfTopic_id: sec.id
                });
              });
              console.log('First done!') // Only logged after data and this.topics
            });
        })

        return Promise.all(promises)
    })
    .then((data) => {
      console.log(data) // Logs undefined
      console.log(JSON.stringify(this.topics)) // Logs empty array
      return this.topReady = true;
    });