javascript - 检索 Observable 内的值

Question

我向服务器发出请求并得到可观察到的响应。在数据内部，我有一个引用另一个文档的 ID，我需要发送另一个请求来获取数据并将其附加到父 Observable 的数据中。如何实现这一目标？

有了 Promise，我可以使用 async/await 来做到这一点，但我想知道如何使用 Observables 来实现这一点

有 promise 的示例

async func_name() {
  let data1 = await <first_server_call_returns_promise>();
  let data2 = await <second_call_with_data1.id_returns_promise>();
  data1.value = data2;
  return data1;
}

如何使用 Observables 实现上述目标？

编辑 1

基于@TeddySterne回复，我编写的代码如下，但我在订阅中得到了一个可观察值，而不是实际数据，这阻止了我将可观察值分配给html

this.blogDoc.snapshotChanges().pipe(
    exhaustMap((blogs) => {
        return blogs.map(blog => {
          const data = blog.payload.doc.data();
          const id = blog.payload.doc.id;
          return this.userService.getUserById(data.uid).pipe(
            map((user) => {
              const name = user.name;
              return { id, name, ...data}
            }),
          )
        })
    }),
  )
  .subscribe(finalData => {
    finalData.subscribe(data => console.log(data));
  });

编辑2

下面是我现在的更新代码

this.blogDoc.snapshotChanges().pipe(
      exhaustMap((blogs: any[]) => {
        return zip(blogs.map((blog) => {
          const data = blog.payload.doc.data();
          const id = blog.payload.doc.id;
          console.log(data);
          return this.userService.getUserById(data.uid).pipe(
            map((value) => {
              console.log(value);
              return value;
            })
          )
        })).pipe(first())
      })
    ).subscribe(values => console.log("Values: ", values));

的console.log(data) 正确打印数据，但 console.log(value) 未打印，也未打印 console.log("Values: ", values )

当我在 this.userService.getUserById(data.uid) 上使用订阅时，它会返回预期的单用户文档。

我在这里缺少什么？

Answer 1

您可以使用 exhaustMap 将数据通过管道传输到第二个 http 调用，然后在返回时将数据合并在一起。

示例

import { zip } from 'rxjs/observable/zip';

this.http.get('/data1').pipe(
  exhaustMap((data1Arr: any[]) => {
    return zip(...data1Arr.map((data1) => {
      return this.http.get('/data2/' + data1.id).pipe(
        map((data2) => {
          data1.value = data2;
          return data1;
        }),
      );
    }).pipe(first());
  }),
).subscribe((fullQualifiedData) => {
  // do stuff with the data
});

Example