Angular(4):具有可观察量的多个HTTP请求:一个接一个地成功

Question

我对 Angular 4 和Observables以及与之相关的一切都很陌生。 我正在尝试一个接一个地执行两个http请求(仅当第一个成功时(。

我正在使用以下代码：

public getCompany(id: string): any {
let company = null;
this.authService.isValidUser().subscribe(response => {
const token = this.tokenStorageService.getTokenFromStorage();
const requestUrl = environment.gatewayUrl + environment.companyService + environment.getCompanyEndPoint + id;
const headers = new Headers();
headers.set('Authorization', 'Bearer ' + token);
const options = new RequestOptions({headers: headers});
return this.http.get(requestUrl, options).catch(this.errorService.handleError);
}, (error: AppError) => {
// ........ //
});
}

这是isValidUser()方法代码：

public isValidUser(): any {
const token = this.tokeStorageService.getTokenFromStorage();
if (!token) {
console.log('cannot find token');
return false;
}
const requestUrl = environment.gatewayUrl + environment.authorizationService + environment.userServiceEndPoint;
const headers = new Headers();
headers.set('Authorization', 'Bearer ' + token);
const options = new RequestOptions({headers: headers});
return this.http.get(requestUrl, options).catch(this.errorService.handleError);
}

这里的想法是仅在authService.isValidUser()代码工作后返回return this.http.get(requestUrl, options).catch(this.errorService.handleError);。

我认为这不是执行此类请求的正确方法，因为我的第二个请求在第一个请求之前就已经完成了。

也许我错过了一些如何正确做到这一点的方法？

谢谢。

Answer 1

您尝试链接这两个函数的代码在哪里？

您可以使用运算符实现您想要switchMap。这是它的文档。

我认为你需要这样的东西：

isValidUser()
.filter(isValidUser => isValidUser) // <-- perhaps you need this filter since you want to make getCompany call only if user is valid
.switchMap(() => getCompany())
.subscribe(...do something...);

不要忘记添加import 'rxjs/add/operator/switchMap';.你也可以使用mergeMap或flatMap(mergeMap是flatMap的同义词(，但它不是首选。

正如@BeetleJuice评论中提到的：为什么switchMap更好？例如，您使用 mergeMap 或 flatMap，某些内容导致了该代码的另一次调用。即使两个第一个请求没有完成，也会发送新的请求。甚至有可能第二个请求包比第一个请求包更快地完成。在第一个捆绑包完成后，您的状态中有错误的数据。为了解决这个问题，RxJS提供了完美的算子switchMap。如果您在上述情况下使用此运算符，则第一个可观察(第一个请求捆绑包(将被取消。只有最后一个可观察的(从上次调用开始(才会保持活动状态。仅当您可以在短时间内多次运行该代码时，才需要 switchMap。如果您知道此代码只会运行一次mergeMap/flatMap也会为您执行相同的操作。

另外，请查看此帖子。

2020 年 3 月 28 日更新：对于新版本的 rxjs，您无法再在返回的可观察对象上调用 switchMap 运算符。相反，您需要在可观察对象上调用管道，并传入之后应该发生的事情。例如：

isValidUser()
.pipe(
switchMap(() => getCompany())
)
.subscribe(...do something...)

也可以将多个运算符传递到管道函数中。更多信息可以在 rxjs 网站的运营商页面上找到