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映射第一个observable的第二个HttpClient调用.如果执行新的初始/外部请求,它将取消正在进行的/正在处理的请求.

请记住,您的alert()语句的设置方式,它们将不会像alert()请求完成之前那样执行,因此undefined.您需要执行alert()或类似于/ 或类似的subscribe运算符,以确保实际返回数据.dotap

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，如果“外部 observable”在“内部 observable”完成之前第二次发出，则mergeMap（也称为flatMap）运算符不会被取消。这在 的情况下可能并不重要HttpClient.get，因为它通常只发出一次，因此永远不会再次触发内部 observable。

但是，要知道之间的差别switchMap和mergeMap与数据的连续流打交道时继续与RxJS运营商合作，尤其是当。