如何在Angular中等待http请求完成? [英] How to wait for a http request to finish in Angular?
问题描述
我一直在使用前端的Angular 4和后端的ASP.NET Core 2构建SPA.基本上,给定一个有效的令牌,我试图自动续订用户登录名.例如,当我重新加载页面时,我希望Angular保持登录状态.我将令牌以及一个用户对象存储在本地存储中,这样我就可以检查一些用户属性(如果他(她)登录了例如).
I've been building a SPA with Angular 4 on the front end and ASP.NET Core 2 on the Backend. Basically, I'm trying to automatically renew an user login, given a valid token. When I reload a page, for example, I would like that Angular stayed logged in. I'm storing the token on local storage, as well as an user object so I can check some user properties (if he/she is logged in for example).
我应该如何强制angular等待http请求完成? 这是.net获取服务:
How should I force angular to wait for the http request to finish? Here's the .net get Service:
get<T>(url: string): Observable<T> {
let options = this.doHeaders();
return this.doSub(this.http.get(this.doUrl(url), options));
}
private doSub<T>(obs: Observable<Response>) {
var ob1: Observable<T> = obs.map(this.extractData)
.catch(this.handleError);
return ob1;
}
这是HTTP请求代码:
Here's the HTTP Request code:
getUser() {
if (this.storage.token == null || this.storage.token == '') {
return;
}
this.net.get<LoginModel>(`Authentication/GetUser`).subscribe(t => {
this.storage.token = t.token;
this.storage.user = t.user;
console.log(this.storage.user);
});
}
这是我检查用户的方式:
Here's how I'm checking for the user:
export class StorageService {
constructor(
private storage: LocalStorageService
) {
}
public user: User = null;
public get isLoggedIn(): boolean {
return this.user != null;
}
}
export class IsLoggedIn implements CanActivate {
constructor(
private storage: StorageService,
private router: Router
) { }
canActivate(
childRoute: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) {
if (this.storage.isLoggedIn) {
return true;
}
this.router.navigate(['account/login'], {
queryParams: {
return: state.url,
message: 'You must be logged in'
}
});
return false;
}}
真正的问题是:每当我尝试在受保护页面上重新加载页面时,Angular都不会等待http完成,而是将我重定向到登录页面.大约几秒钟后,它登录了,但是我已经被重定向了. 上面的代码正在AppComponent(NgOnInit)上执行.预先感谢.
The real issue is: Whenever I try to reload the page on a protected page, Angular does not wait for the http to complete, and redirects me to the login page. After about a few seconds, it logs in, but i've been redirected already. The above code is being executed on AppComponent (NgOnInit). Thanks in advance.
推荐答案
您可以将promises与async/await一起使用
You can use promises with async/await
async getUser() {
if (this.storage.token == null || this.storage.token == '') {
return;
}
const t = await this.net.get<LoginModel>(`Authentication/GetUser`).toPromise();
this.storage.token = t.token;
this.storage.user = t.user;
console.log(this.storage.user);
}
查看更多:
- Promises
- async
- await
- ES8 async/await
- async/await tutorial
- async/await explained
这篇关于如何在Angular中等待http请求完成?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!