http - 如何在 Angular 2 中链接 HTTP 调用？

Question

我是 Angular 2 和 HTTP Observables 的新手。我有一个调用 HTTP 服务并返回 Observable 的组件。然后我订阅了那个 Observable，它工作正常。

现在，我想在那个组件中，在调用第一个 HTTP 服务之后，如果调用成功，调用另一个 HTTP 服务并返回那个 Observable。因此，如果第一次调用不成功，组件返回那个 Observable，相反它返回第二次调用的 Observable。

链接 HTTP 调用的最佳方法是什么？有没有一种优雅的方式，例如monads ？

Answer 1

您可以使用 mergeMap 运算符执行此操作。

Angular 4.3+(使用 HttpClientModule)和 RxJS 6+

import { mergeMap } from 'rxjs/operators';

this.http.get('./customer.json').pipe(
  mergeMap(customer => this.http.get(customer.contractUrl))
).subscribe(res => this.contract = res);

Angular < 4.3(使用 HttpModule)和 RxJS < 5.5

导入操作符map和mergeMap，然后你可以链接两个调用如下:

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/mergeMap';

this.http.get('./customer.json')
  .map((res: Response) => res.json())
  .mergeMap(customer => this.http.get(customer.contractUrl))
  .map((res: Response) => res.json())
  .subscribe(res => this.contract = res);

这里有更多详细信息:http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

可以找到有关 mergeMap 运算符的更多信息 here