RxJS - 解决多个服务器调用

Question

我在 Angular 4 中使用 RxJS 来编写异步调用。

我需要调用服务器，获取响应并使用它进行另一个调用，获取此响应并使用它进行另一个调用等等。我为此使用下面的代码，这可以按预期工作

id;
name;
ngOnInit() {
    this.route.params
      .flatMap(
      (params: Params) => {
        this.id = params['id'];
        return this.myService.get('http://someurlhere');
      }
      )
      .flatMap(
      (response: Response) => {
        return this.myService.get('http://someurlhere');
      })
      .flatMap(
      (response: Response) => {
        return this.myService.get('http://someurlhere');
      })
      .subscribe(
      (response: Response) => {
        FileSaver.saveAs(blob, this.name );
      },
      (error) => {        
        console.log('Error ' + error)
      }
      )
  }

现在，我需要对其进行一些更改。在第一个 flatMap 中，我需要打 2 个休息电话，并且只有在它们都解决后才继续。不仅如此，只有其中一个的响应会被传递到下一个 flatMap，因为另一个调用只会填充一个变量

id;
name;
ngOnInit() {
    this.route.params
      .flatMap(
      (params: Params) => {
        this.id = params['id'];
         // this is the 2nd REST call. It just populates a variable, so don't need the output to be passed to next flatMap. However, both the URLs in this section should resolve before the next flatMap is executed.
        this.name = this.myService.get('http://someotherurlhere');
        return this.myService.get('http://someurlhere');
      }
      )
      .flatMap(
      (response: Response) => {
        return this.myService.get('http://someurlhere');
      })
      .flatMap(
      (response: Response) => {
        return this.myService.get('http://someurlhere');
      })
      .subscribe(
      (response: Response) => {
        FileSaver.saveAs(blob, this.name );
      },
      (error) => {        
        console.log('Error ' + error)
      }
      )
  }

所以，我的问题是应该如何编写这段代码，以便它从服务器获取响应，但在移动到下一个平面图之前等待另一个 rest 调用也完成。

this.name = this.repoService.getDocProperties(this.objectId);

Answer 1

您可以将异步调用与 forkJoin 结合使用

在你的情况下，你有两个电话：

this.myService.get('http://someotherurlhere');
this.myService.get('http://someurlhere');

它们可以这样组合：

let call1 = this.myService.get('http://someotherurlhere');
let call2 = this.myService.get('http://someurlhere');
return Observable.forkJoin([call1, call2])

当你订阅（或链接其他函数）加入的 observable 时，返回的数据将在一个数组中。因此，call1 的结果将位于索引 0 处，call2 位于索引 1 处。

Observable.forkJoin([call1, call2]).subscribe((results) => {
  results[0]; // call1
  results[1]; // call2
});