英文:
How to act on a http.post.subscribe(...) inside method implementation and calling
问题
我很难理解它们的异步/等待行为。我明白我不能像在dotnet中那样简单地等待调用。我有以下的简单方法，尝试在一些REST API上登录：
login(email: string, password: string) {
let httpOptions: Object = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
}),
responseType: 'text'
};
const user: User = { UserName: email, Password: password };
return this.http.post<User>(`${this.projectsUrl}/login`, user, httpOptions).subscribe(
(response: any) => {
localStorage.setItem('id_token', response);
}
);
}
我从我的LoginComponent中调用login方法：
login() {
if (this.emailFormControl.value != "" && this.passwordFormControl.value != "") {
this.authService.login(this.emailFormControl.value!, this.passwordFormControl.value!);
// 我想获取登录方法的结果，而不是一些订阅
}
}
我找到了各种过时解决方案的示例，如.toPromise，.map和.do。我弄不明白。
英文:
I am having a hard time understanding their async/await behavior. I understand that I can't simply await calls as I am used to in dotnet. I have the following simple method which tries to log in on some rest API:
login(email:string, password:string ){
let httpOptions:Object = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
}),
responseType: 'text'
};
const user: User = { UserName: email, Password: password };
return this.http.post<User>(`${this.projectsUrl}/login`, user, httpOptions).subscribe(
(response : any) => {
localStorage.setItem('id_token', response);
}
);
}
I am calling the login method from my LoginComponent
login() {
if (this.emailFormControl.value != "" && this.passwordFormControl.value != "") {
this.authService.login(this.emailFormControl.value!, this.passwordFormControl.value!);
// I want to get the result of the login method, NOT some subscription
}
}
I am finding all kinds of examples of deprecated solutions like .toPromise, .map, and .do. I can't figure it out.
答案1
得分: 0
I figured out a way after the suggestion of jonrsharpe.
async login(email: string, password: string) {
let httpOptions: Object = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
}),
responseType: 'text'
};
const user: User = { UserName: email, Password: password };
const result$ = this.http.post<any>(`${this.projectsUrl}/login`, user, httpOptions);
let token = await lastValueFrom(result$);
if (token !== "") {
localStorage.setItem('id_token', token);
this.messageService.add(`auth serv: token ${token}`);
this.loggedIn = true;
}
return this.loggedIn;
}
If there is a better way of doing this I'd be happy to hear that.
英文:
I figured out a way after the suggestion of jonrsharpe.
async login(email:string, password:string ){
let httpOptions:Object = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
}),
responseType: 'text'
};
const user: User = { UserName: email, Password: password };
const result$ = this.http.post<any>(`${this.projectsUrl}/login`, user, httpOptions);
let token = await lastValueFrom(result$);
if (token != "") {
localStorage.setItem('id_token', token);
this.messageService.add(`auth serv: token ${token}`);
this.loggedIn = true;
}
return this.loggedIn;
}
if there is a better way of doing this I'd be happy to hear that.
答案2
得分: 0
You return the subscription. Return the observable:
...
return this.http.post<User>(`${this.projectsUrl}/login`, user, httpOptions).pipe(
tap((response) => localStorage.setItem('id_token', response)),
);
...
And subscribe in the component:
...
this.authService.login(...).subscribe(console.log);
...
英文:
You return the subscription. Return the observable:
...
return this.http.post<User>(`${this.projectsUrl}/login`, user, httpOptions).pipe(
tap((response) => localStorage.setItem('id_token', response)),
);
...
And subscribe in the component:
...
this.authService.login(...).subscribe(console.log);
...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论