Question

如果我有一个依赖于另一个服务调用结果的服务调用，那么链接它们的最佳方法是什么？

myService.getStuffFromServer().subscribe(data => {
  let manipulatedData = functionThatManipulatesData(data);
  myService.getMoreStuffFromServer(manipulatedData).subscribe(moreData => {
    doStuffWithMoreData(moreData);
  });
});

我是这样做的，但有时候嵌套有点乱。有更清洁的方式吗？

Answer 1

正如评论中所提到的那样非常简单。

myService.getStuffFromServer().
  .map(functionThatManipulatesData)
  .flatMap(manipulatedData => myService.getMoreStuffFromServer(manipulatedData))
  .subscribe(moreData => {
    doStuffWithMoreData(moreData);
   });

map将流的每个元素从一种数据转换为另一种数据。但如果该转换涉及异步调用，我们使用flatMap。

我能描述的最简单的方式，这种想法对我有很大帮助。

我们也可以使用flatMap向流中添加多个项目。例如，map采用一个项目并用新项目替换它。如果我们想要一个项目并在其位置添加3个项目该怎么办？例如，我想用方形和立方体替换数字。

----1---2---3---

到

----1---1---1---2---4---8---3---9---27----

然后我们可以使用flatMap

stream.flatMap(num => Observable.of(num, num*num, num*num*num));

现在，flatMap用三个新元素替换每个元素。这是flatmap的两个重要功能。希望我把你弄糊涂了:)

Answer 2

对于 rxjs 6.x.x （已通过6.5.4测试），我们需要添加如下的pipe（）函数：

myService.getStuffFromServer()
  .pipe(
    map(functionThatManipulatesData), 
    flatMap(manipulatedData =>
        myService.getMoreStuffFromServer(manipulatedData)))
  .subscribe(moreData => {
    doStuffWithMoreData(moreData);
   });

要使其正常工作。

Answer 3

myService.getStuffFromServer()
  .subscribe(data => {
     let manipulatedData = functionThatManipulatesData(data);
     return myService.getMoreStuffFromServer(manipulatedData);
  })
  .subscribe(moreData => {
     doStuffWithMoreData(moreData);
  });

在Angular链接observable的最佳方法是什么？

3 个答案: