我不熟悉Angular 2和HTTP观测.我有一个组件,它调用HTTP服务并返回一个可观察的.然后我同意这个观察结果,它运行良好.

现在,在该组件中,在调用第一个HTTP服务后,如果调用成功,我想调用另一个HTTP服务并返回可观察到的结果.因此,如果第一次调用不成功,组件将返回可观察的,反之,它将返回第二次调用的可观察.

链接HTTP调用的最佳方式是什么?是否有一种优雅的方式,例如monads

推荐答案

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

Angular 4.3+ (using 100) and 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 (using 100) and RxJS < 5.5

导入运算符mapmergeMap,可以链接两个呼叫,如下所示:

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

Angular相关问答推荐

如何动态呈现组件并以Angular 访问它们的方法?

有Angular react 形式的输入用货币管

带迭代的Angular 内容投影

代码优化以删除Angular中的嵌套订阅

如何使用formBuilder.Group()从角形表单中删除选定的选项?

ANGLING:ExpressionChangedAfterChecked在嵌套形式中由子项添加验证器

Angular p-triStateCheckbox for each Select 更改不同的 colored颜色

升级到 Webpack 5.79.0 后 NX Angular 项目构建失败

Angular 13 - 使用 PUT 时出现 400 错误(错误请求)

如何在 Angular 中将tailwind 类传递给 fontawesome

在更改检测之前调用创建的间谍

绑定 Angular material Select 列表

如何在插值中编写条件?

如何在 Angular 4 中使用 Material Design 图标?

visibility:hidden

实现自定义 NgbDateParserFormatter 来更改 NgbInputDatepicker 上输入值的格式是否正确?

为什么Angular 12 'ng serve' 构建应用程序的速度很慢?

`[(ngModel)]` vs `[(value)]`

将 Angular 5 升级到 6 时,我得到不兼容的对等依赖(使用 ng update @angular/core)

RxJS:takeUntil() Angular 组件的 ngOnDestroy()