如何在角度2中链接 HTTP 调用？

我是角度2和 HTTP 观测的新手。我有一个组件，它调用一个 HTTP 服务并返回一个可观察的。然后我订阅了那个可观察的，它工作得很好。

现在，我希望在该组件中，在调用第一个 HTTP 服务之后，如果调用成功，调用另一个 HTTP 服务并返回那个可观察的。因此，如果第一个调用不成功，组件将返回 Obable，相反，它将返回第二个调用的 Obable。

链接 HTTP 调用的最佳方式是什么? 是否有一种优雅的方式，例如 单子？

57820 次浏览
小开
最佳答案

您可以使用 mergeMap操作符来完成此操作。

角度4.3 + (使用 HttpClientModule)和 RxJS6 + 

import { mergeMap } from 'rxjs/operators';


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

角度 < 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 操作符的更多信息 给你

小开

使用 rxjs 来完成这项工作是一个很好的解决方案。它容易阅读吗? 我不知道。

做到这一点的另一种方法是使用 等待/异步(在我看来) ，这种方法更具可读性。

例如:

async getContrat(){
// Get the customer
const customer = await this.http.get('./customer.json').toPromise();


// Get the contract from the URL
const contract = await this.http.get(customer.contractUrl).toPromise();


return contract; // You can return what you want here
}

那就叫它:)

this.myService.getContrat().then( (contract) => {
// do what you want
});

或者在异步函数中:

const contract = await this.myService.getContrat();

您还可以使用 尝试/接住来管理错误:

let customer;
try {
customer = await this.http.get('./customer.json').toPromise();
}catch(err){
console.log('Something went wrong will trying to get customer');
throw err; // Propagate the error
//customer = {};  // It's a possible case
}

提交答案