Angular 6：将 Observable 响应传递给另一个 Observable

Question

我在使用 angular typescript 中的 observable 获取 Web API 输出时遇到问题。

我想获取第一个 observable 返回的值，然后将其值传递给另一个 observable。到目前为止，这就是我所写的。

let output: any;
let output2: any;

_httpClient.get('http://localhost:5000/api/mycontroller')
  .subscribe((output_1) => {
    output = output_1;
  });

alert(output);

_httpClient.get('http://localhost:5000/api/mycontroller2'+output)
  .subscribe((output_2) => {
    output2 = output_2;        
  });
alert(output2);

我在每个订阅的 observable 下方放置了一个警报函数，以检查每个响应返回的输出。

但是当我执行它并检查警告框中的输出时，它给每个都提供了未定义的值。

如何强制 observable 提供来自我的 Web API 的输出？

Answer 1

您可以使用诸如switchMap 之类的运算符，根据文档“映射到可观察对象，完成先前的内部可观察对象，发出值”。使用switchMap 它将切换到第二个HttpClient 调用映射第一个可观察对象，当第一个HttpClient 调用的源发出时。如果执行了新的初始/外部请求，它将取消进行中/进行中的请求。

请记住，alert() 语句的设置方式将无法正常工作，因为 alert() 将在请求完成之前执行，因此 undefined。您需要在subscribe 中执行alert() 或类似操作，或使用do/tap 等运算符来确保实际返回数据。

import { switchMap } from 'rxjs/operators';

_httpClient.get('http://localhost:5000/api/mycontroller')
  .pipe(
    switchMap(output => _httpClient.get('http://localhost:5000/api/mycontroller2' + output))
  )
  .subscribe(output2 => alert(output2));

如果您需要将输出保存到某个本地类属性，您可以利用do/tap 在数据返回/映射/处理之前/之后执行操作。

import { switchMap, tap } from 'rxjs/operators';

_httpClient.get('http://localhost:5000/api/mycontroller')
  .pipe(
    tap(output => {
        console.log(output);
        this.output = output;            
    }),
    switchMap(output => _httpClient.get('http://localhost:5000/api/mycontroller2' + output)),
    tap(output2 => {
        console.log(output2);
        this.output2 = output2;            
    })
  )
  .subscribe(output2 => alert(output2));

Answer 2

为了完整接受答案，还应提及switchMap 的其他替代方案。

与switchMap 相比，mergeMap（也称为flatMap）运算符将不会在“外部 observable”在“inner observable”完成之前第二次发出时被取消.这在HttpClient.get 的情况下可能并不重要，因为它通常只发出一次，因此永远不会再次触发内部可观察对象。

但是，在继续使用 RxJS 运算符时，尤其是在处理顺序数据流时，请注意 switchMap 和 mergeMap 之间的区别。