检索Observable中的值

时间:2018-05-10 19:34:49

标签: javascript angular promise rxjs observable

我向服务器发出请求并将响应作为可观察对象。在数据内部,我有一个ID引用另一个文档,我需要发送另一个请求来获取数据并将其附加到父Observable的数据。怎么做到这一点?

使用Promise,我可以使用async / await来执行此操作,但我想知道如何使用Observables实现此目的

承诺样本



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;
}
&#13;
&#13;
&#13;

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

修改1

根据@TeddySterne的回复,我写的代码在下面,但是我在订阅中获得了一个observable而不是实际数据,这阻止我将observable分配给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)上使用订阅时,它会返回预期的单用户文档。

我在这里缺少什么?

1 个答案:

答案 0 :(得分:3)

您可以使用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