javascript - AngularFire firestore get/snapshotchanges/valuechanges 对 observable 的操作不是异步的？

Question

嗨，我有一个非常奇怪的行为。

我正在迭代一些文档并设置一些 promise ，即在获取文档时更新 UI。

然而，虽然 promise 是原子的，但 firestore/AngularFire 会等待所有 promise 。

示例:

 for (const event of events) {
        this.eventService.getEventActivitiesAndSomeStreams(this.user,
          event.getID(),
          [DataLatitudeDegrees.type, DataLongitudeDegrees.type])
          .pipe(take(1)).toPromise().then((fullEvent) => {
            this.logger.info(`Promise completed`)
           
          })
      }

人们会期望，随着数据的到来，每个 promise 都会慢慢地打印出已完成的 promise 。

但是它们全部打印一次。这些 promise 看起来并不是一一实现的，而是“一次性”实现的。有一个很长的等待时间，直到第一个控制台日志被打印出来，然后所有的 promise 都打印出来。

所以我希望如果我有一个进度条增加一点但很少但立即增加

内部调用this.eventService.getEventActivitiesAndSomeStreams

return this.afs
        .collection('users')
        .doc(userID)
        .collection('events')
        .doc(eventID)
        .collection('activities')
        .doc(activityID)
        .collection('streams', ((ref) => {
          return ref.where('type', 'in', typesBatch);
        }))
        .get()
        .pipe(map((documentSnapshots) => {
          return documentSnapshots.docs.reduce((streamArray: StreamInterface[], documentSnapshot) => {
            streamArray.push(this.processStreamDocumentSnapshot(documentSnapshot)); // Does nothing rather to create an class of the JSON object passed back from the firestore
            return streamArray;
          }, []);
        }))

现在，如果我在 for 循环中放置一个等待，当然这会正常工作并完成应有的 promise ，但需要花费很多时间。

我也尝试过不使用AngularFire而使用原生JS SDK，效果相同。

我怀疑 IndexedDB 可能会导致此逻辑或其他一些 Firebase 逻辑。

我在这里缺少什么？如果可能的话，我怎样才能获得所需的行为？

您可以通过 ["users"-> "events"-> "something"] firestore 集合来重现此内容，每个“用户”有 500 个“事件”，并且每个事件都有 2 个以上文档。

因此，获取用户的所有事件，并尝试为每个事件做出一个 promise ，该 promise 将在 for 数组中返回 2 个“某物”文档)

Answer 1

这种行为是符合预期的，与 firebase 无关。您正在迭代数组并发送请求。项目之间没有等待或延迟，因此 for 循环(没有 wait 语句)将在难以察觉的短时间内完成，这意味着所有请求都在彼此之间的几毫秒内发送出去，或者基本上同时发送出去。因此，他们的回复预计也会基本同时到达。

您已经声明您不想使用await 语句并逐一迭代，因此很难确切地知道您确实想要或期望发生什么。也许您希望它们间隔 0.5 秒？如果是这样，您需要编写该逻辑:

timer(0, 500).pipe( // put whatever ms time between requests you want here?
  take(events.length),
  switchMap(i => {
    return this.eventService.getEventActivitiesAndSomeStreams(this.user,
      events[i].getID(),
      [DataLatitudeDegrees.type, DataLongitudeDegrees.type]).pipe(take(1))
  })
).subscribe(fullEvent => {
  this.logger.info(`Promise completed`)
})

(删除的 promise 会导致我不知道为什么要首先使用它们，并且在我看来，使用 rxjs 更容易进行这种控制)