javascript - 如何在管道 map 中处理 promise

Question

我肯定我在这里很困惑，所以请提供任何帮助。

这是我的场景:

我从 Firestore 中提取了一个文档:

return this.afs.collection("events").doc(eventID).snapshotChanges().pipe(
      map( document => {

      })
    );

到这里为止一切都很好。

但在 map 内我需要一个 promise 来解决(或不解决)

例如:

return this.afs.collection("events").doc(eventID).snapshotChanges().pipe(
      map( document => {
        // This is a promise the below part 
        const data = await EventImporterJSON.getFromJSON(document.payload.data())
        return data
      })
    );

我了解 await不可能在那里发生。我很困惑如何解决这个问题，也许我在 observables 和 rxjs 上工作的时间不够长。

最后我想要实现的是:

获取文档。映射并处理它，但在这个过程中，我需要处理一个 promise 。

不过，我不想将该 promise 返回给调用者。

这有意义吗？

还是我的结构完全错误？

Answer 1

这是 mergeMap 的典型用例或 concatMap :

return this.afs.collection("events").doc(eventID).snapshotChanges().pipe(
  mergeMap(document => {
    // This is a promise the below part 
    return EventImporterJSON.getFromJSON(document.payload.data())
  })
);

但是，您也可以使用 async - await因为 mergeMap 等运算符以相同的方式处理 Observables、Promise、数组等，因此您可以在 mergeMap 中返回一个 Promise s 项目功能它将正常工作。
通常，您不需要使用多个 await s 在单个方法中，因为更“Rx”的做事方式是链接运算符，但如果你愿意，你可以因为 async方法返回一个 Promise，RxJS 将像处理任何其他 Promise 一样处理它。

const delayedPromise = () => new Promise(resolve => {
  setTimeout(() => resolve(), 1000);
})

of('a').pipe(
  mergeMap(async v => {
    console.log(1);
    await delayedPromise();
    console.log(2);
    await delayedPromise();
    console.log(3);
    await delayedPromise();
    return v;
  })
).subscribe(console.log);
// 1
// 2
// 3
// a


Live demo: https://stackblitz.com/edit/rxjs-3fujcs