订阅可观察量时对后端的无限 HTTP 请求

Question

我正在向 Angular2 站点添加一个功能以显示当前登录的用户名。

我似乎能够从后端服务中检索我需要的信息。 但是，当有问题的前端代码运行时，当只需要一个请求时，将重复发送对后端的请求，并尽可能快地发送。

当我更改代码以订阅可观察量时，这个无限的请求循环就开始了。 如果不订阅，我能够从前端服务检索的信息就不可用;它看起来像下面的示例。

{"_isScalar":false,"source":{"_isScalar":false},"operator":{}}

元件

loggedInUser() {
this.authService.loggedInUser().subscribe(res => {
this.currentUser = res;
return this.currentUser;
})
}

前端服务

loggedInUser() {
const userId = localStorage.getItem('userId');
return this.http
.get('http://localhost:3000/user/current/' + userId)
.map((response: Response) => {
const user = response.json();
return user;
})

我从阅读Stack Overflow上的其他帖子中了解到这并不是真正的"无限循环"。 但是，我无法理解其他帖子中的解决方案。

感谢您的帮助！

Answer 1

简单的方法是在用户登录时将您的信息存储在本地存储中，然后只需阅读它。

//In your authService
loggedInUser() {
return this.http.post(AppSettings.API_URL + 'login', data, this.options)
.map((response: Response) => {
let username = response.json().data.username;
if(username){
localStorage.setItem('username', username);
return true;
} else {
return false;
}
}
//In your login form component
onSubmit() {
this.authService.loggedInUser(email, ....)
.subscribe(
result => {
if (result === true) {
//It's ok
} 
error => {
//error
}
)
}

如果您只想订阅一次，则可以使用 take 运算符。 当您离开一个组件或导航到另一个组件时，不要忘记取消订阅您的可观察量(在您的 ngOnDestroy 方法中执行此操作(。

Answer 2

不确定没有小提琴，但您是否直接从模板调用组件的loggedInUser函数？

在组件中，将订阅代码移动到ngOnInit挂钩

include { Component, OnInit } from '@angular/core';
...
class AppComponent implements Oninit {
ngOnInit() {
this.authService.loggedInUser().subscribe(res => {
this.currentUser = res;
});
}
}

参考模板中的this.currentUser

<div>Logged in as: {{currentUser}}</div>

最好也unsubscribeNgOnDestroy。

Answer 3

您可以使用 .retry 函数，以便只发送请求有限的次数。

你可以写这样的东西：

loggedInUser() {
const userId = localStorage.getItem('userId');
return this.http
.get('http://localhost:3000/user/current/' + userId)
.retry(1)
.map((response: Response) => {
const user = response.json();
return user;
})

对于此代码，如果请求首次失败，则只会重试一次。

作为参考，您可以在此处查看 - http://reactivex.io/documentation/operators/retry.html